视频讲解视频地址(https://www.bilibili.com/video/BV1b44y1v7u8/)
创建uniapp项目创建uniapp项目前往(https://console.anyrtc.io/pd)创建新项目,获取应用编号
引入插件前往uniapp插件市场搜索任何RTC,选中(https://ext.dcloud.net.cn/plugin?id=3661)云打包购买插件(免费引入)引入创建的对应uniapp项目uniapp项目的` manifest.json '中`应用程序原生插件配置`选择云端插件`选中` anyRTC音视频软件开发工具包(软件开发工具包)插件`打包自定义基座选择自定义基座运行
代码逻辑
必须在` nvue '页面中
` ` html
view class='content '
button class=' button ' type=' primary ' @ click=' stepOne '步骤一:初始化回调/按钮
button class=' button ' type=' primary ' @ click=' step two '步骤二:初始化实例/按钮
button class=' button ' type=' primary ' @ click='第三步'步骤三:启用视频模块/按钮
button class=' button ' type=' primary ' @ click=' step four '步骤四:加入频道房间/按钮
查看' class='视频'
本地用户{{localuid}}音视频渲染
AR-CanvasView ref=' location ' style=' flex : 1;'/
/查看
查看' class='视频'
远端{{remotenableuid}}音视频渲染
AR-CanvasView ref=' remotenable ' style=' flex : 1;'/
/查看
/查看
```
` ` javascript
//rtc音视频引入
const RTC模块=uni。requinativeplugin(“AR-RTC模块”);
导出默认值{
data() {
返回{
appid : ' 177 e21c 0d 1641291 c 34 e 46 e 1198 BD 49 a ',
频道: '123456 ',
localuid: ' ',//本地用户
remotenableuid: ' ',//远端用户
}
},
onLoad() {
},
方法: {
//步骤一:
stepOne() {
rtcModule.setCallBack(res={
开关(资源引擎事件){
//发生警告回调
案例onWarning':
console.log('发生警告回调,RES);
打破;
//发生错误回调
案例"错误":
console.log('发生错误回调,RES);
打破;
//加入频道成功回调
案例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;
},
}
}
```