首页IT科技uniapp开发技巧(记录–uniapp开发安卓APP视频通话模块初实践)

uniapp开发技巧(记录–uniapp开发安卓APP视频通话模块初实践)

时间2025-07-18 04:07:21分类IT科技浏览4773
导读:这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 通话页:pages/call/call这个页面会复杂一点 注意这个页面为nvue页面 先把所有代码都列出来,再一一做说明...

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

通话页:pages/call/call这个页面会复杂一点 注意这个页面为nvue页面 先把所有代码都列出来,再一一做说明
<template> <view> <view v-if="status === 1" class="switch-bg" :style="{height: pageH + px}"> <view class="top-info u-flex"> <image src="https://cdn.yuucn.cn/wp-content/uploads/2022/11/1668749350-6c49bb0403761c1.jpeg" class="avatar"> </image> <view class="info u-flex u-flex-col u-col-top"> <text class="text">值班中心</text> <text class="text">正在呼叫</text> </view> </view> <view class="switch-handle u-flex u-row-center"> <image src="" class="img" @click="hangUp"></image> </view> </view> <view v-if="status === 2" class="switch-bg" :style="{height: pageH + px}"> <view class="top-info u-flex"> <image src="https://cdn.yuucn.cn/wp-content/uploads/2022/11/1668749350-6c49bb0403761c1.jpeg" class="avatar"> </image> <view class="info u-flex u-flex-col u-col-top"> <text class="text">值班中心</text> <text class="text">邀请您视频聊天</text> </view> </view> <view class="switch-handle"> <view class="u-flex"> <text>切到语音接听</text> <image src=""></image> </view> <view class="u-flex u-row-center u-row-between"> <image src="" class="img" @click="hangUp"></image> <image src="" class="img" @click="switchOn"></image> </view> </view> </view> <view v-if="status === 3" :style="{height: pageH + px}"> <view> <zego-preview-view class="face"></zego-preview-view> <view v-for="(stream, index) in streamList" :key="index"> <zego-view :streamID="stream.streamID"></zego-view> </view> </view> <view class="switch-handle"> <view> <text>{{minute}}:{{seconds}}</text> </view> <view> <view> <view class="icon-round"> <image src="" class="icon1" mode=""></image> </view> <text class="h-text">切到语音通话</text> </view> <view> <image src="" class="img" @click="hangUp"></image> <text class="h-text">挂断</text> </view> <view> <view class="icon-round" @click="changeCamera"> <image src="" class="icon2" mode=""></image> </view> <text class="h-text">转换摄像头</text> </view> </view> </view> </view> </view> </template> <script> // #ifdef APP-PLUS var jpushModule = uni.requireNativePlugin("JG-JPush") import ZegoExpressEngine from ../../zego-express-video-uniapp/ZegoExpressEngine; import {ZegoScenario} from ../../zego-express-video-uniapp/impl/ZegoExpressDefines import {AppID,AppSign} from ../../zegoKey.js var instance = ZegoExpressEngine.createEngine(AppID, AppSign, true, 0); // #endif export default { data() { return { status: 1, // 1: 主动呼叫;2: 被呼叫 pageH: , // 页面高度 innerAudioContext: null, // 音乐对象 streamList: [], msg_id: , // 推送消息id msg_cid: , // 推送cid roomID: dfmily110001, publishStreamID: uni.getStorageSync(userinfo).nickname, userID: uni.getStorageSync(userinfo).nickname, userName: uni.getStorageSync(userinfo).nickname, camera_dir: before, // 摄像头 before 前置,after 后置 }; }, destroyed: () => { console.log(destroyed); ZegoExpressEngine.destroyEngine(); }, mounted() { var client = uni.getSystemInfoSync() if (client.platform == android) { //安卓事先请求摄像头、麦克风权限 var nativeEngine = uni.requireNativePlugin(zego-ZegoExpressUniAppSDK_ZegoExpressUniAppEngine); nativeEngine.requestCameraAndAudioPermission(); } }, onLoad(opt) { this.getSysInfo(); this.playAudio(); if(opt.status == 2){ // 带参数 status=2时代表被呼叫 this.status = parseInt(opt.status) } if(!opt.status){ // 主动呼叫、需要发推送消息 this.getPushCid(); } this.initZegoExpress(); }, onBackPress() { // return true; this.innerAudioContext.stop(); this.logout(); }, methods: { getSysInfo() { // 获取手机信息 let sys = uni.getSystemInfoSync() this.pageH = sys.windowHeight }, playAudio() { // 播放音乐 this.innerAudioContext = uni.createInnerAudioContext(); this.innerAudioContext.autoplay = true; this.innerAudioContext.src = /static/message.mp3; this.innerAudioContext.onPlay(() => { console.log(开始播放); }); }, stopAudio(){ // 停止播放音乐 if (this.innerAudioContext) { this.innerAudioContext.stop() } }, hangUp() { // 挂断 this.stopAudio(); this.sendCustomCommand(500) this.revocationPushMsg(); this.logout(); uni.navigateBack({ delta:1 }) }, switchOn() { // 接通 this.stopAudio(); this.status = 3 this.sendCustomCommand(200) }, changeCamera() { // 切换摄像头 var instance = ZegoExpressEngine.getInstance(); if (this.camera_dir == before) { instance.useFrontCamera(false) this.camera_dir = after } else if (this.camera_dir == after) { instance.useFrontCamera(true) this.camera_dir = before } }, sendCustomCommand(msg){ // 发送自定义信令 var instance = ZegoExpressEngine.getInstance(); instance.sendCustomCommand(this.roomID, msg, [{ "userID": this.userID, "userName": this.userName }], res => { console.log(res) }); }, getPushCid(){ // 极光推送cid获取 uni.request({ url: n-round { align-items: center; justify-content: center; width: 136rpx; height: 136rpx; border: 1rpx solid #fff; border-radius: 50%; .icon1 { width: 64rpx; height: 52rpx; } .icon2 { width: 60rpx; height: 60rpx; } } .h-text { margin-top: 10rpx; font-size: 26rpx; color: #fff; } } </style>

说明:

代码中的masterSecret需要修改为极光后台的masterSecret,appKey需要修改为极光后台的appKey

view 部分:

status=1 中的为主动呼叫方进入页面是初始显示内容,最重要的是 hangUp 方法,用来挂断当前邀请 status=2 中的为被邀请者进入页面初始显示的内容,有两个按钮,一个hangUp挂断,一个switchOn 接听 status=3中为接听后显示的内容(显示自己与对方视频画面)

script 部分:

最开始五行是引入相关SDK的。极光推送、即构音视频 在 onLoad 中有一个判断语句,这个就是用于判断进入页面时是主动呼叫方还是被动答应方的,显示不同内容
if(opt.status == 2){ // 带参数 status=2时代表被呼叫 this.status = parseInt(opt.status) } if(!opt.status){ // 主动呼叫、需要发推送消息 this.getPushCid(); }
sendCustomCommand 是用来在房间内发送自定义信令的,用于通知另一个人是接听了还是挂断了通话 getPushCid 是获取极光推送的cid,避免重复发送推送消息(极光推送) changeCamera 切换摄像头 revocationPushMsg 撤销推送(主动呼叫方挂断通话) sendPushMsg 发推送消息 initZegoExpress 初始化即构音视频SDK相关,与官网demo,此处我做了小改动 login 登录即构房间 logout 退出即构房间 publish 推流 destroyEngine 销毁音视频实例 removeStreams 删除流 encode base64转码

在App.vue中进行极光推送的初始化

onLaunch: function() { console.log(App Launch) // #ifdef APP-PLUS if (uni.getSystemInfoSync().platform == "ios") { // 请求定位权限 let locationServicesEnabled = jpushModule.locationServicesEnabled() let locationAuthorizationStatus = jpushModule.getLocationAuthorizationStatus() console.log(locationAuthorizationStatus, locationAuthorizationStatus) if (locationServicesEnabled == true && locationAuthorizationStatus < 3) { jpushModule.requestLocationAuthorization((result) => { console.log(定位权限, result.status) }) } jpushModule.requestNotificationAuthorization((result) => { let status = result.status if (status < 2) { uni.showToast({ icon: none, title: 您还没有打开通知权限, duration: 3000 }) } }) jpushModule.addGeofenceListener(result => { let code = result.code let type = result.type let geofenceId = result.geofenceId let userInfo = result.userInfo uni.showToast({ icon: none, title: 触发地理围栏, duration: 3000 }) }) jpushModule.setIsAllowedInMessagePop(true) jpushModule.pullInMessage(result => { let code = result.code console.log(code) }) jpushModule.addInMessageListener(result => { let eventType = result.eventType let messageType = result.messageType let content = result.content console.log(inMessageListener, eventType, messageType, content) uni.showToast({ icon: none, title: JSON.stringify(result), duration: 3000 }) }) } jpushModule.initJPushService(); jpushModule.setLoggerEnable(true); jpushModule.addConnectEventListener(result => { let connectEnable = result.connectEnable uni.$emit(connectStatusChange, connectEnable) }); jpushModule.addNotificationListener(result => { let notificationEventType = result.notificationEventType let messageID = result.messageID let title = result.title let content = result.content let extras = result.extras console.log(result) this.$util.router(`/pages/public/answer?status=2`) }); jpushModule.addCustomMessageListener(result => { let type = result.type let messageType = result.messageType let content = result.content console.log(result) uni.showToast({ icon: none, title: JSON.stringify(result), duration: 3000 }) }) jpushModule.addLocalNotificationListener(result => { let messageID = result.messageID let title = result.title let content = result.content let extras = result.extras console.log(result) uni.showToast({ icon: none, title: JSON.stringify(result), duration: 3000 }) }) // #endif },
不要忘了在最开始引入极光推送的插件

var jpushModule = uni.requireNativePlugin("JG-JPush")

官方demo的代码,直接拿过来了。。 其中最重要的就是下面这段,用来监听获取推送消息的,这里如果收到推送消息自动跳转至通话页面,也就是上面status=2的状态下
jpushModule.addNotificationListener(result => { let notificationEventType = result.notificationEventType let messageID = result.messageID let title = result.title let content = result.content let extras = result.extras console.log(result) this.$util.router(`/pages/call/call?status=2`) });

https://juejin.cn/post/6954172658195906567

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
ps切图工具怎么切图(前端必备ps切图方法,拿下ui设计师就靠它了。)