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

2021-09-09

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

说明

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

// localStream 为创建流获取的 MediaStream 对象
zg.startPublishingStream(streamID, localStream, { videoCodec: 'VP8' })

// localStream 为创建流获取的 MediaStream 对象
zg.startPublishingStream(streamID, localStream, { videoCodec: 'VP8' })

确认您共享的是否为应用窗口。
- 如果是，建议改为共享整个屏幕或者共享浏览器标签页。
调用 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,
    },
});

const screenStream = await zg.createStream({
    screen: {
        videoQuality: 2,
    },
});

说明

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