代码拉取完成,页面将自动刷新
本文档主要讲解了如何使用融云 uni-app RTC SDK,基于 融云 iOS/Android 平台的 RTCLib SDK
融云官网申请开发者账号
通过管理后台的 "基本信息"->"App Key" 获取 AppKey
通过管理后台的 "IM 服务"—>"API 调用"->"用户服务"->"获取 Token",通过用户 id 获取 IMToken
管理后台的 "音视频服务"->"服务设置" 开通音视频 RTC 3.0 ,开通两个小时后生效
IMLib.init(RongAppKey);
IMLib.connect(IMToken, (code, userId) {
});
RCRTCEngine.create();
// 设置加入 RTC 房间事件监听
RCRTCEngine.setOnRoomJoinedListener(({code, message}) => {
if (code === 0) {
// 加入房间成功
} else {
// 加入房间失败
}
});
// 加入 RTC 房间
let roomSetup = {
// 根据实际场景,选择音视频直播:AudioVideo 或纯音频直播:Audio
type: RCRTCMediaType.AudioVideo
role: RCRTCRole.MeetingMember
};
RCRTCEngine.joinRoom('直播间 ID', roomSetup);
引擎默认开启音频采集
RCRTCEngine.enableMicrophone(true);
RCRTCEngine.enableCamera(true);
设置用于显示视频的 RCRTCView
,调用 RCRTCEngine
下的 setLocalView
方法设置本地视频的显示 view。
:::warning RCRTCView 内部包装的是原生提供的组件, 所以 RCRTCView 只能在 nvue 文件中使用。 :::
导入预览窗口组件
// 导入 RCRTCView
import RCRTCView from '@/uni_modules/RongCloud-RTCWrapper/components/RCRTCView';
// 声明 RCRTCView
export default {
components: {
RCRTCView,
},
}
添加预览窗口
<!-- 增加 RCRTCView 组件, fitType: 视频填充模式, mirror: 视频是否镜像显示 -->
<RCRTCView class="localView" ref="localView" :fitType="RCRTCViewFitType.Center" :mirror="true">
</RCRTCView>
设置预览窗口
// 设置预览窗口
RCRTCEngine.setLocalView(this.$refs.localView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
RCRTCEngine.publish(RCRTCMediaType.AudioVideo);
当用户加入的时候,不要做订阅渲染的处理
,因为此时该用户可能刚加入房间成功,但是尚未发布资源
RCRTCEngine.setOnUserJoinedListener(({userId, roomId}) => {
// userId 远端用户 ID
// roomId 房间 ID
});
RCRTCEngine.setOnRemotePublishedListener(({userId, roomId, type}) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
RCRTCEngine.subscribe(userId, type);
// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
// 设置预览窗口
RCRTCEngine.setRemoteView(userId, this.$refs.remoteView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
// 设置加入 RTC 房间事件监听
RCRTCEngine.setOnRoomJoinedListener(({code, message}) => {
if (code === 0) {
// 加入房间成功
} else {
// 加入房间失败
}
});
// 加入 RTC 房间
let roomSetup = {
// 根据实际场景,选择音视频直播:AudioVideo 或纯音频直播:Audio
type: RCRTCMediaType.AudioVideo
role: RCRTCRole.LiveBroadcaster
};
RCRTCEngine.joinRoom('直播间 ID', roomSetup);
引擎默认开启音频采集
RCRTCEngine.enableMicrophone(true);
RCRTCEngine.enableCamera(true);
// 设置预览窗口
RCRTCEngine.setLocalView(this.$refs.localView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
RCRTCEngine.publish(RCRTCMediaType.AudioVideo);
当主播加入的时候,不要做订阅渲染的处理
,因为此时该主播可能刚加入房间成功,但是尚未发布资源
RCRTCEngine.setOnUserJoinedListener(({userId, roomId}) => {
// userId 远端用户 ID
// roomId 房间 ID
});
RCRTCEngine.setOnRemotePublishedListener(({userId, roomId, type}) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
RCRTCEngine.subscribe(userId, type);
// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
RCRTCEngine.setRemoteView(userId, this.$refs.remoteView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
// 设置加入 RTC 房间事件监听
RCRTCEngine.setOnRoomJoinedListener(({code, message}) => {
if (code === 0) {
// 创建/加入房间成功
} else {
// 创建/加入房间失败
}
});
// 加入 RTC 房间
let setup = {
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveAudience, // 观众
};
RCRTCEngine.joinRoom(roomId, setup);
RCRTCEngine.setOnRemoteLiveMixPublishedListener((type) => {
// type 媒体类型
});
RCRTCEngine.subscribeLiveMix(RCRTCMediaType.AudioVideo);
/// 导入组件 和 添加 liveMixView 组件,可参考 setLocalView 部分的示例
/// 设置预览窗口
RCRTCEngine.setLiveMixView(this.$refs.liveMixView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
// 设置加入 RTC 房间事件监听
RCRTCEngine.setOnRoomJoinedListener(({code, message}) => {
if (code === 0) {
// 创建/加入房间成功
} else {
// 创建/加入房间失败
}
});
// 加入 RTC 房间
let setup = {
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveAudience, // 观众
};
RCRTCEngine.joinRoom(roomId, setup);
当主播加入的时候,不要做订阅渲染的处理
,因为此时该主播可能刚加入房间成功,但是尚未发布资源
RCRTCEngine.setOnUserJoinedListener(({userId, roomId}) => {
// userId 远端用户 ID
// roomId 房间 ID
});
RCRTCEngine.setOnRemotePublishedListener(({userId, roomId, type}) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
RCRTCEngine.subscribe(userId, type);
// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
RCRTCEngine.setRemoteView(userId, this.$refs.remoteView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
RCRTCEngine.leaveRoom();
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。