跳到主要内容

主播端

获取本地媒体资源​

您可以使用以下方法从本地摄像头、麦克风设备捕获默认音频 track、视频 track 资源。调用以下获取资源的 API，SDK 内部会把浏览器原生 API 获取的 mediaStream 对象转换为 RCLocalTrack 实例对象，用于后续集成。

提示

如果从指定设备获取音视频数据，通过 @rongcloud/plugin-rtc 的 device 模块获取设备 ID。详见设备管理文档。如果需要从本地文件、网络文件、或浏览器原生的 mediaStream 对象获取屏幕共享资源、获取自定义资源，请参考发布自定义视频流文档。

同时捕获音视频流​

使用初始化时获取的 RCRTCClient 实例的 createMicrophoneAndCameraTracks 方法可同时捕获音视频流。

接口​

typescript
rtcClient.createMicrophoneAndCameraTracks(tag: string = 'RongCloudRTC', options?: { audio?: IMicphoneAudioProfile, video?: ICameraVideoProfile })

参数说明​

参数类型必填说明
tagstring否资源标识，默认为 RongCloudRTC
options.audioIMicphoneAudioProfile否音频配置参数
options.videoICameraVideoProfile否视频参数配置

示例代码​

typescript
/**
 * @description tracks 是一个数组，当 `code !== RCRTCCode.SUCCESS` 时，tracks 长度为 0
 * @param tag 资源标识，不传时默认为 RongCloudRTC，代表浏览器摄像头、麦克风资源，
 * 也可传入其他包含 A-Z、a-z、0-9、+、=、- 的字符串
 * @param options 音视频配置项，可参考上述 1、2 中的介绍
*/
const { code, tracks } = await rtcClient.createMicrophoneAndCameraTracks(tag: string = 'RongCloudRTC', options?: { audio?: IMicphoneAudioProfile, video?: ICameraVideoProfile })

if (code === RCRTCCode.SUCCESS) {
    // tracks 包含一个 RCMicphoneAudioTrack 实例和一个 RCCameraVideoTrack 实例
    const [ audioTrack, videoTrack ] = tracks
}

捕获音频流​

使用初始化时获取的 RCRTCClient 实例的 createMicrophoneAudioTrack 由麦克风捕获音频流：

typescript
rtcClient.createMicrophoneAudioTrack(tag: string = 'RongCloudRTC', options?: IMicphoneAudioProfile)

参数说明​

参数类型必填说明
tagstring否资源标识，默认为 RongCloudRTC
optionsIMicphoneAudioProfile否音频配置参数

示例代码​

typescript
/**
 * @description 仅当 `code === RCRTCCode.SUCCESS` 时 audioTrack 有值,
 * audioTrack 为 RCMicphoneAudioTrack 类型实例
 * @param tag 资源标识，不传时默认为 RongCloudRTC，代表浏览器麦克风资源，
 * 也可传入其他包含 A-Z、a-z、0-9、+、=、- 的字符串
 * @param IMicphoneAudioProfile 音频配置项，可选参数
 * @param IMicphoneAudioProfile.micphoneId 指定麦克风设备 ID
 * @param IMicphoneAudioProfile.sampleRate 指定音频采样率
*/
const { code, track: audioTrack } = await rtcClient.createMicrophoneAudioTrack(tag: string = 'RongCloudRTC', options?: IMicphoneAudioProfile)

捕获视频流​

使用初始化时获取的 RCRTCClient 实例的 createCameraVideoTrack 方法由摄像头捕获视频流。如需设置视频帧率、分辨率，可参考「视频管理」下的文档。

接口​

typescript
rtcClient.createCameraVideoTrack(tag: string = 'RongCloudRTC', options?: ICameraVideoProfile)

参数说明​

参数类型必填说明
tagstring否资源标识，默认为 RongCloudRTC
optionsICameraVideoProfile否视频参数配置

示例代码​

typescript
/**
 * @description 仅当 `code === RCRTCCode.SUCCESS` 时 videoTrack 有值
 * videoTrack 为 RCCameraVideoTrack 类型实例
 * @param tag 资源标识，不传时默认为 RongCloudRTC，代表浏览器摄像头资源，
 * 也可传入其他包含 A-Z、a-z、0-9、+、=、- 的字符串
 * @param ICameraVideoProfile 视频配置项，可选参数
 * @param ICameraVideoProfile.cameraId 指定摄像头设备 ID
 * @param ICameraVideoProfile.frameRate 指定视频帧率，默认为 RCFrameRate.FPS_15
 * @param ICameraVideoProfile.resolution 指定视频分辨率，默认为 RCResolution.W640_H480
*/
const { code, track: videoTrack } = await rtcClient.createCameraVideoTrack(tag: string = 'RongCloudRTC', options?: ICameraVideoProfile)

播放本地音视频资源​

本地预览时，请使用 RCTrack 下的 play 方法在本端播放采集的数据。

提示

不要在本端播放本端采集的音频流，否则可能会引起回声问题。

接口​

typescript
Track.play(element, options)

参数说明​

参数类型必填说明
elementHTMLElement否用于承载媒体流的元素标签，音频流可传空
options{ volume?: number; audioDeviceId?: string }否配置参数，volume：播放音频资源的音量，audioDeviceId：指定播放音频的音频设备 ID

示例代码​

typescript
// 通过 videoTrack.play 方法将 <video> 标签传递给 videoTrack 实例
videoTrack.play(videoNode)
// 尽量不要在本端播放本端采集的音频流，因为可能会引起回声问题
audioTrack.play()

发布资源​

在直播模式下，使用 RCRTCClient 实例的方法 joinLivingRoom 加入 RTC 直播房间。加入房间成功后，会返回 RCLivingRoom 房间实例、房间内其他用户 ID，以及房间内已发布的资源。

使用 RCLivingRoom 房间实例的 publish 方法发布一个或多个音视频轨道 RCLocalTrack 数据。

接口​

typescript
room.publish(tracks)

参数说明​

参数类型必填说明
tracksRCLocalTrack[] 或者 IPublishAttrs[]是音视频资源

示例代码​

typescript
const { code } = await room.publish([audioTrack, videoTrack])

// 若资源发布失败
if (code !== RCRTCCode.SUCCESS) {
  console.log('资源发布失败:', code)
}

publish 方法的输入参数 tracks 接收 RCLocalTrack 或者 IPublishAttrs 数组。如果需要同时发布视频大小流，请使用 IPublishAttrs 数组，并在其中设置需要发布小流的视频轨道。

示例代码​

typescript
const { code } = await room.publish([
  {
    track: videoTrack,
    pubTiny: true // pubTiny 用于指定同时发布视频数据的同时，额外发布一个小流数据
  }
])

取消发布​

使用 [RCRTCRoom] 房间实例的 unpublish 方法取消发布资源。

接口​

typescript
room.unpublish(tracks)

参数说明​

参数类型必填说明
tracksRCLocalTrack[]是要取消发布的资源

示例代码​

typescript
const { code } = await room.unpublish([audioTrack, videoTrack])

if (code !== RCRTCCode.SUCCESS) {
  console.log('取消发布失败:', code)
}

// 取消发布后，业务层若不再需要播放资源，可调 destroy 方法销毁资源
// audioTrack.destroy()
// videoTrack.destroy()

订阅资源​

  1. 由房间注册的事件监听器中，监听到 onTrackPublish 事件被触发时，即可按需订阅对方所发布的资源。

    API 参考：registerRoomEventListener

    typescript
    // 注册房间事件监听器，重复注册时，仅最后一次注册有效
    room.registerRoomEventListener({
      /**
       * 房间内用户发布资源
       * @param tracks 新发布的音轨与视轨数据列表，包含新发布的 RCRemoteAudioTrack 与 RCRemoteVideoTrack 实例
       */
      async onTrackPublish (tracks: RCRemoteTrack[]) {
        // 按业务需求选择需要订阅资源，通过 room.subscribe 接口进行订阅
        const { code } = await room.subscribe(tracks)

        if (code !== RCRTCCode.SUCCESS) {
          console.log('资源订阅失败 ->', code)
        }
      },
      /**
       * 订阅的音视频流通道已建立，track 已可以进行播放
       * @param track RCRemoteTrack 类实例
       */
      onTrackReady (track: RCRemoteTrack) {
        // 订阅的音视频轨道已连接，可以根据业务需求选择性播放
        if (track.isAudioTrack()) {
          // 音频播放无需传递组件
          track.play()
        } else {
          // 此处的 videoNode 为 <video> 标签元素实例
          track.play(videoNode)
        }
      }
    })

  2. 调用 [subscribe] 方法订阅音视轨资源。

    视频轨道支持大小流机制：

    • 若远端用户已发布大小流，可通过 subTiny 参数选择订阅小流以节省下行带宽；
    • 若对方未发布小流，即使设置 subTiny: true，依然会接收大流。

    接口​

    typescript
    room.subscribe(tracks)

    参数说明​

    参数类型必填说明
    tracksRCLocalTrack[] 或者 IPublishAttrs[]是音视频资源

    示例代码​

    typescript
    const { code } = await room.subscribe([
        // 音频不支持大小流
        audioTrack,
        {
        track: videoTrack,
        subTiny: true // 订阅小流
        }
    ])

取消订阅​

调用 unsubscribe 方法取消订阅已订阅的音视频轨道。

接口​

typescript
room.unsubscribe(tracks)

参数说明​

参数类型必填说明
tracksRCRemoteTrack[]是远端音视频资源。

示例代码​

typescript
const { code } = await room.unsubscribe([audioTrack, videoTrack])

// 取消订阅完成后，业务层移除相关的 UI 信息即可
最后于 更新