本地视频预览

当使用 getUserMedia() 接口获得本地音视频流 MediaStream 后，可以使用 H5 的 <video> 标签将其展示出来。要实现这个功能很简单，只要将 MediaStream 赋值给 <video> 标签的 srcObject 属性即可。

我们来看一个具体的例子，重点看一看 <video> 标签是如何与 MediaStream 建立联系的。示例参见代码 5.8。

代码5.8　本地视频预览

<!-- H5 代码 -->
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- 定义了一个 <video> 标签 -->
    <video autoplay playsinline></video>
    <script src="./demo.js"></script>
    <!-- ... -->
  </body>
</html>

// demo.js
// 从 H5 获得 <video> 标签
const lv = document.querySelector('video');

// getUserMedia 的采集限制
const constraints = {
  video: true,
  audio: true
};

// 调用 getUserMedia 成功后，回调该函数
function gotLocalStream(mediaStream) {
  lv.srcObject = mediaStream;
}

// 调用 getUserMedia
navigator.mediaDevices.getUserMedia(constraints)
  .then(gotLocalStream)
  .catch(handleLocalMediaStreamError);

// ...

上面的代码由两部分组成，即 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> 标签播放出来了。至此就完成了本地视频预览工作。