产品 / 解决方案
平台 / 框架

如何切换屏幕共享流和摄像头视频流?

产品 / 插件:实时音视频 / 低延迟直播

平台 / 框架:Web

更新时间:2023-10-25 14:18


在使用 ZEGO Express Web SDK 实现屏幕共享的场景中,开发者可参考本文,在推送的屏幕共享流和摄像头采集的视频流之间进行切换。

ZEGO 推荐以下三个方法,皆以从屏幕共享流切换到摄像头视频流为例。

  1. 创建两路流
  2. 销毁当前流再创建流推送
  3. 替换当前视频轨道

屏幕共享流和摄像头采集的视频流互相切换的方法是一样的。

1 创建两路流

如果开发者的实际应用场景允许同时创建两路流并推送两路流,ZEGO 推荐使用此方法:

  1. 推流端创建两个 MediaStream 或者 ZegoLocalStream 实例对象,对应两路流——— 屏幕共享流摄像头视频流。创建流的具体实现方法请参考 createStream 或者 createZegoStream 接口。

    createStream 接口在 Express Web SDK 3.0.0 之前版本支持,3.0.0 及以上版本废弃,并使用 createZegoStream 替代,详情请参考 3.0.0 及以上版本升级指南

  2. 需要从屏幕共享流切换到摄像头视频流时,根据摄像头视频流的流 ID,拉流端选择拉摄像头视频流即可成功切换。

2 销毁当前流再创建流推送

  1. 调用 stopPubliushStream 取消推流,再调用 destroyStream 接口销毁当前屏幕共享流。

  2. 调用 createStream 或者 createZegoStream 创建摄像头视频流。

  3. 调用 startPublishingStream 接口推送摄像头视频流。

此方法的兼容性和稳定性较好,但是无法动态切换,并且切换时间较长(一到两秒左右)。

3 替换当前视频轨道

3.0.0 及以上版本

  1. 通过调用 createZegoStream 接口,创建一个 ZegoLocalStream 实例对象 localStream,默认采集摄像头麦克风流。

    调用 startPublishingStream 接口,传入 “streamID” 和创建流得到的流对象 “localStream”,向远端用户发送本端的音视频流。

    try {
        const localStream = await zg.createZegoStream()
        zg.startPublishingStream(streamID, localStream)
    } catch (err) {
        console.error(err)
    }
  2. 推流成功后,需要将推流中的 摄像头视频 替换为 共享屏幕视频,可以通过调用 startCaptureScreen 接口,采集屏幕共享,再调用 updatePublishingStream 接口,更新推流中的视频。

    try {
        await localStream.startCaptureScreen()
        zg.updatePublishingStream(localStream, 0)
    } catch (err) {
        console.error(err)
    }

3.0.0 版本前

调用 replaceTrack 接口将音视频流中的视频轨道替换为摄像头视频流。

如果是从摄像头视频流切换成屏幕共享流,替换为屏幕共享流后,编码帧率会下降为 5 fps。

此方法可以实现动态切换,并且切换速度快,但是 replaceTrack 接口限制较多:

  • 仅支持 Chrome 65+,Safari 以及最新版 Firefox 浏览器。
  • 部分移动设备上可能不生效。
  • 使用前需先通过 createStream 创建屏幕共享流和摄像头视频流。

相关参考

本篇目录
下载 PDF