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

10分钟用uni-app实现简易视频通话

原创

于 2021-11-16 11:51:15 发布 · 5.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #uni-app #视频通话 #webrtc #实时通信

视频讲解

视频地址

创建 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=