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

r囧r小猫 2022-10-14 10:55 127阅读 0赞

# 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'  
    });

**存放位置、相关配置**

因为想封装成一整个模块，所以建议放在最外层与 pages 文件同级的 paltform\\app-plus\\subNVue 下。

具体可查看官网 [https://ask.dcloud.net.cn/article/35948][https_ask.dcloud.net.cn_article_35948]

## 二、开发 ##

**（1）引入视频聊天插件**

1.  使用 anyRTC 提供的 uniapp 插件

*  [anyRTC音视频SDK插件][anyRTC_SDK]
 *  [anyRTC实时消息SDK插件][anyRTC_SDK 1]

1.  注册 anyRTC 账号，创建应用获取appid
2.  制作自定义基座

**（2） 配置原生子窗体 subNVue**

*  文件位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center][]

*  在 `pages.json` 中的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 1][]

**（3）简易实现**

<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>

**（4）真机运行**

简单使用原生子窗体已经实现了，下次再带大家把音视频封装到一个原生子窗体中吧，大家要多多关注哟！

[https_ask.dcloud.net.cn_article_35948]: https://ask.dcloud.net.cn/article/35948
[anyRTC_SDK]: https://ext.dcloud.net.cn/plugin?id=3661
[anyRTC_SDK 1]: https://ext.dcloud.net.cn/plugin?id=3777
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/3956602536f04061b21e38ba653a62d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221014/e161b219398a40b6aa5cf16fa7e3fdf2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java如何生成父窗体、子窗体

![e9fce9bf135c8a684977bb794b7f1138.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

╰+哭是因爲堅強的太久メ/ 2024年03月30日 17:46/ 0 赞/ 93 阅读

相关 uni-app原生子窗体（app端）

在uni-app中video是原生组件，层级最高，全屏后普通前端组件无法覆盖，如果想要在视频自行绘制界面： 1、app端`vue`页面可以用 `cover-view

不念不忘少年蓝@/ 2023年06月09日 11:28/ 0 赞/ 25 阅读

相关 subNVue 原生子窗体的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Myth丶恋晨/ 2023年03月06日 03:37/ 0 赞/ 8 阅读

相关覆盖原生子窗体自定义subNVues解决css警告

uni-app加入subNVues后，标签属性运行报红由于要使用自定义modal框覆盖原生导航栏，这里变尝试使用subNVues，但实时并未像想象那么顺利报错图

骑猪看日落/ 2022年10月16日 09:56/ 0 赞/ 160 阅读

相关 uniapp 使用原生子窗体进行视频聊天

uniapp 使用原生子窗体进行视频聊天现在 uniapp 开发的实时音视频聊天类的 APP 大部分都要在 nvue 页面上进行开发。虽然 nvue 与 vue 的区别

r囧r小猫/ 2022年10月14日 10:55/ 0 赞/ 128 阅读

相关 jquery $.jBox弹窗父窗体调用子窗体方法，保存子窗体页面数据

//添加--以弹窗的方式父窗体 <script type="text/javascript"> $(doc

旧城等待，/ 2022年05月08日 15:04/ 0 赞/ 375 阅读

相关【机房重构】C#子窗体关闭父窗体

【机房重构】-----【修改密码】最原始我的修改密码是用户在修改密码之后仍然处于登录状态，自己想想其实也挺对的，为啥用户修改密码了就必须要重新登录？

小灰灰/ 2021年12月14日 03:57/ 0 赞/ 396 阅读

相关 C# winform 用子窗体刷新父窗体,子窗体改变父窗体控件的值

第一种方法: 用委托,Form2和Form3是同一组 Form2 C\代码 using System; using System.Collection

偏执的太偏执、/ 2021年10月23日 06:43/ 0 赞/ 630 阅读

相关 C#创建子窗体、父窗体

本文部分内容来自书籍。多文档界面（Multiple-Document Interface，MDI），其窗体用于同时显示多个文档，每个文档显示在各自的窗口中。在MDI窗体

雨点打透心脏的1/2处/ 2021年09月23日 15:58/ 0 赞/ 879 阅读

相关 uniapp子窗体的使用与传参

前言：以下分享的是子窗体显示/隐藏和父窗体与子窗体之间的通信（传值）;为什么使用子窗体？比如项目中有类似地图这样的功能，如果页面有弹窗的话会被地图所遮挡，或者有弹窗的层不高无法

秒速五厘米/ 2021年08月19日 17:01/ 0 赞/ 672 阅读