尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
手把手编写儿童手机远程监控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上。嘟宝地址嘟妈地址
RELATED

相关推荐

本地AI编程环境搭建:Codex部署与DeepSeek API接入实战指南

本地AI编程环境搭建:Codex部署与DeepSeek API接入实战指南

🚀 30款热门AI模型一站整合,DeepSeek/GLM/Qwen 随心用,限时 5 折。 👉 点击领海量免费额度 自学AI第三天:Codex本地部署DeepSeek接入全套实战教程 最近在探索AI编程助手时,发现很多开发者对Codex和Deep…

📅 2026/11/8 10:44:05
PyTorch 2.0 实现 Transformer 编码器:从零构建 6 层模型并可视化注意力

PyTorch 2.0 实现 Transformer 编码器:从零构建 6 层模型并可视化注意力

PyTorch 2.0 实现 Transformer 编码器:从零构建 6 层模型并可视化注意力 在自然语言处理领域,Transformer 架构已经成为事实上的标准。本文将带您从零开始,使用 PyTorch 2.0 实现一个完整的 6 层 Transformer 编码器,并深入探索其…

📅 2026/9/17 15:33:09
别再盲选大模型!GPT-5 vs Claude Fable 5在中文长文本摘要、代码生成、法律条款解析中TOP-1准确率对比(含原始benchmark截图)

别再盲选大模型!GPT-5 vs Claude Fable 5在中文长文本摘要、代码生成、法律条款解析中TOP-1准确率对比(含原始benchmark截图)

更多请点击: https://kaifayun.com 第一章:GPT-5与Claude Fable 5模型架构演进及中文能力基线定位 近年来,大语言模型架构正经历从稠密Transformer向混合专家(MoE)与动态稀疏推理协同演进的关键转折。GPT-5虽未官方发…

📅 2026/11/5 18:32:39
MORE NEWS

更多资讯

📰

会昌电工证考试备考技巧怎么考过?2026河南最新政策来了!

会昌电工证考试备考技巧怎么考过?2026河南最新政策来了! 证书过期了不知道怎么复审延期?别急,今天就给你讲明白!尤其是2026年河南地区政策调整后,电工证的考试、复审流程都有了新变化。如果你正在备考会昌电工证考试,或者证书快到期了,这篇干…

📰

辽宁省维修电工证值不值得考

证书过期了不知道怎么复审延期?辽宁维修电工证官方报名入口全解析 你是不是也遇到过这种情况,手头的维修电工证眼看就要到期,却不知道怎么操作?别急,辽宁维修电工证复审流程其实不难,关键是要找对地方、走对流程。本文就带你从头到尾说清楚辽宁维修电工…

📰

招远什么时间考电工证在哪考最靠谱

招远什么时间考电工证在哪考最靠谱 证书过期了不知道怎么复审延期,这事儿真让人头疼,特别是在招远这样的地方,不少电工朋友都遇到过。今天咱们就来说说【招远什么时间考电工证在哪考】的问题,帮你搞清楚流程、条件、时间安排,让你不踩坑。…

📰

大专电工证怎么报名?怕考不过白交培训费?良心建议在这

大专电工证怎么报名?怕考不过白交培训费?良心建议在这 你是不是也在担心,花大钱报名电工证,结果考试不过怎么办?特别是像你这种在信阳浉河区的在职建筑工人,每天在工地忙得不可开交,好不容易抽空报名了大专电工证,结果一不小心就白交了培训费?别急,…

📰

电工证费用武汉保姆级教程:证书过期了不知道怎么复审延期

电工证费用武汉保姆级教程:证书过期了不知道怎么复审延期 证书过期了不知道怎么复审延期?别慌,这是一份专为武汉及周边地区电工从业者打造的保姆级教程,涵盖从费用到复审全流程,让你轻松搞定电工证问题。 电工证在武汉的真实价值…

📰

淮北考电工证难不难 郑州报考避坑指南全攻略

淮北考电工证难不难 郑州报考避坑指南全攻略 学历不高怕报不上名?别急,淮北考电工证难不难其实不是问题,关键是你怎么去准备、怎么去应对流程。很多工友担心自己学历不够,怕在报考过程中被卡住,但事实是,只要符合条件,学历不高的朋友一样可以顺利拿到…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬