uniapp实现音视频通讯
uniapp实现音视频通讯
还在为uniapp的音视频通讯发愁吗?anyRTC为解决广大开发者需求,特别研发了uniapp版的音视频通讯。
anyRTC 实时通信包括两个模块:
- 实时音视频模块- 音视频通信
- 实时消息模块- 信令交互,直播间弹幕等通信
下面我来带大家先了解实时音视频模块
示例项目运行流程(本文使用远端插件)
前往uniapp插件市场
下载示例demo
打开
manifest.json
文件,选择App原生插件配置 => 远端插件
制作自定义基座
打包成功后选择自定义基座
- 找到pages => index =>index.nvue, 添加appid
实现音视频步骤
视频渲染组件
- 必须在
.nvue
文件中 - 在需要显示视频时在使用
AR-CanvasView
组件,不要初始就显示,否则报错 - 需要设定宽高
<view>本地视频</view>
<view v-if><AR-CanvasView :ref="localvideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
<view>远端视频</view>
<view v-if><AR-CanvasView :ref="remotevideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
js相关代码
1. 引入并使用插件
可参考uni-app原生插件使用说明
const RtcModule = uni.requireNativePlugin('AR-RtcModule');
2.插件初始化
页面初始加载时进行初始化操作
- 初始化回调(监测回调),否则无法收到任何回调
- 初始化插件(填入 appid ),否则无法使用服务
// 页面初始加载(uniapp 生命周期)
async onReady() {// 初始化回调await RtcModule.setCallBack((res) => {switch (res.engineEvent) {case "onWarning": console.log("警告", res.warningCode);break;case "onError":console.log("错误", res.errorCode);break;case "onJoinChannelSuccess": (本地)console.log("用户"+ res.uid + "加入成功");break;case "onLeaveChannel":(本地)console.log("用户"+ res.uid + "离开频道");break;case "onUserJoined":console.log("远端用户"+ res.uid + "加入频道");break;case "onUserOffline":console.log("远端用户"+ res.uid + "离开频道");break;case "onFirstRemoteVideoDecoded":console.log("完成远端用户"+ res.uid + "视频首帧解码");break;...}})// 初始化插件await RtcModule.create({"appId": "**********"}, (res) => {});}
3.设置用户角色(本文使用主播)
插件 提供了两种角色模式:
- 观众(2):可以观看主播,主播无法观看自己
- 主播(1):可以让所有频道观看到自己
RtcModule.setClientRole({"role": 1}, (ret) => {});
4.加入频道
1.使用 joinChannel 方法加入频道
- token: anyRTC 提供的更安全鉴权(建议开发时不要开启)
- channelId:加入的频道名称(用户需要加入同一个频道才能观看对方)
- uid:用户名称 (建议随机生成,不能相同)
RtcModule.joinChannel({"token": "","channelId": "uniappRTC","uid": "666"}, (res) => {})
2.在监测回调中的 onJoinChannelSuccess
启用视频
使用 AR-CanvasView 组件的 setupLocalVideo
,渲染本地视频
如果用户角色时观众时不能使用这段代码
在 onJoinChannelSuccess
里加入这些代码
// 启用视频模块
RtcModule.enableVideo((res) => {});
// 初始化本地视图
this.$refs.localvideo.setupLocalVideo({"renderMode": 1,"channelId": "uniappRTC","uid": "666","mirrorMode": 0
}, (res) => {});
// 本地预览
RtcModule.startPreview((res) => {});
5.远端用户通过监测回调处理
远端用户加入频道
通过监测监测回调中的 onUserJoined
启用 AR-CanvasView 远端视频容器
完成远端视频首帧解码
通过监测监测回调中的 onFirstRemoteVideoDecoded
渲染远端视频
在 onFirstRemoteVideoDecoded
里加入这些代码
// 初始化远端视图
this.$refs.remotevideo.setupRemoteVideo({"renderMode": 1,"channelId": "uniappRTC","uid": res.uid,"mirrorMode": 0
}, (res) => {})
// 远端预览
RtcModule.startPreview((res) => {});
远端用户离开频道
通过监测回调中的 onUserOffline
关闭 AR-CanvasView 远端视频容器
6.离开频道(挂断)
- 离开频道
RtcModule.leaveChannel((res) => {})
- 销毁插件实例
在一个页面上操作展示可以不销毁实例
RtcModule.destroyRtc((res) => {})
效果展示
当进入主播端的时候可以单人或多人视频通话,输入同一房间号即可。
如图所示
游客端只能浏览,不会显示在主屏幕上。
如图所示
集成帮助
你可以对照示例项目进行上边流程操作,集成中如需帮助,可以通过插件市场里的联系方式联系该公司客服
uniapp实现音视频通讯相关推荐
- 行业分析| 为什么uni-app在音视频领域这么火?
首先我们要了解uni-app究竟是什么? uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序.快应用 ...
- 音视频通讯QoS技术及其演进
利用多种算法和策略进行网络传输控制,最大限度满足弱网场景下的音视频用户体验. 良逸|技术作者 01 什么是QoS?音视频通讯QoS是哪一类? QoS(Quality of Service)是服务质量的 ...
- 从无到有实现音视频通讯
由于近年国内外疫情肆虐,全国中小学都开始实行网上授课,很多公司也纷纷推出一些音视频通讯类的产品,由于从无到有研发音视频成本较高,所以大部分公司选择使用由 anyRTC 提供的 RTC SDK 进行开发 ...
- 环信即时通讯云技术博客——实时网络音视频通讯qos的一种解决方案
一.前言 随着移动互联网的快速发展以及智能终端性能的逐步提高,智能终端间进行实时音视频通讯成为未来移动互联网 发展的一个重要方向.那么如何保证智能终端之间实时音视频通讯的服务质量成为一个必须加以重视的 ...
- 基于webrtc的一对多音视频通讯
基于webrtc的一对多音视频通讯 本次实验使用windows平台,其他平台如html5.android.ios.linux.mac等思路大同小异,上一篇文章已经提及,在此不再赘述. 在此唯一对初学者 ...
- 即构科技:一家聚集音视频通讯领域顶尖人才的公司
即构科技(深圳市即构科技有限公司)是由QQ前总经理林友尧和4位资深腾讯总监创立,一家聚集音视频通讯领域顶尖人才的公司. 20名来自腾讯的核心技术专家,均有超过10年经验积累.多位成员在QQ从百万级到亿 ...
- 如何使用Intel CS for WebRTC 快速搭建实时音视频通讯系统
如何使用Intel CS for WebRTC 快速搭建实时音视频通讯系统 Intel CS for WebRTC是一套完整的WebRTC的通讯架构套件,包括了服务端软件和客户端SDK,其中客户端SD ...
- anyRTC聊聊【子弹短信】的音视频通讯
在即时通讯(或者说IM)领域,可能一提起这个词,微信和QQ肯定处于这一领域的霸主地位,因为小米的"米聊"悄无声息的走出了大众的视野,阿里的"来往"也在风生水起的 ...
- AI降噪是什么意思?AI降噪在音视频通讯场景的应用
AI降噪是指利用人工智能技术对音频.视频等信号进行降噪处理.通过对信号进行分析和处理,去除噪音,提高信号的质量和清晰度.AI降噪广泛应用于语音识别.音频处理.视频处理等领域. 噪声在我们日常生活中十分 ...
最新文章
- 计算机系男同学追班里一女同学,未果......
- Windows下的Memcache安装
- UA OPTI512R 傅立叶光学导论22 透镜成像与傅立叶变换
- 图文详解 Kubernetes,刺激…
- MFC让文档/视图结构程序支持滚动条
- Proof-of-Stake (POS) outperforms Bitcoin’s Proof-of-Work (POW)
- 看来美国的霸道不仅仅是针对Lenovo的,SONY也被威胁--索尼被判侵犯专利,PlayStation游戏机销售面临威胁【ZZ】...
- java中注解的解析_【Java】中的注解与注解解析器
- Linux下C程序的链接过程
- linux的底层文件i o,Linux 文件I/O操作
- 如何利用 webpack 在项目中做出亮点
- python 标签数量_python实现的批量分析xml标签中各个类别个数功能示例
- python︱利用dlib和opencv实现简单换脸、人脸对齐、关键点定位与画图
- animation和keyframes
- windows server 2008 各版本下载
- 湖北校园天翼飞young使用路由器上网
- android 应用的证书签名跟系统签名
- 获取自身进程结构和csrss.exe进程结构 explorer.exe进程结构
- AutoCAD如何将dwf转成dwg格式
- Latex论文下载学习教程