uniapp开发案例,uniapp开发的知名app

  

  视频讲解视频地址(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;

  

},

  

}

  

}

  

```

  

相关文章