uni-app技术分享|10分钟实现一个简易uniapp视频通话(代码片段)

视频讲解

视频地址

创建 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;
			,