标准低延迟直播流程
在开始之前,请您再次确认您已经完成了开通音视频服务、导入 SDK以及初始化。
多人之间想要发起音视频通话,需要加入同一个音视频房间。对于直播需求来讲,资源类型需选择 AudioVideo
或 Audio
,即音视频直播间或纯音频直播间。加入房间的角色也分为主播 LiveBroadcaster
和观众 LiveAudience
,下面就这两种身份,分别进行说明。
主播端
用户加入房间的角色为主播 LiveBroadcaster
。
步骤 1.1:设置监听
设置本地事件监听
设置加入房间事件回调
engine.setOnRoomJoinedListener(({code, message}) => {
if (code === 0) {
// 加入房间成功
} else {
// 加入房间失败
}
});
设置发布资源事件回调
engine.setOnPublishedListener(({type, code, message}) => {
// type 发布资源的类型 RCRTCMediaType
if (code === 0) {
// 发布成功
} else {
// 发布失败
}
});
设置取消发布资源事件回调
engine.setOnUnpublishedListener(({type, code, message}) => {
// type 取消发布资源的类型 RCRTCMediaType
if (code === 0) {
// 取消发布成功
} else {
// 取消发布失败
}
});
设置订阅资源事件回调
engine.setOnSubscribedListener(({userId, type, code, message}) => {
// userId 远端用户 ID
// type 订阅资源的类型 RCRTCMediaType
if (code === 0) {
// 订阅成功
} else {
// 订阅失败
}
});
设置取消订阅资源事件回调
engine.setOnUnsubscribedListener(({userId, type, code, message}) => {
// userId 远端用户 ID
// type 取消订阅资源的类型 RCRTCMediaType
if (code === 0) {
// 取消订阅成功
} else {
// 取消订阅失败
}
});
设置远端事件监听
设置远端用户加入房间事件回调
engine.setOnUserJoinedListener(({userId, roomId}) => {
// userId 远端用户 ID
// roomId 房间 ID
});
设置远端用户离开房间事件回调
engine.setOnUserLeftListener(({userId, roomId}) => {
// userId 远端用户 ID
// roomId 房间 ID
});
设置远端用户发布资源回调
engine.setOnRemotePublishedListener(({userId, roomId, type}) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
设置远端用户取消发布资源回调
engine.setOnRemoteUnpublishedListener(({userId, roomId, type}) => {
// userId 远端用户 ID
// roomId 房间 ID
// type 远端用户发布的资源类型 RCRTCMediaType
});
步骤 1.2:加入房间
-
构建 RCRTCRoomSetup,指定主播身份和房间类型。
JavaScriptlet roomSetup = {
// 根据实际场景,选择音视频直播:AudioVideo 或纯音频直播:Audio
type: RCRTCMediaType.AudioVideo
role: RCRTCRole.LiveBroadcaster
}; -
调用
RCRTCEngine
下的 joinRoom 方法创建并加入一个直播房间。JavaScriptengine.joinRoom('直播间 ID', roomSetup);
客户端通过 joinRoom
传入的"直播间 ID" 来加入不同房间。房间不需要客户端创建或销毁,融云服务若发现该房间不存在时会自动创建,当没有任何主播时(只有观众不算),过一段时间也会自动销毁该房间。
步骤 1.3:发布音视频资源
发布音视频资源
加入房间后,调用 enableCamera 接口开始摄像头采集,调用 publish 接口发布音视频资源。
/// 开启摄像头
engine.enableCamera(true);
/// 发布音视频资源
engine.publish(RCRTCMediaType.AudioVideo);
设置显示视频的组件
设置用于显示视频的 RCRTCView
,调用 RCRTCEngine
下的 setLocalView 方法设置本地视频的显示 View。
警告
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="fitType" :mirror="mirror">
</RCRTCView>
// 导入 RCRTCViewFitType
import { RCRTCViewFitType } from '@/uni_modules/RongCloud-RTCWrapper/lib/RCRTCDefines';
export default {
data() {
return {
// 其他业务代码 ......
// 自适应显示
fitType: RCRTCViewFitType.Center,
// 是否镜像显示 true 为镜像
mirror: true,
};
},
// 其他业务代码 ......
}
设置预览窗口
// 设置预览窗口
engine.setLocalView(this.$refs.localView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
步骤 1.4:主播订阅房间内其他主播的资源
-
调用
RCRTCEngine
下的 subscribe 方法订阅房间内其他主播的资源,在主播连麦的场景下会用到该方法。当远端主播发布资源时,会通过 setOnRemotePublishedListener 回调通知,在回调中订阅音视频资源并显示视图。JavaScriptengine.subscribe(userId, RCRTCMediaType.AudioVideo);
-
创建用于显示视频的
RCRTCView
,调用RCRTCEngine
下的 setRemoteView 方法设置远端视频的显示 View。JavaScript/// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
/// 设置预览窗口
engine.setRemoteView(userId, this.$refs.remoteView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});
观众端
用户加入房间的角色为观众 LiveAudience
。
步骤 2.1:设置监听
调用 setOnRemoteLiveMixPublishedListener 设置合流资源发布监听。
engine.setOnRemoteLiveMixPublishedListener(({type}) => {
// type 资源类型 RCRTCMediaType
});
调用 setOnRemoteLiveMixUnpublishedListener 设置合流资源取消发布监听。
engine.setOnRemoteLiveMixUnpublishedListener(({type}) => {
// type 资源类型 RCRTCMediaType
});
步骤 2.2:加入房间
-
构建 RCRTCRoomSetup,指定观众身份和房间类型。
JavaScriptlet roomSetup = {
// 根据实际场景,选择音视频直播:audio_video 或纯音频直播:audio
type: RCRTCMediaType.AudioVideo,
role: RCRTCRole.LiveAudience,
}; -
调用
RCRTCEngine
下的 joinRoom 方法创建并加入一个直播房间。JavaScriptengine.joinRoom('直播间 ID', setup);
步骤 2.3:观众观看直播
-
在监听到合流资源发布事件之后,调用
RCRTCEngine
下的 subscribeLiveMix 方法订阅直播。JavaScriptengine.subscribeLiveMix(RCRTCMediaType.AudioVideo);
-
创建用于显示视频的
RCRTCVideoView
,调用RCRTCEngine
下的 setLiveMixView 方法设置房间直播资源的显示 View。JavaScript/// 创建预览窗口
/// 导入组件 和 添加 remoteView 组件,可参考 setLocalView 部分的示例
/// 设置预览窗口
engine.setLiveMixView(this.$refs.remoteView.getNativeViewRef(), (code) => {
if (code === 0) {
// 设置成功
} else {
// 设置失败
}
});