手把手编写儿童手机远程监控App之webrtc建立通信后无法再分享音视频
概述上节完成webrtc通信类设计实现嘟宝音视频通信但嘟妈与嘟宝建立通信后嘟妈想要点击麦克风与嘟宝通话时却出现问题经过梳理发现问题所在。在建立webrtc通信之前将双方的音视频分享能够实现双方的视频通话嘟宝建立之前分享音视频嘟妈通过按钮点击音视频分享嘟妈无法实现讲过排查webrtc在创建offer时offer需指明视频音频轨道信息一旦创建offeroffer内没有音、视轨发送给对方对方则认为你没有音视频分享以后再分享音视频也是徒劳。看下代码梳理一开始嘟妈就分享音视频则能实现相互音视频try{const localStreamawait navigator.mediaDevices.getUserMedia({video:true,audio:true,})localStream.getTracks().forEach((track){console.log(添加本地轨道:,track)peerConnection.addTrack(track,localStream);})}catch(error){console.log(error)}// 明确声明我要发送音频sendonly或 既发又收sendrecvpeerConnection.addTransceiver(audio,{direction:sendrecv})peerConnection.addTransceiver(video,{direction:sendrecv})// 2. 创建Offerconst offerawait peerConnection.createOffer()await peerConnection.setLocalDescription(offer)await this.pushmsg(offer,JSON.stringify(offer))二嘟妈通过按钮点击分享音视频则嘟妈无法音视频分享// 先创建offerpeerConnection.addTransceiver(audio,{direction:sendrecv})peerConnection.addTransceiver(video,{direction:sendrecv})// 2. 创建Offerconst offerawait peerConnection.createOffer()await peerConnection.setLocalDescription(offer)await this.pushmsg(offer,JSON.stringify(offer))按钮点击分享音视频try{const localStreamawait navigator.mediaDevices.getUserMedia({video:true,audio:true,})localStream.getTracks().forEach((track){peerConnection.addTrack(track,localStream);})}catch(error){console.log(error)}解决方法使用 addTransceiver 占位 replaceTrack定义变量创建offer替换音视频private audioTransceiver!:RTCRtpTransceiver private videoTransceiver!:RTCRtpTransceiver private peerConnection!:any// 明确声明我要发送音频sendonly或 既发又收sendrecvthis.audioTransceiverpeerConnection.addTransceiver(audio,{direction:sendrecv})this.videoTransceiverpeerConnection.addTransceiver(video,{direction:sendrecv})// 2. 创建Offerconst offerawait peerConnection.createOffer()await peerConnection.setLocalDescription(offer)await this.pushmsg(offer,JSON.stringify(offer))asyncenbleMic(){try{const localStreamawait navigator.mediaDevices.getUserMedia({video:false,audio:true,// 只获取音频})localStream.getTracks().forEach(async(track:any){console.log(添加本地轨道:,track)if(track.kindaudio){this.audioTransceiver.sender.replaceTrack(track)}if(track.kindvideo){this.videoTransceiver.sender.replaceTrack(track)}})}catch(error){console.log(error)}}至此音视频通信完成以下为演示效果。嘟宝是为监督孩子身边环境而创建的一套应用它能够实现后台驻留长连接随时接收嘟妈信令建立音视频通道点对点通信而不需要中转服务器。嘟妈是一套WEB 应用使用vue3编写能够兼容app、小程序开发 。而嘟宝采用原生Andorid开发能够获取最大权限保持在后台运行。目前为止嘟宝完成的基本功能设计包括MQTT 基础通信后台驻留SQLite数据存储二维码显示身份识别码开启自启动前台服务任务栏消息发送与点击高德定位实时更新webrtc点对点通信mAgentWeb控件封装解决全屏与获取视频权限问题嘟妈采用vue3编写它的核心需求已完成包含以下部分:完成登录注册页面完成二维码扫描完成与嘟宝绑定与嘟妈建立音视频通信查看嘟宝桌面共享视频项目地址在github上。嘟宝地址嘟妈地址
