开启大小流

编辑文档更新于 2024-11-11 06:14:32

本文主要介绍在 Web 中开启大小流传输的功能。如需使用大小流功能,需要将 SDK 升级至 1.0.17 版本。

前提条件

检测当前环境是否支持大小流

const result = BRTC.isSmallStreamSupported()
if (!result) {
  alert("当前浏览器不支持大小流。")
}

实现步骤

Step 1:开启大小流

发布之前,在发布视频的客户端调用 enableSmallStream 方法开启双流模式
开启双流模式后, SDK 会根据视频大流参数默认设置对应的视频小流参数,详见大小流对应关系表

// 在 publish 之前开启
await client.enableSmallStream();
// 本地流初始化成功
await localStream.init();
// 发布本地流
await client.publish(localStream);

Step 2:观看端将远端流切换为小流

默认订阅远端的大流，如果需要订阅小流

// 观看端主动将订阅的视频流设置为小流
client.setRemoteVideoStreamType(remoteStream, 'small');

API说明

BRTC.isSmallStreamSupported()

用于检测当前浏览器当前使用环境是否支持开启大小流的功能
返回值为 Boolean 类型, true 为支持, false 为不支持

iOS 和微信环境下不支持开启大小流

const result = BRTC.isSmallStreamSupported()
if (!result) {
  alert('当前浏览器不支持大小流。')    
}
`

Client.enableSmallStream()

在发送视频端开启大小流传输模式
双流为视频大流和视频小流,其中视频大流指高分辨率、高码率的视频流,视频小流指低分辨率、低码率的视频流
为了避免在发布后进行设置导致大小流表现不一致,必须在发布之前进行设置

开启大小流模式后, publish 之前可以对 track 进行操作(包括 addTrack / removeTrack / replaceTrack), publish 之后不可以对 track 进行操作,否则会导致大流和小流的表现不一致

// 在 publish 之前开启
await client.enableSmallStream();
// 本地流初始化成功
await localStream.init();
// Good: 发布前可以对 track 进行操作
await localStream.replaceTrack(newVideoTrack);
// 发布本地流
await client.publish(localStream);
// Bad: 发布后不可以对 track 进行操作
// await localStream.replaceTrack(newVideoTrack);

Client.disableSmallStream()

关闭大小流传输
为了避免在发布后进行设置导致大小流表现不一致,必须在发布前或者结束发布之后进行操作

await client.unpublish(remoteStream);
// 必须在发布前或者结束发布之后调用
await client.disableSmallStream();

Client.setSmallStreamProfile(params)

设置小流的参数
为了避免在发布后进行设置导致大小流表现不一致,必须在发布前或者结束发布之后进行操作
如果不调用该方法, SDK 会使用默认的小流视频属性: 分辨率（宽 × 高）160 × 120, 码率 100 Kbps, 帧率 15 fps
视频小流和视频大流的宽高比会自动保持一致
如果为小流设置的分辨率宽高比和大流不同, SDK 会自动调整小流分辨率的高,以保持大小流的宽高比相同

enableSmallStream 和 setSmallStreamProfile 两个方法在 publish 之前调用,调用顺序不影响其功能

Name	Type	Description
width	number	小流视频的宽
height	number	小流视频的高
bitrate	number	小流视频的码率
frameRate	number	小流视频的帧率

client.setSmallStreamProfile({
  width: 160,
  height: 120,
  bitrate: 100,
  frameRate: 15 
});

Client.setRemoteVideoStreamType(remoteStream, type)

需要在订阅远端流成功之后调用
接收端选择手动订阅大流还是小流,默认为大流
big 手动切换为大流
small 为手动切换成小流

Name	Type	Description
stream	stream	远端视频流对象
type	string	`big` 手动切换为大流 `small` 为手动切换成小流

client.setRemoteVideoStreamType(remoteStream, 'small');

常见问题

enableSmallStream 和 setSmallStreamProfile 两个方法在 publish 之前调用,调用顺序不影响其功能
观看端需要在订阅远端流成功后,调用 setRemoteVideoStreamType:
- 在 stream-subscribed 回调里,立刻将远端大流切换成小流
- 订阅大流一段时间之后,调用 setRemoteVideoStreamType 切换成小流
- 订阅小流一段时间之后,调用 setRemoteVideoStreamType 切换成大流
只有推流端开启了小流，观看端将播放的远端流切换成小流才会生效
切换大小流成功目前没有事件通知