屏幕共享接入指南

屏幕共享的应用场景众多，如:

• 在线课堂，老师分析桌面教学科技；
• 在线会议，与会者全屏分享会议内容；
• 在线医疗，议程分析患者电子病例；
• 远程协助，远程帮助其他人解决问题；

为了有效解决用户的这些痛点，屏幕共享功能应运而生。新版本的屏幕共享不在应用插件的形式，大家都知道，在Chrome72版本以前，集成屏幕共享功能必须要集成插件，这无异增加了开发者的难度；国内的网络无法访问谷歌商店，也无法下载插件，从而导致了该功能处处受限，不被大家所采用。新版本无需插件，只需简单调用几句代码即可拥有屏幕共享功能，屏幕共享还能选择打开关闭屏幕声音，如果屏幕共享了带声音的多媒体，该功能正合适哦，还有anyRTC的屏幕共享默认不采集音频的，如果想屏幕共享的时候输出音频，记得打开该功能。

上述讲了web端的屏幕共享，下面也介绍下Native端的屏幕共享吧，Windows跟MacOS这里就不多介绍了，调用接口即可，简单方便；Android和iOS使用屏幕共享，必须要打开自定义音视频采集模块，外部采集好音视频，往SDK塞音频、视频流即可。具体可前往查看接口文档。

Web端屏幕共享工作原理

Web 端屏幕共享，实际上是通过创建一个屏幕共享的视频轨道对象来实现的。你可以调用 createScreenVideoTrack 方法来创建一个用于屏幕共享的本地视频轨道对象。采集屏幕共享的过程中浏览器会询问需要共享哪些屏幕，根据用户的选择去获取屏幕信息

在 anyrtc Web SDK 中，一个 ArRTCClient 对象同一时间只能发布一个视频轨道。因此如果你想要在发布屏幕共享的同时，还发布本地摄像头视频轨道，则需要创建两个 ArRTCClient 对象，加入同一频道，一路发送屏幕共享轨道，一路发送摄像头视频轨道。

Chrome 屏幕共享

我们以Chrome浏览器为例在 Chrome 上屏幕共享，你可直接调用createScreenVideoTrack。

该功能要求 Chrome 72 或以上版本。如果你使用的软件版本不满足此要求，请使用屏幕共享插件实现在 Chrome 上共享屏幕。

ArRTC.createScreenVideoTrack({
  // 可以在这里配置编码参数，详细参考 API 文档
  encoderConfig: "1080p_1",
}).then(localScreenTrack => {
  /** ... **/
});

分享音频

anyrtc Web SDK 支持在 Windows 平台的 Chrome 浏览器 74 及以上版本同时共享屏幕和本地播放的背景音。你需要在调用 createScreenVideoTrack 方法的withAudio 参数设为 enable。

这样设置后，该方法会返回一个列表，包含屏幕共享的视频轨道对象和本地播放背景音的音频轨道对象。

ArRTC.createScreenVideoTrack({
  encoderConfig: "1080p_1",
}, "auto").then([screenVideoTrack, screenAudioTrack] => {
  /** ... **/
});

注意：

• 使用这个方法后，还需要终端用户在屏幕共享的弹出框上勾选分享音频才能真正生效。
• 如果选择共享单个应用窗口，无法分享音频。

同时共享屏幕和开启视频

因为一个 ArRTCClient 对象只能发送一路视频轨道，所以如果要在一个发送端同时分享屏幕和开启摄像头视频采集，需要创建两个 ArRTCClient，一路发送屏幕共享轨道，一路发送摄像头轨道。

async function startScreenCall() {
  const screenClient = ArRTC.createClient({ mode: "rtc", codec: "vp8" });
  await screenClient.join("<TOKEN>", "<CHANNEL>");

  const screenTrack = await ArRTC.createScreenVideoTrack();
  await screenClient.publish(screenTrack);

  return screenClient;
}

async function startVideoCall() {
  const videoClient = ArRTC.createClient({ mode: "rtc", codec: "vp8" });
  await videoClient.join("<TOKEN>", "<CHANNEL>");

  const videoTrack = await ArRTC.createCameraVideoTrack();
  await videoClient.publish(videoTrack);

  return videoClient;
}

Promise.all([startScreenCall(), startVideoCall()]).then(() => { /** ... **/ });

自己订阅自己，会产生额外的计费，如图：

开发注意事项

• 一个 ArRTCClient 对象只能发送一路视频轨道
• 负责发布屏幕共享的用户的 UID 不要固定在同一个值，否则某些场景下同 UID 的共享流可能会引起互踢。
• 在屏幕共享的时候，本地流的 Client 不要订阅本地的屏幕共享流，否则会增加计费。
• 在 Windows 平台上进行屏幕共享时，如果共享的是 QQ 聊天窗口会导致黑屏。

更多好玩的用法

• 视频大小流，一个客户端发布两路视频流，一个大流，一个小流，其他客户端可根据自身网络情况拉去大小流。
• 流回退，客户端打开流回退功能后，SDK自动检测当前网络的上下行，根据丢包率以及网络延迟等一些因素，自动把拉去的流变为小流，如果小流还不能满足当前的网络状况，会自动切换音频拉流，保证音频通信优先。
• 自定义音视频流，当本地摄像头不能满足当前需求的时候，可以把采集的音视频流往SDK里面塞，SDK负责自定义音视频流的传输。
• 平滑上下麦，上麦时间维持在200ms,点击上麦即刻能进行音视频通信，广泛应用于直播连麦、语音开黑等场景。
• 混音，播放在线或者本地音乐，跟谁本地声音一起发到远端。
• 人脸识别，向本地用户报告检测出的一系列结果，包括人脸距设备屏幕的距离。该功能可用于提醒用户注意用眼卫生，和屏幕保持一定距离。

还有未挖掘的玩法，等待你们的需求哦，只要需求合理，我们就能为您实现~

anyRTC创业扶持计划

• 30万免费分钟数，助力初创企业快速发展。

anyRTC初创企业扶持计划，只要通过企业审核，联系客服加入anyRTC创业扶持计划，即可享受30万免费分钟数。获得分钟数可降低在实时音视频技术服务所产生的成本费用，零成本快速启动项目。

• 专属技术指导支持

anyRTC为初创企业提供一对一专属客服，为客户提供专业、认真的服务，及时解答您的疑惑。并为客户提供专属技术指导，更快上手，轻松上线！

联系我们

联系电话：[phone]

QQ咨询群：580477436

ARCall技术交流群：597181019

咨询邮箱：[e-mail]

技术问题：开发者论坛

获取更多帮助前往：www.anyrtc.io