标准会议流程

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

设置本地事件回调监听

设置加入房间事件回调

方法

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

回调参数

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

示例代码

JavaScript

engine.setOnUserOfflineListener(({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);
});

加入房间

调用 joinRoom 以会议成员身份 (MeetingMember) 加入音视频会议。

方法

JavaScript

engine.joinRoom();

参数说明

参数	类型	必填	说明
roomId	String	是	房间 ID
setup	RCRTCRoomSetup	是	房间配置信息

示例代码

JavaScript

import { RCRTCMediaType, RCRTCRole } from '@/uni_modules/RongCloud-RTCWrapper/lib/RCRTCDefines';

let setup = {
  type: RCRTCMediaType.AudioVideo,
  role: RCRTCRole.MeetingMember
};
engine.joinRoom('会议号', setup);

本地预览

调用 enableCamera 打开前置摄像头采集视频。

方法

JavaScript

engine.enableCamera();

参数说明

参数	类型	必填	说明
enabled	Boolean	是	是否启用摄像头
camera	RCRTCCamera	是	摄像头类型

示例代码

JavaScript

import { RCRTCCamera } from '@/uni_modules/RongCloud-RTCWrapper/lib/RCRTCDefines';

engine.enableCamera(true, RCRTCCamera.Front);

导入预览窗口组件

警告

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

导入 RCRTCView

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,
    };
  },

  // 其他业务代码 ......
}

设置本地预览窗口

调用 setLocalView 设置本地预览窗口。

方法

JavaScript

engine.setLocalView();

参数说明

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

示例代码

JavaScript

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

发布资源

调用 publish 发布音视频资源。

方法

JavaScript

engine.publish();

参数说明

参数	类型	必填	说明
type	RCRTCMediaType	是	发布资源的类型

示例代码

JavaScript

engine.publish(RCRTCMediaType.AudioVideo);

订阅远端用户资源

在 setOnRemotePublishedListener 回调后，调用 subscribe 订阅远端用户音视频资源。

方法

JavaScript

engine.subscribe();

参数说明

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

示例代码

JavaScript

engine.subscribe(userId, RCRTCMediaType.AudioVideo);

在 setOnSubscribedListener 订阅回调后，调用 setRemoteView 设置远端用户预览窗口。

方法

JavaScript

engine.setRemoteView();

参数说明

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

示例代码

JavaScript

engine.setRemoteView(userId, this.$refs.remoteView.getNativeViewRef(), (code) => {
  if (code === 0) {
    // 设置成功
    console.log('远端预览窗口设置成功');
  } else {
    // 设置失败
    console.log('远端预览窗口设置失败');
  }
});

Demo 项目

融云提供了 uni-app 会议跟直播场景 QuickDemo 项目。

克隆下载示例代码

shell

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