Screen Capture with getDisplayMedia

1、getUserMedia与getDisplayMedia*比较

---

除了下面提到的几点，其他操作，两者是相同的。

getUserMedia

• 获取的mediaStream可以包括例如视频轨道（由硬件或虚拟视频源如相机，视频记录设备，屏幕共享服务等产生），音频轨道（类似地，由物理或虚拟音频源如麦克风，A / D转换器等）以及可能的其他轨道类型。

• 接受MediaStreamConstraints约束参数对捕获的mediaStream进行限制。

getDisplayMedia

• 从显示设备获取媒体之外

• 并且constraints参数不接受MediaTrackConstraints 值。不能实现约束。

• 该MediaStream对象将只有一个MediaStreamTrack用于捕获的视频流; 没有MediaStreamTrack对应于捕获的音频流。

• 不能保持权限。当选择完要分享的屏幕或窗口后，就不能更改了，除非刷新页面，重新惊醒Scrren Capture

  

  image.png

2、getDisplayMedia例子

---

navigator.getDisplayMedia({ video: true })
  .then(stream => {
    // we have a stream, attach it to a feedback video element
    videoElement.srcObject = stream;
  }, error => {
    console.log("Unable to acquire screen capture", error);
  });

3、用户权限

---

• 调用getDisplayMedia()需要一个HTTPS源。

• 当调用getDisplayMedia()时，提示用户允许或拒绝允许屏幕捕获。

• 当用户选择的权限持续存在时，捕获选择器UI将出现在每个getDisplayMedia()调用中。权限可以通过微软Edvices中的站点权限UI（在URL栏中设置或通过站点信息面板）来管理。

• 如果一个网页从iframe调用getDisplayMedia()，我们将根据自己的URL单独管理屏幕捕获设备许可。在iframe来自其父网页的不同域的情况下，这为用户提供了保护。

• 如上所述，不允许MediaStreamConstraints限制影响getDisplayMedia屏幕捕获源的选择。

Demo

---

测试地址：https://ouchunrun.github.io/capture_screen_with_getDisplayMedia/
这里我使用的是Adapter.js库

测试截图是这样的：
（对等端的显示在5S左右，需要稍加等待）

image.png

和上面提到的一样，他需要是一个HTTPS源才能访问。
右下方也能看到，这里的对等连接时的RTCPeerConnection调用的是Adapter.js里面封装的方法，而不是浏览器自带的。

浏览器自带的时这样子的：

image.png

---

参考

---

Bringing Screen Capture to Microsoft Edge with the Media Capture API

Screen Capture