WebRTC（二）获取用户的媒体流

本是古典何须时尚 2023-03-14 10:51 22阅读 0赞

本文要介绍两个API：getUserMedia 与 getDisplayMedia

### getUserMedia ###

MediaStream 接口用于表示媒体数据流。（流可以是输入或输出，也可以是本地或远程）

单个 MediaStream 可以包含零个或多个轨道。（每个轨道都有一个对应的 MediaStreamTrack 对象）

> MediaStreamTrack 表示包含一个或多个通道的内容，其中，通道之间具有定义的已知的关系。

MediaStream 中的所有轨道在渲染时是**同步**的。

下图显示了由单个视频轨道和两个不同的音频（左声道和右声道）轨道组成的 MediaStream。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70]  
平时我们在开发时总是习惯性地定义 `{video: true, audio: true}` 这两个参数，然后通过写css样式控制展示视频窗口。

但其实API本来带有一种约束，可以初始化视频的宽高比，面向照相机的模式（正面或背面），音频和视频帧率等等。

navigator.mediaDevices
        .getUserMedia({ 
      		audio: true,
      		video: {  
      			width: 1280,
      			height: 720
      		}
    	})
    	.then(stream => { 
    	console.log(stream);
    });

如果想实现录屏（屏幕共享）的话，就是获取媒体的参数改一下，比如将摄像头改成屏幕：

navigator.mediaDevices
        .getUserMedia({ 
        	video: { 
        		mediaSource: 'screen'
        	}
        })
        .then(stream => { 
        console.log(stream);
    });

这个目前只有火狐浏览器支持，（而Chrome和Edge是采用另外的方式，见下文）

然后就会弹一个框询问要录制的应用窗口，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70 1]

约束的详细用法可以看这篇博客： [getUserMedia() Video Constraints][getUserMedia_ Video Constraints]

Ok~ 这部分内容非常简单，下面是一个简单的Demo：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <h1><code>getUserMedia()</code> very simple demo</h1>
        <video></video>
        <script>
          navigator.getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia;
     
          const localVideo = document.querySelector('video');
          // MediaStreamConstraints 用于指定请求哪种轨道（音频，视频或两者）
          const constraints = {  audio: false, video: true };
     
          function successCallback(stream) { 
            localVideo.srcObject = stream;
            localVideo.play();
          }
     
          function errorCallback(error) { 
            console.error('navigator.getUserMedia error: ', error);
          }
     
          if (navigator.mediaDevices.getUserMedia) { 
            navigator.mediaDevices
              .getUserMedia(constraints)
              .then(successCallback)
              .catch(errorCallback);
          } else { 
            navigator.getUserMedia(constraints, successCallback, errorCallback);
          }
        </script>
      </body>
    </html>

### getDisplayMedia ###

getDisplayMedia 与 getUserMedia类似，但又不完全相同，区别表现在：

*  只返回视频轨道，不支持音频轨道。
 *  使用许可不能重复使用，每次都必须提示用户许可。

在Chrome和Edge浏览器中使用屏幕分享可用getDisplayMedia，而Firefox用getUserMedia。

Chrome 分享屏幕的效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70]: /images/20230312/a2b3a39067234a5d95fc90955e913bc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70 1]: /images/20230312/dbe3892612d34702a5a3e4db4ffd59a6.png
[getUserMedia_ Video Constraints]: https://blog.addpipe.com/getusermedia-video-constraints/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM0NTExNTc_size_16_color_FFFFFF_t_70 2]: /images/20230312/36fa4da2d9a7462594c45505fbaf47ad.png