uni-app技术分享| uni-app转小程序

微信小程序 实现实时音视频与 uniapp 转码成微信小程序 实现实时音视频两者是一样的，区别仅仅是一个是原生小程序一个是 uniapp 转码成小程序

本文使用uniapp转码成小程序实现音视频通话

前提

确保微信开发平台 =》开发 =》开发管理 =》接口设置 的 实时播放音视频流与实时录制音视频流开启

线上版本配置 anyRTC 相关的服务器域名(本地调试可设置不校验域名)
如图所示：小程序原生本地设置不校验域名

uniapp 转小程序可以在小程序编辑器中配置也可在 uniapp 的 manifest.json 中配置

代码逻辑

1. 引入anyRTC 小程序版的实时音视频 SDK

2. 初始化 SDK

3. 加入相同的频道并将自己的视频流发布出去

4. 根据相关事件回调处理相关逻辑

必须填写 appid (在 anyRTC 控制台的项目管理中获取)
用户 uid 类型必须为字符串并且不重复
只有加入同一频道房间(类型必须为字符串)才可进行通话

代码实现

1. npm 引入 ar-rtc-miniapp

   ```jsnpm i ar-rtc-miniapp```

2. 封装 rtc.js

  ```javascript// 引入 RTCimport ArRTC from "ar-rtc-miniapp";console.log("ArRTC 版本", ArRTC);// 定义let Store = {appId: '',// 本地用户uiduserId: "",// 频道房间channelId: "",// RTC 客户端rtcClient: null,// 本地录制地址(小程序特有推流)livePusherUrl: "",// 远端播放(小程序特有拉流)livePlayerUrl: "",};// 初始化 RTCconst InItRTC = async (info) => {Store = Object.assign(Store, info)// 创建RTC客户端 Store.rtcClient = new ArRTC.client();// 初始化await Store.rtcClient.init(Store.appId);// 已添加远端音视频流Store.rtcClient.on('stream-added', rtcEvent.userPublished);// 已删除远端音视频流Store.rtcClient.on('stream-removed', rtcEvent.userUnpublished);// 通知应用程序发生错误Store.rtcClient.on('error', rtcEvent.error);// 更新 Url 地址Store.rtcClient.on('update-url', rtcEvent.updateUrl);// 远端视频已旋转Store.rtcClient.on('video-rotation', rtcEvent.videoRotation);// 远端用户已停止发送音频流Store.rtcClient.on('mute-audio', rtcEvent.muteAudio);// 远端用户已停止发送视频流Store.rtcClient.on('mute-video', rtcEvent.muteVideo);// 远端用户已恢复发送音频流Store.rtcClient.on('unmute-audio', rtcEvent.unmuteAudio);// 远端用户已恢复发送视频流Store.rtcClient.on('unmute-video', rtcEvent.unmuteAudio);return}// RTC 监听事件处理const rtcEvent = {// RTC SDK 监听用户发布userPublished: ({uid}) => {console.log("RTC SDK 监听用户发布", uid);if (Store.Mode == 0) {uni.showLoading({title: '远端加载中',mask: true,})}// 订阅远端用户发布音视频Store.rtcClient.subscribe(uid, (url) => {console.log("远端用户发布音视频", url);// 向视频页面发送远端拉流地址uni.$emit("livePusherUrlEvent", {livePlayerUrl: url});}, (err) => {console.log("订阅远端用户发布音视频失败", err);})},// RTC SDK 监听用户取消发布userUnpublished: ({uid }) => {console.log("RTC SDK 监听用户取消发布", uid);},// 更新 Url 地址updateUrl: ({uid,url}) => {console.log("包含远端用户的 ID 和更新后的拉流地址", uid, url);// 向视频页面发送远端拉流地址uni.$emit("livePusherUrlEvent", {livePlayerUrl: url});},// 视频的旋转信息以及远端用户的 IDvideoRotation: ({uid,rotation}) => {console.log("视频的旋转信息以及远端用户的 ID", uid, rotation);},// 远端用户已停止发送音频流muteAudio: ({uid}) => {console.log("远端用户已停止发送音频流", uid);},// 远端用户已停止发送视频流muteVideo: ({uid}) => {console.log("远端用户已停止发送视频流", uid);},// 远端用户已恢复发送音频流unmuteAudio: ({uid}) => {console.log("远端用户已恢复发送音频流", uid);},// 远端用户已恢复发送视频流unmuteAudio: ({uid}) => {console.log("远端用户已恢复发送视频流", uid);},// 通知应用程序发生错误。 该回调中会包含详细的错误码和错误信息error: ({code,reason}) => {console.log("错误码:" + code, "错误信息:" + reason);},}// RTC 内部逻辑const rtcInternal = {// 加入频道joinChannel: () => {console.log("加入频道", Store.rtcClient);return Store.rtcClient.join(undefined, Store.channelId,      Store.userId, () => {// uni.showModal({//   title: '加入频道'// })console.log("加入频道成功", Store.rtcClient);// 发布视频rtcInternal.publishTrack();}, (err) => {console.log("加入频道失败");});
},
// 离开频道
leaveChannel: (sendfase = true) => {console.log("RTC 离开频道", Store);},
// 发布本地音视频
publishTrack: () => {Store.rtcClient.publish((url) => {console.log("发布本地音视频", url);// 本地录制地址(小程序特有推流)Store.livePusherUrl = url;// 向视频页面发送本地推流地址uni.$emit("livePusherUrlEvent", {livePusherUrl: url});}, ({code,reason}) => {console.log("发布本地音视频失败", code, reason);})},}module.exports = {InItRTC,rtcInternal,}```

3. 页面调用

页面

     <!-- 本地录制 --><live-pusher v-if="livePusherUrl" :url="livePusherUrl" mode="RTC" autopush @statechange="statechange" @error="error" style="height: 100%;width: 100%;" /><!-- 远端播放 --><live-player v-if="livePlayerUrl" :src="livePlayerUrl" mode="RTC" autoplay @statechange="statechange" style="height: 100%;width: 100%;position: absolute;z-index: -100;" />

页面逻辑

  import ArRTC from "../rtc.js";export default {data() {return {// 可用宽度windowWidth: "",// 本地录制地址(小程序特有推流)livePusherUrl: "",// 远端播放(小程序特有拉流)livePlayerUrl: "",}},async onLoad() {// 初始化 RTCawait ArRTC.InItRTC({appId: "------------anyRTC 控制台项目管理中获取"userId: "----------------自定义",channelId: "----------自定义"});// 加入频道await ArRTC.rtcInternal.joinChannel();const _this = this;// // 推拉流变更uni.$on("livePusherUrlEvent", (data) => {if (data.livePusherUrl) {_this.livePusherUrl = data.livePusherUrl}if (data.livePlayerUrl) {_this.livePlayerUrl = data.livePlayerUrl}});// 获取页面宽度try {const res = uni.getSystemInfoSync();this.windowWidth = res.windowWidth;} catch (e) {// error}},onUnload() {// uni.$off()},methods: {// 组件状态statechange(e) {console.log('组件状态:', e)},// 组件错误error(e) {console.log("组件错误", e);}}}

uni-app技术分享| uni-app转小程序_实时音视频相关推荐

小程序如何实时音视频聊天
1.先在项目里引入声网(https://www.agora.io/cn)的SDK 可以直接下载下来放入自己项目的库文件里面下载下来的SDK 文件更名为mini-app-sdk-production ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...
LiveVideoStack线上分享第四季（十二）：实时音视频抗丢包的实践
12月26日 19:30,LiveVideoStack线上分享第四季,第十二期,我们邀请到了好视通音视频开发工程师何永德分享"好视通"如何通过FEC.NACK .带宽自适应等技 ...
LiveVideoStackCon讲师热身分享 ( 十五 ) —— 教育场景下的实时音视频解决方案
LiveVideoStackCon 2018音视频技术大会是每年的多媒体技术人的盛宴,为了让参会者与大会讲师更多互动交流,我们推出了LiveVideoStackCon讲师热身分享第一季,在每周四晚19 ...
如何在小程序上增加音视频？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文首发在云+社区,未经许可,不得转载. 作者:常青|腾讯视频云终端技术负责人 2017年第四季度,腾讯云终端团队和微信合作,将腾讯云多年积 ...
小程序类似抖音视频整屏切换
更新现在已经更新了github地址和效果gif,可在文章最后查看.如果我的代码对你有用,请帮我随手star一下. 需求最近在项目中需要加一个功能,在小程序中将已有的短视频功能,按照抖音的方式来浏览 ...
微信小程序 live-player 实时音视频播放组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 实时音视频播放(v2.9.1 起支持同层渲染).相关api:wx.createLivePlayerContext 暂只针对国内主体如下类目的 ...
【愚公系列】2022年04月微信小程序-多人音视频对话
文章目录前言一.多人音视频对话 1.wxml 2.js 前言微信小程序开发多人音视频对话首先得去小程序管理后台,「开发」-「接口设置」中自助开通该组件权限. 相关属性: 一级类目/主体类型二级 ...

uni-app技术分享| uni-app转小程序_实时音视频

前提

代码逻辑

1. 引入anyRTC 小程序版的实时音视频 SDK

2. 初始化 SDK

3. 加入相同的频道并将自己的视频流发布出去

4. 根据相关事件回调处理相关逻辑

代码实现

1. npm 引入 ar-rtc-miniapp

2. 封装 rtc.js

3. 页面调用

uni-app技术分享| uni-app转小程序_实时音视频相关推荐

最新文章

热门文章