WebRTC[28]-一款非常简单的基于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>
设置好后，我们再次启动播放器，我们就会发现视频预览画面多
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
WebRTC工作原理精讲 文章被收录于专栏
WebRTC 作为当下最热门的实时音视频通讯框架，涉及非常多的过程，比如采集、编码、组包、发包、传输、收包、丢包重传、解封装、解码、音视频同步、渲染等，同时还包括很多功能特性，比如ANS、AGC、AEC，REMB、GCC、CNG、FEC、PLI、SVC等，需要一点点深入理解其中的奥秘。
