Web端屏幕共享的应用场景众多,如:
为了有效解决用户的这些痛点,网易云信工程师已经支持Chrome浏览器下的屏幕共享功能。本文主要谈谈为了实现Web端屏幕共享功能,网易云信WebRTC 工程师,开发者,用户需要做哪些事。

网易云信工程师——Have Done
网易云信工程师采用Chrome插件的形式,将屏幕共享功能集成到自研的WebRTC SDK 中,提供功能完善的Chrome插件、简洁的API接口,详细的说明文档,方便开发者迅速集成Web端屏幕共享功能。目前网易云信WebRTC SDK4.1.0版本已经支持Chrome浏览器的屏幕共享功能,试用于 Chrome 浏览器58.0以上版本。
开发者——To Do
开发者如果在自己的应用中集成Web端屏幕共享功能,要做的事情有:
下面简要介绍各个环节。
1、获取网易云信屏幕共享插件
开发者在自己的应用中集成Web端屏幕共享功能,请先去云信官网下载Chrome 屏幕共享插件,插件文件夹的目录结构如图所示:

2、发布专属的屏幕共享插件
在发布自己的屏幕共享插件ID之前,打开获取到的网易云信屏幕共享文件夹,将manifest. json 文件打开。

然后将 match 行的域名替换为开发者的网页域名。

请将获取到的云信Chrome 屏幕共享插件文件,且已经修改为自己的域名的文件夹打包,上传到 Chrome应用商店。请参考Web端屏幕共享插件发布介绍。其目的为:获取屏幕共享插件ID,将该插件ID通过接口传递给网易云信WebRTC SDK ;
3、获取屏幕共享插件 ID
在Chrome应用商店中成功屏幕共享插件后,开发者在应用商店获屏幕共享插件(请确定自己的网络可以正常访问Chrome应用商店)

点击+添加至CHROME,安装屏幕共享插件ID。

点击添加扩展程序安装屏幕共享插件,当Chrome浏览器器的工具栏右上角显示屏幕共享插件logo图标,则下载安装完成,用户可以用Chrome浏览器端的屏幕共享功能。

屏幕共享插件安装完成之后,在 Chrome 浏览器窗口查看插件 ID,该插件ID在集成Web屏幕共享应用时用到。打开 Chrome 浏览器右上角,点击屏幕右上方的扩展按钮,选择 『更多工具』-『扩展程序』,可以看到已经安装完的屏幕共享插件,获取插件ID。

4、部署代码,集成Web屏幕共享功能
开发者在自己的应用中集成Web屏幕共享功能,主要代码如下:

具体代码部署请下载参考网易云信Web教育demo源码。

用户(屏幕共享发起者)——To Do
开发者在Chrome应用商店成功发布自己设计的屏幕共享插件后,且在自己的应用中集成了屏幕共享功能,应用发布后,用户需要做的事情是,下载安装屏幕共享插件。下载安装的方式主要有两种,分为在Chrome应用商店和在开发者自己的网页上下载安装,下文分别介绍。
方式一、从Chrome应用商店下载安装
在Chrome应用商店中成功发布屏幕共享插件后,开发者或者用户都可以在应用商店获屏幕共享插件(请确定自己的网络可以正常访问Chrome应用商店)

点击+添加至CHROME,安装屏幕共享插件ID。

点击添加扩展程序安装屏幕共享插件,当Chrome浏览器器的工具栏右上角显示屏幕共享插件logo图标,则下载安装完成,用户可以用Chrome浏览器端的屏幕共享功能。

方式二、从开发者自己的网页上下载安装
如果用户不能正常访问Chrome应用商店获取插件,开发者可将自己的插件上传到用户可以访问的一个服务器上,用户获取到屏幕共享插件,手动安装插件,主要流程如下:
- 打开 Chrome 浏览器右上角,点击屏幕右上方的扩展按钮,选择 『更多工具』-『扩展程序』


当Chrome浏览器的工具栏右上角显示屏幕共享插件logo图标,则下载安装完成,则可以使用Chrome浏览器端的屏幕共享功能。