跳到主要内容

标准低延迟直播流程

在开始之前，请您再次确认您已经完成了开通音视频服务、导入 SDK 以及初始化。

提示

多人之间想要发起音视频通话，需要加入同一个音视频房间。对于直播需求来讲，资源类型需选择 AudioVideo 或 Audio ，即音视频直播间或纯音频直播间。加入房间的角色也分为主播 LiveBroadcaster 和观众 LiveAudience ，下面就这两种身份，分别进行说明。

主播端​

用户加入房间的角色为主播 LiveBroadcaster。

步骤 1.1：设置监听​

设置本地事件监听​

设置加入房间事件回调​
方法​
JavaScript
engine.setOnRoomJoinedListener();
回调参数​
参数类型说明
codeNumber错误码，0 表示成功
messageString错误信息
示例代码​
JavaScript
engine.setOnRoomJoinedListener(({code, message}) => {
  if (code === 0) {
    // 加入房间成功
    console.log('加入房间成功');
  } else {
    // 加入房间失败
    console.log('加入房间失败:', message);
  }
});
设置发布资源事件回调​
方法​
JavaScript
engine.setOnPublishedListener();
回调参数​
参数类型说明
typeRCRTCMediaType发布资源的类型
codeNumber错误码，0 表示成功
messageString错误信息
示例代码​
JavaScript
engine.setOnPublishedListener(({type, code, message}) => {
  // type 发布资源的类型 RCRTCMediaType
  if (code === 0) {
    // 发布成功
    console.log('发布成功，类型:', type);
  } else {
    // 发布失败
    console.log('发布失败:', message);
  }
});
设置取消发布资源事件回调​
方法​
JavaScript
engine.setOnUnpublishedListener();
回调参数​
参数类型说明
typeRCRTCMediaType取消发布资源的类型
codeNumber错误码，0 表示成功
messageString错误信息
示例代码​
JavaScript
engine.setOnUnpublishedListener(({type, code, message}) => {
  // type 取消发布资源的类型 RCRTCMediaType
  if (code === 0) {
    // 取消发布成功
    console.log('取消发布成功，类型:', type);
  } else {
    // 取消发布失败
    console.log('取消发布失败:', message);
  }
});
设置订阅资源事件回调​
方法​
JavaScript
engine.setOnSubscribedListener();
回调参数​
参数类型说明
userIdString远端用户 ID
typeRCRTCMediaType订阅资源的类型
codeNumber错误码，0 表示成功
messageString错误信息
示例代码​
JavaScript
engine.setOnSubscribedListener(({userId, type, code, message}) => {
  // userId 远端用户 ID
  // type 订阅资源的类型 RCRTCMediaType
  if (code === 0) {
    // 订阅成功
    console.log('订阅成功，用户:', userId, '类型:', type);
  } else {
    // 订阅失败
    console.log('订阅失败:', message);
  }
});
设置取消订阅资源事件回调​
方法​
JavaScript
engine.setOnUnsubscribedListener();
回调参数​
参数类型说明
userIdString远端用户 ID
typeRCRTCMediaType取消订阅资源的类型
codeNumber错误码，0 表示成功
messageString错误信息
示例代码​
JavaScript
engine.setOnUnsubscribedListener(({userId, type, code, message}) => {
  // userId 远端用户 ID
  // type 取消订阅资源的类型 RCRTCMediaType
  if (code === 0) {
    // 取消订阅成功
    console.log('取消订阅成功，用户:', userId, '类型:', type);
  } else {
    // 取消订阅失败
    console.log('取消订阅失败:', message);
  }
});

设置远端事件监听​

设置远端用户加入房间事件回调​
方法​
JavaScript
engine.setOnUserJoinedListener();
回调参数​
参数类型说明
userIdString远端用户 ID
roomIdString房间 ID
示例代码​
JavaScript
engine.setOnUserJoinedListener(({userId, roomId}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  console.log('远端用户加入房间:', userId, '房间:', roomId);
});
设置远端用户离开房间事件回调​
方法​
JavaScript
engine.setOnUserLeftListener();
回调参数​
参数类型说明
userIdString远端用户 ID
roomIdString房间 ID
示例代码​
JavaScript
engine.setOnUserLeftListener(({userId, roomId}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  console.log('远端用户离开房间:', userId, '房间:', roomId);
});
设置远端用户发布资源回调​
方法​
JavaScript
engine.setOnRemotePublishedListener();
回调参数​
参数类型说明
userIdString远端用户 ID
roomIdString房间 ID
typeRCRTCMediaType远端用户发布的资源类型
示例代码​
JavaScript
engine.setOnRemotePublishedListener(({userId, roomId, type}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  // type 远端用户发布的资源类型 RCRTCMediaType
  console.log('远端用户发布资源:', userId, '类型:', type);
});
设置远端用户取消发布资源回调​
方法​
JavaScript
engine.setOnRemoteUnpublishedListener();
回调参数​
参数类型说明
userIdString远端用户 ID
roomIdString房间 ID
typeRCRTCMediaType远端用户取消发布的资源类型
示例代码​
JavaScript
engine.setOnRemoteUnpublishedListener(({userId, roomId, type}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  // type 远端用户发布的资源类型 RCRTCMediaType
  console.log('远端用户取消发布资源:', userId, '类型:', type);
});

步骤 1.2：加入房间​

  1. 构建 RCRTCRoomSetup，指定主播身份和房间类型。

    JavaScript
    let roomSetup = {
      // 根据实际场景，选择音视频直播：AudioVideo 或纯音频直播：Audio
      type: RCRTCMediaType.AudioVideo,
      role: RCRTCRole.LiveBroadcaster
    };

  2. 调用 RCRTCEngine 下的 joinRoom 方法创建并加入一个直播房间。

    JavaScript
    engine.joinRoom('直播间 ID', roomSetup);
提示

客户端通过 joinRoom 传入的"直播间 ID" 来加入不同房间。房间不需要客户端创建或销毁，融云服务若发现该房间不存在时会自动创建，当没有任何主播时（只有观众不算），过一段时间也会自动销毁该房间。

步骤 1.3：发布音视频资源​

发布音视频资源​

加入房间后，调用 enableCamera 接口开始摄像头采集，调用 publish 接口发布音视频资源。

方法​
JavaScript
engine.enableCamera();
engine.publish();
参数说明​
参数类型必填说明
enabledBoolean是是否启用摄像头
typeRCRTCMediaType是发布资源的类型
示例代码​
JavaScript
/// 开启摄像头
engine.enableCamera(true);

/// 发布音视频资源
engine.publish(RCRTCMediaType.AudioVideo);

设置显示视频的组件​

设置用于显示视频的 RCRTCView，调用 RCRTCEngine 下的 setLocalView 方法设置本地视频的显示 View。

警告

RCRTCView 内部包装的是原生提供的组件， 所以 RCRTCView 只能在 nvue 页面中使用。

导入预览窗口组件​
JavaScript
// 导入 RCRTCView
import RCRTCView from '@/uni_modules/RongCloud-RTCWrapper/components/RCRTCView';

// 声明 RCRTCView
export default {
  components: {
    RCRTCView,
  },
}
添加预览窗口​
xml
<!-- 增加 RCRTCView 组件, fitType: 视频填充模式, mirror: 视频是否镜像显示 -->
<RCRTCView class="localView" ref="localView" :fitType="fitType" :mirror="mirror">
</RCRTCView>
JavaScript
// 导入 RCRTCViewFitType
import { RCRTCViewFitType } from '@/uni_modules/RongCloud-RTCWrapper/lib/RCRTCDefines';

export default {
  data() {
    return {
      // 其他业务代码 ......

      // 自适应显示
      fitType: RCRTCViewFitType.Center,
      // 是否镜像显示 true 为镜像
      mirror: true,
    };
  },

  // 其他业务代码 ......
}
设置预览窗口​
方法​
JavaScript
engine.setLocalView();
参数说明​
参数类型必填说明
viewObject是预览窗口组件引用
callbackFunction否设置结果回调
示例代码​
JavaScript
// 设置预览窗口
engine.setLocalView(this.$refs.localView.getNativeViewRef(), (code) => {
  if (code === 0) {
    // 设置成功
    console.log('本地预览窗口设置成功');
  } else {
    // 设置失败
    console.log('本地预览窗口设置失败');
  }
});

步骤 1.4：主播订阅房间内其他主播的资源​

  1. 调用 RCRTCEngine 下的 subscribe 方法订阅房间内其他主播的资源，在主播连麦的场景下会用到该方法。当远端主播发布资源时，会通过 setOnRemotePublishedListener 回调通知，在回调中订阅音视频资源并显示视图。

    方法​
    JavaScript
    engine.subscribe();
    参数说明​
    参数类型必填说明
    userIdString是远端用户 ID
    typeRCRTCMediaType是订阅资源的类型
    示例代码​
    JavaScript
    engine.subscribe(userId, RCRTCMediaType.AudioVideo);

  2. 创建用于显示视频的 RCRTCView，调用 RCRTCEngine 下的 setRemoteView 方法设置远端视频的显示 View。

    方法​
    JavaScript
    engine.setRemoteView();
    参数说明​
    参数类型必填说明
    userIdString是远端用户 ID
    viewObject是预览窗口组件引用
    callbackFunction否设置结果回调
    示例代码​
    JavaScript
    /// 导入组件 和 添加 remoteView 组件，可参考 setLocalView 部分的示例
    /// 设置预览窗口
    engine.setRemoteView(userId, this.$refs.remoteView.getNativeViewRef(), (code) => {
      if (code === 0) {
        // 设置成功
        console.log('远端预览窗口设置成功');
      } else {
        // 设置失败
        console.log('远端预览窗口设置失败');
      }
    });

观众端​

用户加入房间的角色为观众 LiveAudience。

步骤 2.1：设置监听​

调用 setOnRemoteLiveMixPublishedListener 设置合流资源发布监听。

方法​

JavaScript
engine.setOnRemoteLiveMixPublishedListener();

回调参数​

参数类型说明
typeRCRTCMediaType资源类型

示例代码​

JavaScript
engine.setOnRemoteLiveMixPublishedListener(({type}) => {
  // type 资源类型 RCRTCMediaType
  console.log('合流资源发布:', type);
});

调用 setOnRemoteLiveMixUnpublishedListener 设置合流资源取消发布监听。

方法​

JavaScript
engine.setOnRemoteLiveMixUnpublishedListener();

回调参数​

参数类型说明
typeRCRTCMediaType资源类型

示例代码​

JavaScript
engine.setOnRemoteLiveMixUnpublishedListener(({type}) => {
  // type 资源类型 RCRTCMediaType
  console.log('合流资源取消发布:', type);
});

步骤 2.2：加入房间​

  1. 构建 RCRTCRoomSetup，指定观众身份和房间类型。

    JavaScript
    let roomSetup = {
      // 根据实际场景，选择音视频直播：audio_video 或纯音频直播：audio
      type: RCRTCMediaType.AudioVideo,
      role: RCRTCRole.LiveAudience,
    };

  2. 调用 RCRTCEngine 下的 joinRoom 方法创建并加入一个直播房间。

    JavaScript
    engine.joinRoom('直播间 ID', setup);

步骤 2.3：观众观看直播​

  1. 在监听到合流资源发布事件之后，调用 RCRTCEngine 下的 subscribeLiveMix 方法订阅直播。

    方法​

    JavaScript
    engine.subscribeLiveMix();

    参数说明​

    参数类型必填说明
    typeRCRTCMediaType是订阅资源的类型

    示例代码​

    JavaScript
    engine.subscribeLiveMix(RCRTCMediaType.AudioVideo);

  2. 创建用于显示视频的 RCRTCVideoView，调用 RCRTCEngine 下的 setLiveMixView 方法设置房间直播资源的显示 View。

    方法​

    JavaScript
    engine.setLiveMixView();

    参数说明​

    参数类型必填说明
    viewObject是预览窗口组件引用
    callbackFunction否设置结果回调

    示例代码​

    JavaScript
    /// 创建预览窗口
    /// 导入组件 和 添加 remoteView 组件，可参考 setLocalView 部分的示例
    /// 设置预览窗口
    engine.setLiveMixView(this.$refs.remoteView.getNativeViewRef(), (code) => {
      if (code === 0) {
        // 设置成功
        console.log('合流预览窗口设置成功');
      } else {
        // 设置失败
        console.log('合流预览窗口设置失败');
      }
    });

示例项目​

您可以通过 QuickDemo 示例项目快速体验 uni-app 会议和直播场景的完整实现。

克隆下载示例代码

shell
git clone https://github.com/rongcloud/uniapp-rtc-quickdemo.git

示例项目​

您可以通过 QuickDemo 示例项目快速体验 uni-app 会议和直播场景的完整实现。

克隆下载示例代码

shell
git clone https://github.com/rongcloud/uniapp-rtc-quickdemo.git
最后于 更新