Chrome下使用WebRTC实现屏幕共享

1.概述

屏幕共享就是将自己电脑的屏幕内容以视频的方式分享给其他人观看，以提高沟通效率。屏幕共享作为一种实现互动的方式，经常出现在用户的生活场景中，比如:

• 视频会议中，屏幕共享可以将讲话者本地的文件、数据、网页、PPT 等画面分享给其他与会人。

• 在线课堂场景中，屏幕共享可以将老师的课件、笔记、讲课内容等画面展示给学生观看。 那么如何能够简单方便的实现屏幕共享呢?本篇文章将详细介绍如何在Chrome下使用WebRTC快速实现屏幕共享。

2.屏幕共享实现

屏幕共享大致可以分为屏幕流捕捉，流传输和屏幕流渲染。

• 屏幕流捕捉：可以使用Chrome提供的getDisplayMedia方法来捕获屏幕流，为流传输提供数据。

• 流传输：使用WebRTC来将数据传输给服务器或者另一个客户端，因 WebRTC提供的低延迟和抗弱网等能力可以保证很好的用户体验，所以是一个非常合适的选择

• 屏幕流渲染：可以使用Canvas或者Video来渲染播放,本篇文章中使用Video元素来渲染播放

3.一些准备

• Windows 10系统

• Chrome 93(注意本篇文章使用了Chrome提供的api来捕获屏幕流，此api需要Chrome 72及以上版本)

• 准备一个html文件，编写另个video标签，一个用来播放本地捕获的屏幕共享流，一个用来渲染播放远端传输过来的屏幕共享流

<div id="videos">
        <div class="video-container">
            <h2>本地捕获的屏幕共享流</h2>
            <video id="srcVideo" playsinline controls muted loop class="srcVideo">
​
            </video>
        </div>
        <div class="video-container">
            <h2>远端传输过来的屏幕共享流渲染</h2>
            <video id="shareStreamVideo" playsinline autoplay m