写点什么

uni-app 技术分享| 10 分钟实现一个简易 unapp 视频通话

作者:anyRTC开发者
  • 2021 年 11 月 16 日
  • 本文字数:2494 字

    阅读完需:约 8 分钟

视频讲解

视频地址

创建 uniapp 项目

引入插件

  • 前往 uniapp 插件市场搜索 anyRTC,选中anyRTC音视频SDK插件

  • 云打包购买插件(免费引入)引入创建的对应 uniapp 项目

  • uniapp 项目的 manifest.jsonApp原生插件配置选择云端插件选中anyRTC 音视频 SDK 插件`

  • 打包自定义基座

  • 选择自定义基座运行

代码逻辑


必须在nvue 页面中


<view class="content">    <button class="button" type="primary" @click="stepOne">步骤一:初始化回调</button>    <button class="button" type="primary" @click="stepTwo">步骤二:初始化实例</button>    <button class="button" type="primary" @click="stepThree">步骤三:启用视频模块</button>    <button class="button" type="primary" @click="stepFour">步骤四:加入频道房间</button>    <view class="video">      本地用户 {{localuid}} 音视频渲染      <AR-CanvasView ref="location" style="flex: 1;" />    </view>    <view class="video">      远端 {{remotenableuid}} 音视频渲染      <AR-CanvasView ref="remotenable" style="flex: 1;" />    </view>  </view>
复制代码


// rtc 音视频引入const rtcModule = uni.requireNativePlugin('AR-RtcModule');export default {    data() {      return {        appid: "177e21c0d1641291c34e46e1198bd49a",        channel: "123456",        localuid: "", // 本地用户        remotenableuid: "", // 远端用户      }    },    onLoad() {
}, methods: { // 步骤一: stepOne() { rtcModule.setCallBack(res => { switch (res.engineEvent) { // 发生警告回调 case "onWarning": console.log("发生警告回调", res); break; // 发生错误回调 case "onError": console.log("发生错误回调", res); break; // 加入频道成功回调 case "onJoinChannelSuccess": console.log("加入频道成功回调", res); // 本地用户视频渲染 this.localVideo(); break; // 远端用户加入当前频道回调 case "onUserJoined": uni.showToast({ title: '用户' + res.uid + '加入频道', icon: 'none', duration: 2000 }); break; // 远端用户离开当前频道回调 case "onUserOffline": uni.showToast({ title: '远端用户' + res.uid + '离开频道', icon: 'none', duration: 2000 }); break; // 已显示远端视频首帧回调 case "onFirstRemoteVideoDecoded": console.log("已显示远端视频首帧回调", res); // 远端视频渲染 this.remotenableVideo(res.uid); break; // 远端用户视频状态发生已变化回调 case "onRemoteVideoStateChanged": console.log("远端用户视频状态发生已变化回调", res); break; } }); }, // 步骤二: stepTwo() { rtcModule.create({ "appId": this.appid }, res => { console.log('初始化实例 rtc', res); }); // 智能降噪 // rtcModule.setParameters({ // Cmd: 'SetAudioAiNoise', // Enable: 1, // }, (res) => { // console.log('私人定制', res); // }); }, // 步骤三: stepThree() { rtcModule.enableVideo((res) => { console.log('RTC 启用视频 enableVideo 方法调用', (res.code === 0 ? '成功' : '失败:') + res); }); }, // 步骤四: stepFour() { this.localuid = this.randomFn(6); rtcModule.joinChannel({ "token": "", "channelId": this.channel, "uid": this.localuid, }, (res) => { console.log('RTC joinChannel 方法调用', (res.code === 0 ? '成功' : '失败:') + res); }); }, // 本地视频渲染 async localVideo() { // 渲染视频 await this.$refs.location.setupLocalVideo({ "renderMode": 1, "channelId": this.channel, "uid": this.localuid, "mirrorMode": 0 }, (res) => { console.log('渲染视频', res); }); // 本地预览 await this.$refs.location.startPreview((res) => { console.log('本地预览', res); }) }, async remotenableVideo(uid) { this.remotenableuid = uid; this.$refs.remotenable.setupRemoteVideo({ "renderMode": 1, "channelId": this.channel, "uid": uid, "mirrorMode": 0 }, (res) => { console.log('渲染视频', res); }); }, // 随机生成 randomFn(len, charSet) { charSet = charSet || 'abcdefghijklmnopqrstuvwxyz0123456789'; let randomString = ''; for (let i = 0; i < len; i++) { let randomPoz = Math.floor(Math.random() * charSet.length); randomString += charSet.substring(randomPoz, randomPoz + 1); } return randomString; }, } }
复制代码



发布于: 3 小时前阅读数: 6
用户头像

实时交互,万物互联! 2020.08.10 加入

实时交互,万物互联,全球实时互动云服务商领跑者!

评论

发布
暂无评论
uni-app技术分享| 10分钟实现一个简易unapp视频通话