屏幕分享(H5)

最近更新时间:2019-04-29 16:24:55

本文主要介绍如何开启 TRTC SDK 中的屏幕分享功能,由于各个平台的屏幕分享接口有比较大的风格差异,所以我们按平台分成多篇文档来介绍,本篇主要介绍如何在 Chrome 浏览器上做屏幕分享。

安装插件

Chrome M72 之前版本的浏览器(包括 M72)实现屏幕分享功能,需要在线安装一个屏幕分享插件,安装方法如下:

  1. 在 Chrome 浏览器中输入插件地址:https://chrome.google.com/webstore/detail/screen-share/igbnnaaplbclljbpbhaplekapmfegkmg?utm_source=chrome-app-launcher-info-dialog
  2. 安装完成后,打开 Demo 地址检测是否安装成功。

注意:

  • Chrome M72 之后的版本已经支持原生接口进行屏幕分享,不需要再安装插件。之前的浏览器版本仍需安装插件。
  • 当前 WebRTCAPI 3.1 已适配 Chrome M72 之后的版本。

Demo 演示

用 Chrome 浏览器安装完屏幕分享插件后,单击 DEMO 体验地址 即可体验 TRTC 的屏幕分享功能。

源代下载

https://gitee.com/vqcloud/webrtc-samples

如何使用

step1:检测是否支持屏幕分享

通过 detectRTC 接口可以检测一下当前用户的浏览器环境是否支持屏幕分享。

WebRTCAPI.detectRTC(function(data) {
  if (!data.screenshare) {
    console.error("当前浏览器不支持屏幕分享,请使用 Chrome 浏览器并安装屏幕分享插件!");
  }
});

step2:先以观众角色进入房间

先以观众角色进入指定的音视频房间,并将 closeLocalMedia 设置为 true,这样可以关闭本地的摄像头采集。

var RTC = new WebRTCAPI({
  userId: userId,
  sdkAppId: sdkappid,
  accountType: accountType,
  userSig: userSig,
  closeLocalMedia: true
});

step3:开启屏幕分享视频源

通过 getLocalStream 接口开启屏幕分享视频源,需要指定 screenSources 参数项,该参数代表您希望捕获的屏幕窗口来源,它可以是:

  • screen:当前整个屏幕。
  • window:某一个应用窗口。
  • tab:Chrome 的某个标签页。

RTC.getLocalStream(
  {
    screen: true,
    video: true,
    screenSources: "screen,window,tab",
    attributes: {
      frameRate: 10
    }
  },
  function(info) {
    window.screenStream = info.stream;
  },
  function(error) {
    console.error(error);
  }
);

step4:进入房间并推流

屏幕分享的特点是高分辨率,因此对码率的要求要高于摄像头画面。为了保证屏幕分享有足够的清晰度,需要在码率、帧率和分辨率上进行相应的配置调整。

  • 我们建议 PPT 类的分享,降低帧率到5帧 - 10帧,码率1.2M+。
  • 如果对画面流畅度要求高,帧率可以配置到15帧 - 20帧,码率1.5M+。
RTC.enterRoom({
    roomid : $("#roomid").val()
},function(){
    //进房成功,音视频推流
    RTC.startRTC({
      role: "screen_share_role",
      stream: screenStream
    });
},function(){

});

常见问题

为什么我在本地无法进行屏幕分享?
受限于浏览器权限,需要在 localhost 或者通过服务器访问,不能直接访问本地 HTML 文件进行屏幕分享测试。

有没有实例代码?
请参考 https://gitee.com/vqcloud/webrtc-samples

手机端的 Chrome 是否支持?
依赖 Chrome 插件,移动端 H5 目前不支持。

无法访问 Chrome 应用商店?
M72 版本以下的 Chrome 浏览器可以通过以下方法安装插件:

  1. 下载 Screen-Share_v1.3.4.crx
  2. 打开 Chrome 浏览器:单击右上角【更多】(三个竖着的点) >【更多工具】>【扩展程序】。
    进入扩展程序图
  3. 打开开发者模式。
    打开开发者模式图
  4. 将第一步中下载的文件拖拽进浏览器界面内。
    拖拽图
  5. 安装成功!
    安装成功tu

为什么不能指定分享分辨率?
Chrome M72 之后版本的浏览器所提供的原生接口不支持指定分享分辨率。