头图

基于 Web 端的屏幕共享实践

屏幕共享的英文叫做 DesktopSharing,通俗点讲就是将自己电脑的画面分享给其他人, 被分享的可以是整个电脑屏幕、应用程序或者某一个打开的网页等等。

而随着音视频领域的深入发展,完备的功能在用户需求激增的背景下催生,不管是是在学习、生活或是娱乐场景下,屏幕共享作为实现互动的一种方式被越来越多的用户应用在日常生活中:

1、远程协作(TeamViewer):控制远程计算机,完成协作等;

2、在线会议:参会者只需在自己的电脑屏幕上查看共享的文件材料,并观看文件演示等;

3、在线课堂:屏幕共享可以将老师的课件、笔记、讲课内容等画面展示给学生观看等;

......

由此可见,屏幕共享这个衍生功能已经在越来越多的场景上成功使用,那么该如何实现屏幕共享呢?本篇文章我们将详细介绍在 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;
}

效果如下:

图片

 (示例demo地址:https://zegoim.github.io/expr...

 关键语法:

//  constraints 参数可参考https://developer.mozilla.org/zhCN/docs/Web/API/MediaDevices/getDisplayMedia
let promise = navigator.mediaDevices.getDisplayMedia(constraints);

屏幕捕捉兼容性问题及应对方案

作为 Web 前端开发,相信这个问题是大家比较关心的,目前屏幕捕捉接口兼容情况比较复杂,仅支持在以下桌面端浏览器中进行屏幕捕捉:

  • Chrome 58 或以上版本
  • Firefox 56 或以上版本
  • Edge 80 及以上版本
  • macOS 的 Safari  13 及以上版本

其中Chrome浏览器还可以进一步分为: 有插件和无插件。

  • 有插件: 需要在浏览器上额外安装插件, 利用 Chrome 提供的能力捕捉屏幕,插件方式可以在较低版本上实现捕捉;
  • 无插件: 不用额外安装任何插件, 但要求 Chrome 必须是 72 及以上版本。

Chrome 浏览器如果要支持音频分享, 无插件方式必须要是 Chrome 74 及以上版本,Safari 浏览器目前则只支持分享整个屏幕,无法选择应用程序和浏览器页面。

清楚浏览器兼容情况后,就可以针对浏览器进行判断了,大致思路是通过 navigator.appVersion 判断浏览器类型/平台/版本,并对接口做是否存在的判断,在正式业务开始前,提前感知浏览器是否支持该能力。

代码写起来是纯体力活,如果不想对浏览器类型和版本一一处理,ZEGO 即构科技的 zego-express-engine-webrtc.js 帮大家做好了内部兼容, 并提供检测接口方便快速上手

​​​​​​​点击查看: https://doc-zh.zego.im/articl...

浏览器实现自定义尺寸分享

我们看浏览器提供的接口, 无论是什么浏览器类型或版本,最小粒度只能捕捉到一个页面,如果要分享的页面或者程序有比较敏感的信息,不希望全部被分享出去,我们应该怎么办呢? 

只看浏览器接口是没有办法实现的,不过 MediaStream 对象还可以从 video 或者 canvas 这类媒体标签上获取。如果把捕捉到的流媒体对象渲染到画布上,再从画布上截取我们想要分享的部分画面,就可以实现指定尺寸分享了。

实现伪代码如下:

// 获取屏幕捕捉流
let screenStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

// 创建画布
const ctx = canvas.getContext('2d');

// 滚动渲染视频
let timer = null;
function videoDrawInCanvas(){
timer = setTimeout(async () => {
videoDrawInCanvas( ctx, source, canvas, videoX, videoY, videoWidth, videoHeight);
}, 60);
}

// 获取重新绘制的画布流
const canvasMedidaStream = canvas.captureStream(25);

效果如下:

图片

可以看到这种方式的确是可行的,ZEGO WebRTC 团队也提供了对应的 demo 和源码, 免费给大家参考和体验,并封装了对应的库 rangeShare.js,帮助大家快速上手直接使用,可点击链接查看:[ https://zegodev.github.io/zeg...]()。

实践过程中我们发现,还有一些问题也非常值得大家注意:

  • 问题一:canvas 渲染对浏览器 cpu 消耗是比较高的, 性能不好的设备可能会导致整个页面卡顿;
  • 问题二:虽然画面可以重新绘制, 但是重新绘制的流是纯视频的,如果捕捉的流是包含音频,会导致音频丢失。

对于问题一:ZEGO WebRTC 团队 经过大量设备测试,在 rangeShare.js 库中把参数调整到尽可能适配更多设备。同时 demo 中提供了估算 cpu 占用的代码, 在 cpu 消耗过大情况下,可以提示本设备 cpu 占用过高,开发者可根据提示选择更换设备,或关闭其他 cpu 占用较高的进程。

对于问题二:rangeShare.js 也帮你把这个问题考虑到了,屏幕捕捉到的流传进来时,若检测到包含音频,会自动缓存音轨,并在输出的时候和画布流混合。

总结

以上就是关于在 Web 端实现屏幕共享的技术解读,而随着 5G 技术的到来和硬件设备性能的提升,浏览器上实现流媒体的低延迟传输和流媒体数据处理已经有较成熟的方案,比如浏览器上实现屏幕捕捉。

音视频能表达的信息相比文字图片更丰富,所以音视频传输正变得更普及,同时现代浏览器也在不断的更新音视频操作相关 API,浏览器能做的事情也许比我们想象中的更多。

ZEGO WebRTC 团队会持续跟大家分享 Web 端关于音视频方面有意思的技术问题,如有出入,欢迎大家指正和交流。


ZEGO即构科技
音视频云服务商

音视频云服务商

30 声望
11 粉丝
0 条评论
推荐阅读
音视频开发进阶|第七讲:分辨率与帧率·上篇
在视频系列的前几篇推文中,我们已经接触了视频相关的不少概念,它们都是围绕着几个核心角色 :色彩、像素、图像和视频来展开的。这几个核心角色之间的关系,大家应该都有了基本的了解,我们再来简单回顾一下。

ZEGO即构科技阅读 390

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.5k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图

音视频云服务商

30 声望
11 粉丝
宣传栏