4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享

一、共享桌面原理

共享桌面在直播系统中是一个必备功能

共享者：每秒钟抓取多次屏幕，每次抓取的屏幕都与上一次抓取的屏幕做比较，取它们的差值，然后对差值进行压缩；如果是第一次抓屏或切幕的情况，即本次抓取的屏幕与上一次抓取屏幕的变化率超过 80% 时，就做全屏的帧内压缩。最后再将压缩后的数据通过传输模块传送到观看端；数据到达观看端后，再进行解码，这样即可还原出整幅图片并显示出来

远程控制端：当用户通过鼠标点击共享桌面的某个位置时，会首先计算出鼠标实际点击的位置，然后将其作为参数，通过信令发送给共享端。共享端收到信令后，会模拟本地鼠标，即调用相关的 API，完成最终的操作

共享桌面的过程：抓屏、压缩编码、传输、解码、显示、控制

二、抓取桌面

浏览器 WebRTC 中提供了方法 var promise = navigator.mediaDevices.getDisplayMedia(constraints) 进行桌面的抓取

共享桌面，大多数人知道的可能是RDP（Remote Desktop Protocal）协议，它是 Windows 系统下的共享桌面协议；还有一种更通用的远程桌面控制协议 VNC（Virtual Network Console），它可以实现在不同的操作系统上共享远程桌面，而 TeamViewer、Todesk 都是使用的该协议

远程桌面协议一般分为桌面数据处理与信令控制两部分

桌面数据：包括了桌面的抓取、编码、压缩、传输、解码和渲染

信令控制：包括键盘事件、鼠标事件以及接收到这些事件消息后的相关处理等

抓取桌面

三、桌面展示

桌面采集后，就可以通过 HTML 中的

当桌面数据被抓到之后，会触发 getDeskStream 函数

在该函数中将获取到的 stream 与 video 标签联系起来，这样就可以显示桌面了

抓取桌面

四、录制桌面视频

录制视频其实在上一章中详细说过，这里就不再重复了，这里只贴一下大概的逻辑代码

首先通过 getDisplayMedia 方法获取到本地桌面数据

然后将该流当作参数传给 MediaRecorder 对象

并实现 ondataavailable 事件，最终将音视频流录制下来

具体实现请参考上一篇文章自己进行完善

开始录制

视频 视频直播

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。