在视频通话或直播场景中,如果多个用户同时发流,由于设备性能消耗和网络流量的上升,可能带来比较大的体验下降。
本文介绍如何使用声网 Web SDK 实现多人视频通话或直播以及相关的集成注意事项。通过合理的集成方式,声网可以支持多达 17 人同时发流。
开始前,请确保你已参考《快速开始》文档在你的项目中实现基本的音视频通话或直播功能。
参考如下步骤,在你的项目中实现多人视频场景:
发流端在发布本地音视频轨道之前,调用 enableDualStream 开启双流模式。开启双流模式后,SDK 会在发送视频流的同时,额外发送一路分辨率低、码率低的视频流。其中,原视频流称为大流,分辨率和码率更低的那路流则称为小流。
大流的视频属性(Video Profile)理论上可以设置为所有 SDK 支持的视频属性,但声网建议使用不超过分辨率 640 x 480,帧率 15 fps 的视频属性。
小流的视频属性默认固定为分辨率 160 × 120,帧率 15 fps,码率 50 Kbps。如果你不想要使用默认的小流视频属性,可以调 setLowStreamParameter 自定义小流的视频参数,防止因小流码率过高而造成带宽压力。
setLowStreamParameter
设置的视频参数不一定都会生效。目前发现的未能充分适配的浏览器有 Firefox 浏览器,对其设置帧率不生效,浏览器本身会把帧率固定在 30 fps。接收端调用 setRemoteVideoStreamType 订阅某一用户的视频大流,订阅其它用户的视频小流。声网建议你在界面布局里采用一大多小的窗口布局:大窗口显示大流的画面,小窗口显示小流的画面。
完成上述设置后,调用 publish
方法发布本地流,调用 subscribe
方法订阅远端流。
// 自定义设置小流视频参数。设置 Video Profile 为 160 × 120, 15 fps, 120 Kbps。
client.setLowStreamParameter({
width: 160,
height: 120,
framerate: 15,
bitrate: 120,
});
// 开启双流模式。
client.enableDualStream().then(() => {
console.log("enable dual stream success");
}).catch(err => {
console.log(err);
});
// 选择订阅某个用户的大流或小流。
client.setRemoteVideoStreamType(user, streamType)