记录–uniapp 使用原生子窗体进行视频聊天

现在 uniapp 开发的实时音视频聊天类的 APP 大部分都要在 nvue 页面上进行开发。虽然 nvue 与 vue 的区别不是很大，但还是有所差异的。

仔细查看了 uniapp 官网，发现了可以使用原生子窗体进行开发，可以把整个视频聊天封装到一个原生子窗体中，方便移植。

一、原生子窗体 subNVue

subNVue 页面可以和 vue 页面进行通信，来告知 vue 页面用户执行的操作。或者通过 vue 页面对 subNVue 进行数据和状态的更新。 subNVue 除了与 vue 页面进行通信，还 可以与 nvue 页面进行通信。

通信实现方式

// 在 subNVue/vue 页面注册事件监听方法   // $on(eventName, callback)   uni.$on('page-popup', (data) => {       vm.title = data.title;       vm.content = data.content;   })    // 在 subNVue/vue 页面触发事件   // $emit(eventName, data)   uni.$emit('page-popup', {       title: '我是一个title',       content: '我是data content'   });

<script> 	// 引入 RTC 插件 	const RtcModule = uni.requireNativePlugin('AR-RtcModule'); 	// 引入原生子窗体 	const subNVueLocation = uni.getSubNVueById('LocationCanvasView'); 	const subNVueRemote = uni.getSubNVueById('RemoteCanvasView'); 	export default { 		data() { 			return { 				appid: "2437529dd3ae7e238a7617c61f22daee", 				channel: "", 				uid: "", 				canvasView: { 					typeOption: "location", // 本地/远端 				}, 			}; 		}, 		// 接受页面参数 		onLoad(option) { 			// 频道 			this.channel = option.channel; 			// 用户 			this.uid = option.uid; 		}, 		mounted() { 			this.init() 		}, 		methods: { 			// 初始化 			async init() { 				// 初始化 callback 				await RtcModule.setCallBack(event => { 					switch (event.engineEvent) { 						case "onWarning": 							console.log("onWarning", event); 							break; 						case "onError": 							console.log("onError", event); 							break; 						case "onJoinChannelSuccess": //用户加入成功 							console.log("用户" + event.uid + "加入成功");	 							 							this.localAudioVideoFn() 							break; 						case "onLeaveChannel": //离开频道回调  							break; 						case "onUserJoined": //远端用户加入当前频道回调。 							// this.promptFn("info", "远端用户加入当前频道回调");  							break; 						case "onUserOffline": //远端用户离开当前频道回调。  							break;  						case "onFirstLocalAudioFrame": //已发送本地音频首帧的回调。（页面上添加音频） 							break; 						case "onFirstLocalVideoFrame": //已显示本地视频首帧的回调。（页面添加本地视频） 							// this.promptFn("error", "已显示本地视频首帧的回调"); 							break; 						case "onFirstRemoteVideoDecoded": //已完成远端视频首帧解码回调。（页面添加远端视频） 							// this.promptFn("info", "已完成远端视频首帧解码回调"); 							this.remoteAudioVideoFn(event.uid, this.channel); 							break; 					}  				}); 				// 初始化 appid 				await RtcModule.create({ 					"appId": this.appid 				}, (res) => {});  				//设置直播场景下的用户角色 主播 				await RtcModule.setClientRole({ 					"role": 1 				}, (ret) => {});  				//加入房间 				await RtcModule.joinChannel({ 					"token": "", 					"channelId": this.channel, 					"uid": this.uid 				}, (res) => {}) 				// 隐藏原生子窗体 				subNVueLocation.hide(); 				subNVueRemote.hide(); 			}, 			// 采集视频 			async localAudioVideoFn() { 				// 采集本地视频 				this.canvasView = await Object.assign(this.canvasView, { 					channelId: this.channel, 					uid: this.uid, 					RtcModule 				}) 				// 打开 本地视频容器 子窗体   				await subNVueLocation.show(); 				await uni.$emit('LocationCanvasViewFn', this.canvasView); 			}, 			// 远端视频渲染 			async remoteAudioVideoFn(uid, channelId) { 				// 通过 id 获取 nvue 子窗体 				this.open2 = true; 				// 打开 远端视频容器 子窗体   				await subNVueRemote.show(); 				await uni.$emit('RemoteCanvasViewFn', { 					uid, 					channelId, 					typeOption: "remote" 				}); 			} 		} 	} </script>