使用getUserMedia获取音频和视频

Media Capture和Streams W3C规范定义了一组新的JavaScript API，使应用程序能够从平台请求音频和视频流，以及一组API来操作和处理所获取的媒体流。的MediaStream对象是主接口，使所有的这些功能。

MediaStream携带一个或多个同步轨道

• MediaStream对象由一个或多个单独的轨道（MediaStreamTrack）组成。
• MediaStream对象中的轨道彼此同步。
• 输入源可以是物理设备，例如麦克风，网络摄像头或来自用户硬盘驱动器或远程网络对等体的本地或远程文件。
• MediaStream的输出可以发送到一个或多个目的地：本地视频或音频元素，用于后处理的JavaScript代码或远程对等体。

MediaStream对象表示实时媒体流，并允许应用程序代码获取数据，操纵单个轨道和指定输出。所有音频和视频处理（例如噪声消除，均衡，图像增强等）都由音频和视频引擎自动处理。

然而，所获取的媒体流的特征受到输入源的能力的约束：麦克风可以仅发射音频流，并且一些网络摄像机可以产生比其他视频流更高分辨率的视频流。因此，在浏览器中请求媒体流时，getUserMedia()API允许我们指定强制和可选约束的列表以匹配应用程序的需求：

<video autoplay playsinline></video>
<script>
    //配置视频参数
    const constraints = {
      video: true,
    };
    //获取video元素
    const video = document.querySelector('video');
    //添加视频流到video标签
    function gotMediaStream(mediaStream) {
      video.srcObject = mediaStream;
    }
    //获取视频流错误时执行
    function handleMediaStreamError(error) {
      console.log('navigator.getUserMedia error: ', error);
    }
    //获取设备
    navigator.mediaDevices.getUserMedia(constraints)
      .then(gotMediaStream).catch(handleMediaStreamError);
</script>