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

作者：anyRTC开发者

2021 年 11 月 16 日
本文字数：2494 字
阅读完需：约 8 分钟

视频讲解

视频地址

创建 uniapp 项目

创建 uniapp 项目
前往 anyRTC 控制台-项目管理创建新项目，获取 appid

引入插件

前往 uniapp 插件市场搜索 anyRTC，选中anyRTC音视频SDK插件
云打包购买插件(免费引入)引入创建的对应 uniapp 项目
uniapp 项目的 manifest.json中 App原生插件配置选择云端插件选中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;      },    }  }