Tutorial: 开启大小流传输

开启大小流传输

使用前提

如需使用大小流功能,需要将 SDK 升级至 4.11.0 版本。

前提条件

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

const result = TRTC.isSmallStreamSupported()
if (!result) {
  alert('You browser does not support opening small streams.')
}

实现步骤

Step 1:开启大小流

发布之前,在发布视频的客户端调用 enableSmallStream 方法开启双流模式。

开启双流模式后,SDK 会根据视频大流参数默认设置对应的视频小流参数,详见大小流对应关系表。

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

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

开启小流前判断远端流是否有小流,可以调用 client.getRemoteMutedState 方法,判断远端流的 hasSmall 状态是否为 true

// 成功订阅某路视频之后
await client.subscribe(remoteStream, { audio: true, video: true });
const state = client.getRemoteMutedState().filter((item) => item.userId === remoteStream.getUserId());
if (!state.hasSmall) {
   console.log('远端流没有开启小流');
   return;
}
// 观看端主动将订阅的视频流设置为小流
client.setRemoteVideoStreamType(remoteStream, 'small');

API说明

音视频通话客户端对象 Client 通过 createClient() 创建,代表一次音视频会话。Client 客户端对象提供 TRTC Web SDK 的核心功能。

TRTC.isSmallStreamSupported()

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

注意:

  • iOS 和微信环境下不支持开启大小流。
const result = TRTC.isSmallStreamSupported()
if (!result) {
  alert('You browser does not support opening small streams.')	
}

Client.enableSmallStream()

功能: 在发送视频端开启大小流传输模式。双流为视频大流和视频小流,其中视频大流指高分辨率、高码率的视频流,视频小流指低分辨率、低码率的视频流。

使用方式: 必须在发布之前进行设置,原因是为了避免在发布后进行设置导致大小流表现不一致。

注意:

  • 不要在开启大小流模式时对 track 进行操作(包括 addTrack / removeTrack / replaceTrack),否则会导致大流和小流的表现不一致。
// 在 publish 之前开启
await client.enableSmallStream();
// 本地流初始化成功
await localStream.initialize();
// 发布本地流
await client.publish(localStream);

Client.disableSmallStream()

功能: 关闭大小流传输。

使用方式: 必须在发布前或者结束发布之后进行操作,原因是为了避免在发布后进行设置导致大小流表现不一致。

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

Client.setSmallStreamProfile(params)

功能: 设置小流的参数。

使用方式: 必须在发布前或者结束发布之后进行操作,原因是为了避免在发布后进行设置导致大小流表现不一致。

如果不调用该方法,SDK 会使用默认的小流视频属性:分辨率(宽 × 高)160 × 120,码率 100 Kbps,帧率 15 fps。

视频小流和视频大流的宽高比会自动保持一致。如果为小流设置的分辨率宽高比和大流不同,SDK 会自动调整小流分辨率的高,以保持大小流的宽高比相同。

注意:

  • enableSmallStreamsetSmallStreamProfile 两个方法在 publish 之前调用,调用顺序不影响其功能。

Params:

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');

常见问题

  1. enableSmallStreamsetSmallStreamProfile 两个方法在 publish 之前调用,调用顺序不影响其功能。

  2. 观看端需要在订阅远端流成功后,调用 setRemoteVideoStreamType

    • stream-subscribed 回调里,立刻将远端大流切换成小流。
    • 订阅大流一段时间之后,调用 setRemoteVideoStreamType 切换成小流。
    • 订阅小流一段时间之后,调用 setRemoteVideoStreamType 切换成大流。
  3. 只有推流端开启了小流,观看端将播放的远端流切换成小流才会生效。

  4. 切换大小流成功目前没有事件通知。