企业官网建设流程全解析

概述

上节完成webrtc通信类设计，实现嘟宝音视频通信，但嘟妈与嘟宝建立通信后，嘟妈想要点击麦克风与嘟宝通话时，却出现问题，经过梳理，发现问题所在。

• 在建立webrtc通信之前，将双方的音视频分享，能够实现双方的视频通话
• 嘟宝建立之前分享音视频，嘟妈通过按钮点击音视频分享，嘟妈无法实现
  讲过排查，webrtc在创建offer时，offer需指明视频音频轨道信息，一旦创建offer，offer内没有音、视轨，发送给对方，对方则认为你没有音视频分享，以后再分享音视频也是徒劳。
  看下代码梳理：
• 一开始嘟妈就分享音视频，则能实现相互音视频

try{const localStream=await navigator.mediaDevices.getUserMedia({video:true,audio:true,})localStream.getTracks().forEach((track)=>{console.log('添加本地轨道:',track)peerConnection.addTrack(track,localStream);})}catch(error){console.log(error)}// 明确声明：我要发送音频（sendonly）或 既发又收（sendrecv）peerConnection.addTransceiver('audio',{direction:'sendrecv'})peerConnection.addTransceiver('video',{direction:'sendrecv'})// 2. 创建Offerconst offer=await 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 offer=await peerConnection.createOffer()await peerConnection.setLocalDescription(offer)await this.pushmsg('offer',JSON.stringify(offer))

按钮点击分享音视频

try{const localStream=await 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）或 既发又收（sendrecv）this.audioTransceiver=peerConnection.addTransceiver('audio',{direction:'sendrecv'})this.videoTransceiver=peerConnection.addTransceiver('video',{direction:'sendrecv'})// 2. 创建Offerconst offer=await peerConnection.createOffer()await peerConnection.setLocalDescription(offer)await this.pushmsg('offer',JSON.stringify(offer))

asyncenbleMic(){try{const localStream=await navigator.mediaDevices.getUserMedia({video:false,audio:true,// 只获取音频})localStream.getTracks().forEach(async(track:any)=>{console.log('添加本地轨道:',track)if(track.kind==='audio'){this.audioTransceiver.sender.replaceTrack(track)}if(track.kind==='video'){this.videoTransceiver.sender.replaceTrack(track)}})}catch(error){console.log(error)}}

至此，音视频通信完成，以下为演示效果。

嘟宝是为监督孩子身边环境而创建的一套应用，它能够实现后台驻留长连接，随时接收嘟妈信令，建立音视频通道点对点通信，而不需要中转服务器。嘟妈是一套WEB 应用，使用vue3编写，能够兼容app、小程序开发 。而嘟宝采用原生Andorid开发，能够获取最大权限，保持在后台运行。
目前为止，嘟宝完成的基本功能设计包括

• MQTT 基础通信
• 后台驻留
• SQLite数据存储
• 二维码显示身份识别码
• 开启自启动前台服务
• 任务栏消息发送与点击
• 高德定位实时更新
• webrtc点对点通信
• mAgentWeb控件封装解决全屏与获取视频权限问题
  嘟妈采用vue3编写它的核心需求已完成包含以下部分:
• 完成登录注册页面
• 完成二维码扫描完成与嘟宝绑定
• 与嘟妈建立音视频通信
• 查看嘟宝桌面共享视频
  项目地址在github上。
  嘟宝地址
  嘟妈地址