let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    getUserMedia.call(navigator,{ video:true },function(localMediaStream){ let video =document.getElementById('video1');
        video.srcObject = localMediaStream;
    },function(e) { console.log("error: ",e);
    });

正常情况下，chrome浏览器会在左上角弹出授权提示框，让我们选择，此时，我们选择“允许”。

授权后，浏览器就打开了我们的摄像头，此时，我们会看到本地的视频预览画面，如下图所示：

当然，我们也可以在调用getUserMedia方法的时候，设置“audio=true”请求打开我们本地的麦克风。

2. 增加播控按钮

打开摄像头后，我们可以预览自己的本地视频，但是我们如何操作自己的摄像头和扬声器？如果我们想要控制自己的摄像头和扬声器，就需要设置一下 video 标签的另外一个属性设置：controls参数。具体使用情况可以参考如下代码：

<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>

设置好后，我们再次启动播放器，我们就会发现视频预览画面多了一些播放器的控制按钮，如下图所示：

通过这些控制按钮，我们可以操作本地视频画面的播放和暂停，扬声器的开关，启动和取消全屏，以及开启画中画的功能。

3. 本地预览拍照

为了实现本地拍

WebRTC[28]-一款非常简单的基于WebRTC的视频预览播放器（具有贴图、视频特效）

前言

正文

1. 开启摄像头和麦克风

2. 增加播控按钮

3. 本地预览拍照