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

如何解决 Web 平台屏幕共享的质量问题?

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

平台 / 框架:Web

更新时间:2021-09-09 19:57


当在 Web 平台使用屏幕共享推流时,出现了共享画面模糊或者卡顿的情况,您可以参考如下操作步骤进行处理。

  1. 建议使用最新版本的 Chrome 浏览器。

  2. 在推流 startPublishingStream 时设置视频编码 videoCodec 为 “VP8”。

拉流端要拉 “VP8” 或转码。

// localStream 为创建流获取的 MediaStream 对象
zg.startPublishingStream(streamID, localStream, { videoCodec: 'VP8' })
  1. 确认您共享的是否为应用窗口。
    • 如果是,建议改为共享整个屏幕或者共享浏览器标签页。
      /Pics/Web/ExpressSDK/Common/Screen_Sharing_Web.png
  2. 调用 createStream 接口创建屏幕共享流时,您可以根据对画质的要求(清晰度、流畅度),通过 screen 对象下的 “videoQuality” 参数设置屏幕共享视频质量(分辨率、帧率和码率)。
    • 如果不是,检查您在 createStream 接口中设置的屏幕编码配置是否正常,即执行“步骤 4”。

该参数的取值及含义如下:

取值 分辨率 帧率(fps) 码率(kbps) 应用场景
1
实际共享分辨率宽 × 实际共享分辨率高
20
800
“1” 为预设值,帧率较大,适用于对视频流畅度要求较高的场景。
2
实际共享分辨率宽 × 实际共享分辨率高
15
1500
“2” 为预设值,适用于在视频流畅度和清晰度之间取得平衡的场景。
3
实际共享分辨率宽 × 实际共享分辨率高
5
2000
“3” 为预设值,码率较大,适用于对视频清晰度要求较高的场景。
4
width × height
frameRate
bitrate
“4” 为自定义取值,适用于开发者想根据自己需要设置共享区域、帧率、码率的场景。
const screenStream = await zg.createStream({
    screen: {
        videoQuality: 2,
    },
});

详细的功能介绍和实现流程请参考 视频进阶 - 屏幕共享

本篇目录
下载 PDF