开启大小流传输

使用前提

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

前提条件

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

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

实现步骤

Step 1：开启大小流

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

开启双流模式后，您可以调用 setSmallStreamProfile 方法设置小流的参数，小流的宽高比设置时要与大流的宽高比保持一致。

// 在 publish 之前开启
await client.enableSmallStream();
// 如果您的大流画面是 16 : 9，则小流也设置成 16 : 9 
client.setSmallStreamProfile({
  width: 160,
  height: 90,
  bitrate: 100,
  frameRate: 15
});
// 本地流初始化成功
await localStream.initialize();
// 发布本地流
await client.publish(localStream);

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

Before v4.12.5

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

// 成功订阅某路视频之后
await client.subscribe(remoteStream, { audio: true, video: true });

如果您想将远端流切换成小流，您需要在切换小流之前判断远端流是否有小流

const state = client.getRemoteMutedState()
  .filter((item) => item.userId === remoteStream.getUserId())[0];
if (!(state && state.hasSmall)) {
  console.log('远端流没有开启小流');
  return;
}
// 观看端主动将订阅的视频流设置为小流
client.setRemoteVideoStreamType(remoteStream, 'small');

v4.12.5+

观看端主动将订阅的视频流设置为小流，不需要判断远端流是否推有小流。当远端流有小流时，SDK 将自动订阅小流。

await client.setRemoteVideoStreamType(remoteStream, 'small');
await client.subscribe(remoteStream, { audio: true, video: true });

API说明

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

TRTC.isSmallStreamSupported()

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

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

Client.enableSmallStream()

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

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

// 在 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 会自动调整小流分辨率的宽高，以保持大流和小流的宽高比相同。

注意：

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

Params:

// 如果您大流的宽高比是 4 : 3，您需要把小流的参数设置成 4 : 3
client.setSmallStreamProfile({
  width: 160,
  height: 120,
  bitrate: 100,
  frameRate: 15
});
// 如果您大流的宽高比是 16 : 9，您需要把小流的参数设置成 16 : 9
client.setSmallStreamProfile({
  width: 160,
  height: 90,
  bitrate: 100,
  frameRate: 15
});

Client.setRemoteVideoStreamType(remoteStream, type)

需要在订阅远端流成功之后调用。

接收端选择手动订阅大流还是小流，默认为大流。

• big 手动切换为大流。
• small 为手动切换成小流。

client.setRemoteVideoStreamType(remoteStream, 'small');

常见问题

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

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

   • 在 stream-subscribed 回调里，立刻将远端大流切换成小流。
   • 订阅大流一段时间之后，调用 setRemoteVideoStreamType 切换成小流。
   • 订阅小流一段时间之后，调用 setRemoteVideoStreamType 切换成大流。

3. 只有推流端开启了小流，观看端将播放的远端流切换成小流才会生效。

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