Chrome屏幕共享功能接入指南

互动直播 3195℃

Web端屏幕共享的应用场景众多,如:

  • 在线课堂,老师分享桌面教学课件;
  • 在线会议,与会者全屏分享会议内容;
  • 在线医疗,医生分析患者电子病例;

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

1_副本

网易云信工程师——Have Done

网易云信工程师采用Chrome插件的形式,将屏幕共享功能集成到自研的WebRTC SDK 中,提供功能完善的Chrome插件、简洁的API接口,详细的说明文档,方便开发者迅速集成Web端屏幕共享功能。目前网易云信WebRTC SDK4.1.0版本已经支持Chrome浏览器的屏幕共享功能,试用于 Chrome 浏览器58.0以上版本。

开发者——To Do

开发者如果在自己的应用中集成Web端屏幕共享功能,要做的事情有:

  • 获取网易云信屏幕共享插件;
  • 发布开发者专属的屏幕共享插件;
  • 获取屏幕共享插件 ID;
  • 部署代码,集成Web屏幕共享功能;

下面简要介绍各个环节。

1、获取网易云信屏幕共享插件

开发者在自己的应用中集成Web端屏幕共享功能,请先去云信官网下载Chrome 屏幕共享插件,插件文件夹的目录结构如图所示:

2_副本

2、发布专属的屏幕共享插件

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

7

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

8

请将获取到的云信Chrome 屏幕共享插件文件,且已经修改为自己的域名的文件夹打包,上传到 Chrome应用商店。请参考Web端屏幕共享插件发布介绍其目的为获取屏幕共享插件ID,将该插件ID通过接口传递给网易云信WebRTC SDK ;

3、获取屏幕共享插件 ID

在Chrome应用商店中成功屏幕共享插件后,开发者在应用商店获屏幕共享插件(请确定自己的网络可以正常访问Chrome应用商店

6

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

14

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

12

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

 

13

4、部署代码,集成Web屏幕共享功能

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

12_副本

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

4

用户(屏幕共享发起者)——To Do

开发者在Chrome应用商店成功发布自己设计的屏幕共享插件后,且在自己的应用中集成了屏幕共享功能,应用发布后,用户需要做的事情是,下载安装屏幕共享插件。下载安装的方式主要有两种,分为在Chrome应用商店和在开发者自己的网页上下载安装,下文分别介绍。

方式一、从Chrome应用商店下载安装

在Chrome应用商店中成功发布屏幕共享插件后,开发者或者用户都可以在应用商店获屏幕共享插件(请确定自己的网络可以正常访问Chrome应用商店

14_副本

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

16_副本

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

19_副本

方式二、从开发者自己的网页上下载安装

如果用户不能正常访问Chrome应用商店获取插件,开发者可将自己的插件上传到用户可以访问的一个服务器上,用户获取到屏幕共享插件,手动安装插件,主要流程如下:

  • 打开 Chrome 浏览器右上角,点击屏幕右上方的扩展按钮,选择 『更多工具』-『扩展程序』

20_副本

  • 将获取的屏幕共享插件文件夹拖拽到此窗口。

21_副本

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