标准低延迟直播流程

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

提示

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

主播端

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

步骤 1.1：设置监听

设置本地事件监听

设置加入房间事件回调

方法

JavaScript
engine.setOnRoomJoinedListener();

回调参数

参数	类型	说明
code	Number	错误码，0 表示成功
message	String	错误信息

示例代码

JavaScript
engine.setOnRoomJoinedListener(({code, message}) => {
  if (code === 0) {
    // 加入房间成功
    console.log('加入房间成功');
  } else {
    // 加入房间失败
    console.log('加入房间失败:', message);
  }
});

设置发布资源事件回调

方法

JavaScript
engine.setOnPublishedListener();

回调参数

参数	类型	说明
type	RCRTCMediaType	发布资源的类型
code	Number	错误码，0 表示成功
message	String	错误信息

示例代码

JavaScript
engine.setOnPublishedListener(({type, code, message}) => {
  // type 发布资源的类型 RCRTCMediaType
  if (code === 0) {
    // 发布成功
    console.log('发布成功，类型:', type);
  } else {
    // 发布失败
    console.log('发布失败:', message);
  }
});

设置取消发布资源事件回调

方法

JavaScript
engine.setOnUnpublishedListener();

回调参数

参数	类型	说明
type	RCRTCMediaType	取消发布资源的类型
code	Number	错误码，0 表示成功
message	String	错误信息

示例代码

JavaScript
engine.setOnUnpublishedListener(({type, code, message}) => {
  // type 取消发布资源的类型 RCRTCMediaType
  if (code === 0) {
    // 取消发布成功
    console.log('取消发布成功，类型:', type);
  } else {
    // 取消发布失败
    console.log('取消发布失败:', message);
  }
});

设置订阅资源事件回调

方法

JavaScript
engine.setOnSubscribedListener();

回调参数

参数	类型	说明
userId	String	远端用户 ID
type	RCRTCMediaType	订阅资源的类型
code	Number	错误码，0 表示成功
message	String	错误信息

示例代码

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

回调参数

参数	类型	说明
userId	String	远端用户 ID
type	RCRTCMediaType	取消订阅资源的类型
code	Number	错误码，0 表示成功
message	String	错误信息

示例代码

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

回调参数

参数	类型	说明
userId	String	远端用户 ID
roomId	String	房间 ID

示例代码

JavaScript
engine.setOnUserJoinedListener(({userId, roomId}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  console.log('远端用户加入房间:', userId, '房间:', roomId);
});

设置远端用户离开房间事件回调

方法

JavaScript
engine.setOnUserLeftListener();

回调参数

参数	类型	说明
userId	String	远端用户 ID
roomId	String	房间 ID

示例代码

JavaScript
engine.setOnUserLeftListener(({userId, roomId}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  console.log('远端用户离开房间:', userId, '房间:', roomId);
});

设置远端用户发布资源回调

方法

JavaScript
engine.setOnRemotePublishedListener();

回调参数

参数	类型	说明
userId	String	远端用户 ID
roomId	String	房间 ID
type	RCRTCMediaType	远端用户发布的资源类型

示例代码

JavaScript
engine.setOnRemotePublishedListener(({userId, roomId, type}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  // type 远端用户发布的资源类型 RCRTCMediaType
  console.log('远端用户发布资源:', userId, '类型:', type);
});

设置远端用户取消发布资源回调

方法

JavaScript
engine.setOnRemoteUnpublishedListener();

回调参数

参数	类型	说明
userId	String	远端用户 ID
roomId	String	房间 ID
type	RCRTCMediaType	远端用户取消发布的资源类型

示例代码

JavaScript
engine.setOnRemoteUnpublishedListener(({userId, roomId, type}) => {
  // userId 远端用户 ID
  // roomId 房间 ID
  // type 远端用户发布的资源类型 RCRTCMediaType
  console.log('远端用户取消发布资源:', userId, '类型:', type);
});

步骤 1.2：加入房间

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

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

调用 RCRTCEngine 下的 joinRoom 方法创建并加入一个直播房间。
JavaScript
```
engine.joinRoom('直播间 ID', roomSetup);
```

提示

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

步骤 1.3：发布音视频资源

发布音视频资源

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

方法

JavaScript
engine.enableCamera();
engine.publish();

参数说明

参数	类型	必填	说明
enabled	Boolean	是	是否启用摄像头
type	RCRTCMediaType	是	发布资源的类型

示例代码

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

参数说明

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

示例代码

JavaScript
// 设置预览窗口
engine.setLocalView(this.$refs.localView.getNativeViewRef(), (code) => {
  if (code === 0) {
    // 设置成功
    console.log('本地预览窗口设置成功');
  } else {
    // 设置失败
    console.log('本地预览窗口设置失败');
  }
});

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

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

方法
JavaScript
```
engine.subscribe();
```
参数说明

参数类型必填说明
userId String 是远端用户 ID
type RCRTCMediaType 是订阅资源的类型

示例代码
JavaScript
```
engine.subscribe(userId, RCRTCMediaType.AudioVideo);
```

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

方法

JavaScript
engine.setRemoteView();

参数说明

参数	类型	必填	说明
userId	String	是	远端用户 ID
view	Object	是	预览窗口组件引用
callback	Function	否	设置结果回调

示例代码

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

回调参数

参数	类型	说明
type	RCRTCMediaType	资源类型

示例代码

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

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

方法

JavaScript
engine.setOnRemoteLiveMixUnpublishedListener();

回调参数

参数	类型	说明
type	RCRTCMediaType	资源类型

示例代码

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

步骤 2.2：加入房间

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

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

调用 RCRTCEngine 下的 joinRoom 方法创建并加入一个直播房间。
JavaScript
```
engine.joinRoom('直播间 ID', setup);
```

步骤 2.3：观众观看直播

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

方法
JavaScript
```
engine.subscribeLiveMix();
```
参数说明

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

示例代码
JavaScript
```
engine.subscribeLiveMix(RCRTCMediaType.AudioVideo);
```

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

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

方法

JavaScript
engine.setLiveMixView();

参数说明

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

示例代码

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

IMLib

IMKit

Global IM UIKit

推送服务

IMLib

IMKit

CallLib

CallKit

CallPlus

RTCLib

CallLib

CallPlus

RTCLib

IM 服务端

IM Server SDK

RTC 服务端

北极星数据查询

标准低延迟直播流程

主播端​

步骤 1.1：设置监听​

设置本地事件监听​

设置加入房间事件回调​

方法​

回调参数​

示例代码​

设置发布资源事件回调​

方法​

回调参数​

示例代码​

设置取消发布资源事件回调​

方法​

回调参数​

示例代码​

设置订阅资源事件回调​

方法​

回调参数​

示例代码​

设置取消订阅资源事件回调​

方法​

回调参数​

示例代码​

设置远端事件监听​

设置远端用户加入房间事件回调​

方法​

回调参数​

示例代码​

设置远端用户离开房间事件回调​

方法​

回调参数​

示例代码​

设置远端用户发布资源回调​

方法​

回调参数​

示例代码​

设置远端用户取消发布资源回调​

方法​

回调参数​

示例代码​

步骤 1.2：加入房间​

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

发布音视频资源​

方法​

参数说明​

示例代码​

设置显示视频的组件​

导入预览窗口组件​

添加预览窗口​

设置预览窗口​

方法​

参数说明​

示例代码​

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

方法​

参数说明​

示例代码​

方法​

参数说明​

示例代码​

观众端​

步骤 2.1：设置监听​

主播端

步骤 1.1：设置监听

设置本地事件监听

设置加入房间事件回调

方法

回调参数

示例代码

设置发布资源事件回调

方法

回调参数

示例代码

设置取消发布资源事件回调

方法

回调参数

示例代码

设置订阅资源事件回调

方法

回调参数

示例代码

设置取消订阅资源事件回调

方法

回调参数

示例代码

设置远端事件监听

设置远端用户加入房间事件回调

方法

回调参数

示例代码

设置远端用户离开房间事件回调

方法

回调参数

示例代码

设置远端用户发布资源回调

方法

回调参数

示例代码

设置远端用户取消发布资源回调

方法

回调参数

示例代码

步骤 1.2：加入房间

步骤 1.3：发布音视频资源

发布音视频资源

方法

参数说明

示例代码

设置显示视频的组件

导入预览窗口组件

添加预览窗口

设置预览窗口

方法

参数说明

示例代码

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

方法

参数说明

示例代码

方法

参数说明

示例代码

观众端

步骤 2.1：设置监听

方法

回调参数

示例代码

方法

回调参数

示例代码

步骤 2.2：加入房间

步骤 2.3：观众观看直播

方法

参数说明

示例代码

方法

参数说明

示例代码

示例项目