uniapp 实现音视频通讯
还在为 uniapp 的音视频通讯发愁吗？anyRTC 为解决广大开发者需求，特别研发了 uniapp 版的音视频通讯。
anyRTC 实时通信包括两个模块：
实时音视频模块- 音视频通信
实时消息模块- 信令交互，直播间弹幕等通信
下面我来带大家先了解实时音视频模块
示例项目运行流程(本文使用远端插件)
前往 uniapp插件市场
下载示例 demo
打开manifest.json文件，选择 App 原生插件配置 => 远端插件
制作自定义基座
打包成功后选择自定义基座
在这里插入图片描述
找到 pages => index =>index.nvue, 添加 appid
实现音视频步骤
视频渲染组件
<view>本地视频</view><view v-if> <AR-CanvasView :ref="localvideo" style="height:100px;width:100px"></AR-CanvasView></view><view>远端视频</view><view v-if> <AR-CanvasView :ref="remotevideo" style="height:100px;width:100px"></AR-CanvasView></view>
复制代码
js 相关代码
1. 引入并使用插件
可参考uni-app原生插件使用说明
const RtcModule = uni.requireNativePlugin('AR-RtcModule');
复制代码
2.插件初始化
页面初始加载时进行初始化操作
// 页面初始加载(uniapp 生命周期)async onReady() { // 初始化回调 await RtcModule.setCallBack((res) => { switch (res.engineEvent) { case "onWarning": console.log("警告", res.warningCode); break; case "onError": console.log("错误", res.errorCode); break; case "onJoinChannelSuccess": (本地) console.log("用户"+ res.uid + "加入成功"); break; case "onLeaveChannel":（本地） console.log("用户"+ res.uid + "离开频道"); break; case "onUserJoined": console.log("远端用户"+ res.uid + "加入频道"); break; case "onUserOffline": console.log("远端用户"+ res.uid + "离开频道"); break; case "onFirstRemoteVideoDecoded": console.log("完成远端用户"+ res.uid + "视频首帧解码"); break; ... } }) // 初始化插件 await RtcModule.create({"appId": "**********"}, (res) => {}); }
复制代码
3.设置用户角色（本文使用主播）
插件 提供了两种角色模式：
观众(2)：可以观看主播，主播无法观看自己
主播(1)：可以让所有频道观看到自己
RtcModule.setClientRole({"role": 1}, (ret) => {});
复制代码
4.加入频道
1.使用 joinChannel 方法加入频道
RtcModule.joinChannel({"token": "","channelId": "uniappRTC","uid": "666"}, (res) => {})
复制代码
2.在监测回调中的 onJoinChannelSuccess 启用视频
使用 AR-CanvasView 组件的 setupLocalVideo，渲染本地视频
如果用户角色时观众时不能使用这段代码
在 onJoinChannelSuccess 里加入这些代码
// 启用视频模块RtcModule.enableVideo((res) => {});// 初始化本地视图this.$refs.localvideo.setupLocalVideo({ "renderMode": 1, "channelId": "uniappRTC", "uid": "666", "mirrorMode": 0}, (res) => {});// 本地预览RtcModule.startPreview((res) => {});
复制代码
5.远端用户通过监测回调处理
远端用户加入频道
通过监测监测回调中的 onUserJoined
启用 AR-CanvasView 远端视频容器
完成远端视频首帧解码
通过监测监测回调中的 onFirstRemoteVideoDecoded 渲染远端视频
在 onFirstRemoteVideoDecoded 里加入这些代码
// 初始化远端视图this.$refs.remotevideo.setupRemoteVideo({ "renderMode": 1, "channelId": "uniappRTC", "uid": res.uid, "mirrorMode": 0}, (res) => {})// 远端预览RtcModule.startPreview((res) => {});
复制代码
远端用户离开频道
通过监测回调中的 onUserOffline
关闭 AR-CanvasView 远端视频容器
6.离开频道（挂断）
RtcModule.leaveChannel((res) => {})
复制代码
在一个页面上操作展示可以不销毁实例
RtcModule.destroyRtc((res) => {})
复制代码
效果展示
当进入主播端的时候可以单人或多人视频通话，输入同一房间号即可。
如图所示
游客端只能浏览，不会显示在主屏幕上。
如图所示
集成帮助
你可以对照示例项目进行上边流程操作，集成中如需帮助，可以通过插件市场里的联系方式联系该公司客服
评论 (1 条评论)