目录

前言

正文

1. 开启摄像头和麦克风

2. 增加播控按钮

3. 本地预览拍照

4. 保存预览照片

5. 显示贴图效果（封面）

6. 视频预览特效（多种效果）

6.1 曝光效果

6.2 悬浮立体效果

6.3 磨皮效果

6.4 反色效果

结论

前言

今天这篇文章给大家介绍一款非常简单的基于WebRTC采集端的视频预览播放器。

《WebRTC工作原理精讲》系列-总览

正文

我们需要做的是本地预览的视频播放器，那么首先肯定是要打开摄像头，然后显示播放器控制按钮，最后再增加一些辅助功能，比如拍照、保存照片、贴图、视频特效等。接下来，我们就具体看看某个环节的操作。为了保证演示效果，建议尝试的小伙伴使用chrome浏览器。

1. 开启摄像头和麦克风

打开摄像头可以使用WebRTC三大接口之一的getUserMedia方法来实现，具体可以参考如下代码：

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>