尧图网络 高端网站定制 · 原创设计
免费咨询热线
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/7/25 1:46:06
PyTorch 2.0 实现 Transformer 编码器:从零构建 6 层模型并可视化注意力

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

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

📅 2026/7/27 23:44:58
别再盲选大模型!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/7/31 20:18:12
MORE NEWS

更多资讯

📰

Lexical React 富文本编辑器最小示例解析:从 RichTextPlugin 到自定义工具栏与 HTML 导入导出

Lexical React 富文本编辑器最小示例解析:从 RichTextPlugin 到自定义工具栏与 HTML 导入导出 【免费下载链接】lexical Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. 项目地址: https:…

📰

数学建模论文绘图提效:Codex驱动的学术图像可复现实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

SerenityOS 移植实战:Genemu(世嘉 Genesis/Mega Drive 模拟器)的五步补丁集解析

SerenityOS 移植实战:Genemu(世嘉 Genesis/Mega Drive 模拟器)的五步补丁集解析 【免费下载链接】serenity The Serenity Operating System 🐞 项目地址: https://gitcode.com/GitHub_Trending/se/serenity Genemu 是运行在…

📰

WezTerm 标签栏新标签按钮完全指南:`show_new_tab_button_in_tab_bar` 配置详解

WezTerm 标签栏新标签按钮完全指南:show_new_tab_button_in_tab_bar 配置详解 【免费下载链接】wezterm A GPU-accelerated cross-platform terminal emulator and multiplexer written by wez and implemented in Rust 项目地址: https://gitcode.com/GitHub_Tre…

📰

SadTalker 数字人生成:4 条命令部署单图说话人脸动画

SadTalker 数字人生成:4 条命令部署单图说话人脸动画 【免费下载链接】SadTalker [CVPR 2023] SadTalker:Learning Realistic 3D Motion Coefficients for Stylized Audio-Driven Single Image Talking Face Animation 项目地址: https://gitcode.com/…

📰

Python+Vue3跨平台学习行为分析系统开发实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

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

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

📞 💬