上QQ阅读APP看书，第一时间看更新
5.5 本地视频预览
当使用getUserMedia（）接口获得本地音视频流MediaStream后，可以使用H5的<video>标签将其展示出来。要实现这个功能很简单，只要将MediaStream赋值给<video>标签的srcObject属性即可。
我们来看一个具体的例子，重点看一看<video>标签是如何与MediaStream建立联系的。示例参见代码5.8。
代码5.8 本地视频预览
1 //H5 代码
2 <html >
3 …
4 <body >
5 …
6 // 定义了一个<video > 标签
7 <video autoplay playsinline ></video >
8 <script src="./demo.js" ></script >
9 …
10 </body >
11 </html >
12
13 //demo.js
14 …
15 // 从H5 获得<video > 标签
16 const lv = document.querySelector('video ');
17
18 // getUserMedia 的采集限制
19 const contrains = {
20 video: true ,
21 audio: true
22 };
23
24 // 调用getUserMedia 成功后， 回调该函数
25 function gotLocalStream(mediaStream){
26 lv.srcObject = mediaStream;
27 }
28 …
29 navigator.mediaDevices.getUserMedia(contrains)
30 .then(gotLocalStream)
31 .catch(handleLocalMediaStreamError);
32 …
上面的代码由两部分组成，即H5代码和js代码。其中，H5代码用于定义<video>标签；js代码用于控制音视频数据的采集，并将采集的视频数据与<video>标签建立联系。
首先来看H5的代码。该代码非常简单，唯一需要说明的是<video>标签的两个属性，即autoplay和playsinline。其中autoplay表示<video>标签收到音视频数据后立即开始播放；playsinline的作用是让播放器在页面内播放，而不是调用外部的系统播放器播放音视频。
接下来看一下demo.js。demo.js中的大部分代码已经在5.3节中介绍过了。需要重点说明的是，MediaStream与<video>标签的绑定是在回调函数gotLocalStream（）中完成的。只要将MediaStream赋值给<video>标签（即代码第26行），即完成了绑定工作。这样，从音视频设备上采集的数据就可以通过<video>标签播放出来了。至此就完成了本地视频预览工作。