web技术分享| WebRTC 实现屏幕共享

前言

屏幕共享在工作中是非常实用的功能，比如开会时分享ppt，数据图表等，老师也可以分享自己的屏幕，实现线上教学，那么屏幕共享是如何实现的呢，今天就跟随笔者一起研究一下吧！

获取button元素

const startButton = document.getElementById('startButton');

检测浏览器是否支持

• mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {
   
      startButton.disabled = false;
} else {
   
      errorMsg('不支持getDisplayMedia');
}

实现屏幕共享

• getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里. 然后，这个媒体流可以通过使用 MediaStream Recording 被记录或者作为WebRTC 会话的一部分被传输。

• [参数] constraints 可选

  • 一个可选的MediaStreamConstraints对象，它指定了返回的MediaStream的要求。 因为getDisplayMedia()需要视频轨道，所以即使constraints 对象没有明确请求视频轨道，返回的流也会有一个。

• </