记录--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 下。
具体可查看官网 ask.dcloud.net.cn/article/359…
二、开发
(1)引入视频聊天插件
- 使用 anyRTC 提供的 uniapp 插件
- 注册 anyRTC 账号,创建应用获取appid
- 制作自定义基座
(2) 配置原生子窗体 subNVue
- 文件位置
- 在
pages.json
中的配置
(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>
本文转载于:
https://juejin.cn/post/6964583553761804301
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--uniapp 使用原生子窗体进行视频聊天的更多相关文章
- 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)
系列文章 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 前言 好久不见,很久没更新博客了,前段时间 ...
- 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
系列文章 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 扫码体验,先睹为快 可以扫描下微信小程序的 ...
- Fms3和Flex打造在线多人视频会议和视频聊天(附原代码)
Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第3篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/a ...
- 循序渐进做项目系列(4)迷你QQ篇(2)——视频聊天!(附源码)
一·效果展示 源码派送:MiniQQ1.1 文字聊天的实现参见:循序渐进做项目系列(3):迷你QQ篇(1)——实现客户端互相聊天 二·服务端设计 对于实现视频聊天而言,服务端最核心的工作就是要构造多媒 ...
- 可在广域网部署运行的QQ高仿版 -- GG叽叽V3.7,优化视频聊天、控制更多相关细节
在广域网中,由于网络的结构纷繁复杂.而且其实时状况又是千变万化的,所以,要使广域网中的视频聊天达到一个令人满意的效果,存在诸多挑战.这次发布的GG 3.7版本尝试在这一方向上做一些努力,据我自己测试, ...
- Python3 实现简易局域网视频聊天工具
Python3 实现简易局域网视频聊天工具 1.环境 操作系统为 Ubuntu 16.04 python 3.5opencv-python 3.4.1.15numpy 1.14.5PyAudio ...
- 在Ubuntu上部署一个基于webrtc的多人视频聊天服务
最近研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题.折腾了一阵终于跑起来了 ...
- 如何实现Web视频聊天?
在网页里实现文字聊天是比较容易的,但若要实现视频聊天,就比较麻烦了.这里,我们将实现一个简单的网页版视频聊天Demo,可以支持所有类型的浏览器. 本Demo除了视频聊天功能外,还包含以下功能: 1.上 ...
- 基于 WPF和ASP.NET Core 在线音视频聊天项目
Dimension 基于 .NET 6 的在线音视频聊天项目 WPF和ASP.NET API开发 使用第三方依赖介绍 公用依赖 log4net 日志记录. SignalR 用于服务器与客户端的通讯手段 ...
- 使用WebRTC搭建前端视频聊天室——点对点通信篇
WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道.在DataChannel之前,浏览器到浏览器的数据 ...
随机推荐
- NC22594 Rinne Loves Graph
题目链接 题目 题目描述 Island 发生了一场暴乱!现在 Rinne 要和 Setsuna 立马到地上世界去. 众所周知:Island 是有一些奇怪的城镇和道路构成的(题目需要,游戏党勿喷),有些 ...
- 【OpenGL ES】光影(光照与阴影)效果
1 前言 Blinn改进的冯氏光照模型 中只展示了光照效果,本文将进一步展示阴影效果. 绘制阴影,需要用到深度纹理,即从光源角度看模型并绘制一张纹理图,纹理图的颜色代表了模型上的点离光源的深度 ...
- springboot+vue+elementui实现文件上传下载删除DEMO
说明 前面搜索了几个关于springboot+vue+elementui上传下载的文章,感觉写的都不尽如人意.要么是功能不完善,不好用.再者就是源码提供的实在差劲,都不完整.一气之下,自己搞了一个实用 ...
- pwd模块
# pwd模块提供了获取UNIX平台用户的账户与密码信息(通过文件/etc/passwd),在所有的UNIX版本平台都可以用. # pwd模块返回的是一个类似元组的对象,该对象的各个属性对应于pass ...
- mysql数据库jar包下载
1.mysql-connector-java-8.0.16.jar驱动包 链接:https://pan.baidu.com/s/1G1SfPP895wU6YvTOAcTxhA提取码:7r43 2.my ...
- DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板
通过DataGear的参数化数据集.图表联动和看板API功能,可以很方便地制作支持数据钻取效果的数据可视化看板. 首先,以上级地区名为参数,新建一个参数化SQL数据集: SELECT COL_NAME ...
- 【Azure IoT Hub】从设备端如何向IOT发送海量数据,可以使用从设备到IoT连接的直接传输吗?如何把IoT Hub中的数据存储到Azure Storage中?
问题描述 IoT Hub 从设备端如何向IOT发送海量数据,可以使用从设备到IOT连接的直接传输吗?还是需要另外开启连接.另外,消息路由和上传文件使用的连接是否就是设备到IOT建立的连接?还是需要额外 ...
- C#系列文章索引
由于有读者说,是否可以讲C#一类的文章都统一在一起,因此我做了个索引文章置顶起来,以后C#相关文章也会同步更新到该索引文章下,以便查找 .Neter所应该彻底了解的委托 - RyzenAdorer - ...
- Linux操作系统不同文件类型区别?
蓝色代表目录,绿色代表可执行文件,红色代表压缩文件.浅蓝色表示连接文件.白色表示其他文件 相关目录及作用: Bin : 存放普通用户可执行的指令 Boot: 开机引导目录 Dev:设备目录 Etc: ...
- 十五: InnoDB的存储结构
InnoDB的存储结构 1.数据库的存储结构:页 索引结构给我们提供了高效的索引方式,不过索引|信息以及数据记录都是保存在文件上的,确切说是存储在页结构中.另一方面,索引是在存储引擎中实现的,MySQ ...