webrtc屏幕共享开发(web实现屏幕共享)

不管是在学习、生活或是娱乐场景下，屏幕共享作为实现互动的一种方式被越来越多的用户应用在日常生活中，如远程协作、在线会议、在线课堂等场景。

屏幕共享这个衍生功能已经在越来越多的场景上成功使用，那么该如何实现屏幕共享呢？本篇文章我们将详细介绍如何利用WebRTC和即构音视频技术实现 Web端的屏幕共享。

Web端如何实现屏幕捕捉
Web 端浏览器可以实现屏幕共享么? 在电脑端是可以做到的。屏幕共享分为两个步骤：屏幕捕捉 + 流媒体传输。

屏幕捕捉：获取数据, 为流媒体传输提供数据源;

流媒体传输: 将音视频数据从一个客户端传输到另一个客户端。当前比较成熟的方案是使用WebRTC协议提供的低延迟和抗弱网能力以此来保证体验；

WebRTC 协议要求提供的流数据必须是 MediaStream 对象，所以屏幕采集的流也必须是 MediaStream 类型。我们先以电脑端 Chrome 72 为例 ( 不同浏览器写法会有点不一样)，捕捉屏幕画面代码是这样的:
async function startCapture(displayMediaOptions){
let captureStream = null;
try{
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
}catch(err){
console.error("Error: "+ err);
}
return captureStream;
}
效果如下：