【webrtc】大神用vs+ plantuml绘制的werbtc时序图

原创 已于 2022-08-20 15:09:47 修改 · 739 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webrtc #vscode #ide

于 2022-08-20 14:35:43 首次发布
本文介绍了如何利用VSCode和PlantUML插件绘制WebRTC的时序图，包括audio和rtp的发送、sender接收rtcp的过程。重点探讨了Transceiver和RtpTransceiver的角色，它们在peerconnection中负责数据的收发控制，并与ChannelInterface、RtpSenderInternal和RtpReceiverInternal协同工作。内容涉及Unified Plan SDP和BaseChannel的生命周期管理。

  • plantuml.md 大神给出了详细的过程
  • stream 维护的是编解码的包
  • channel 控制包的发送接收业务逻辑

VSCode+PlantUML插件绘制软件时序图demo

  • 导出后，大神放在这了 png-
  • 红色是audio
  • 蓝色的是video

audio 发送

在这里插入图片描述

rtp 发送

了解本专栏 订阅专栏 解锁全文
WebRTC系列-WebRTC基础(四)连接建立时序图及运行机制
HOSTEN的博客
04-10 5732
介绍WebRTC如何建立连接的过程及一些注意事项，同时也会介绍WebRTC的运行机制，以及一些API接口类
【webrtc】UML 图 ：Peerconnection 和 jsepTransportController
突围
12-26 2074
Peerconnection 和 jsepTransportController
画图工具，流程图、思维导图、原型图、UML、网络拓扑图等
weixin_28760063的博客
05-25 1272
作者：栩风 链接：https://www.zhihu.com/question/48780488/answer/188362233 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 - Draw sequence diagrams online in seconds：免费，支持时序图，支持代码绘制，支持生成样例代码，样式较多，访问速度、响应速度慢，导出支持SVG，PNG，TXT，PDF - ProcessOn - 免费在线作图，实时协作：免费（有付费模板），支持流程图.
WebRTC DTLS 时序图
qq_34315262的博客
08-03 660
Mediasoup DTLS 时序图 客户端信令服务器媒体服务器offer sdpoffer sdpanswer sdpanswer sdpstun requeststun responseclient helloserver hellochange cipherfinishedSRTP DataSRTP Datapar[ 交换SDP ][ STUN打洞 ][ DTLS握手 ][ SRTP数据发送 ]客户端信令服务器媒体服务器 ...
webrtc学习（六）重要信令级时序图
weixin_42317175的博客
08-18 823
1.用户登录信令SignIn2..用户登出信令SignOut3..用户等待信令wait信令是指从服务器的消息队列中获取暂存的中转消息，比如说sdp消息，对于信令服务器来说，他没有办法给用户推送消息，只能是用户推送消息给他，或者用户从服务端拉取消息。4..透传信令message这个信令是客户端将sdp等传输给服务端，服务端会将消息转存到他想通信的用户的队列中，当对端向服务器请求消息的时候，服务器就会将暂存在队列中的消息发送给对端。以上四个信令是peerconnet中最重要的四个信令了。
精选资源
基于Springboot实现的多人视频在线会议服务器前端(webrtc项目)源码+使用说明.7z
12-18
基于Springboot实现的多人视频在线会议服务器前端(webrtc项目)源码+使用说明.7z 【多人视频在线会议-后端源码】https://download.youkuaiyun.com/download/DeepLearning_/87317683 视频会议的前端 使用webrtc实现图像传输...
基于Vue实现的webrtc通话系统源码+运行说明.zip
01-11
基于Vue实现的webrtc通话系统源码+运行说明.zip基于Vue实现的webrtc通话系统源码+运行说明.zip基于Vue实现的webrtc通话系统源码+运行说明.zip基于Vue实现的webrtc通话系统源码+运行说明.zip基于Vue实现的webrtc通话...
精选资源
electron-react-webrtc:electron+react+webrtc 音视频等通信
05-25
在 web 浏览器中预览效果图，通过 About Electron electron + chrom内核 + node.js能力 + Native Api 拥有nodejs底层的能力 nativeApi跨平台原生的能力 为什么会出现PC版本 便捷入口 离线可用 安全需求 调用系统的...
webrtc demo(html+js+nodejs)
10-24
WebRTC（Web Real-Time Communication）是一种开放源代码项目，它为网页浏览器提供了实时通信（RTC）的能力，使得用户可以在浏览器之间直接进行音频、视频和数据共享而无需任何插件。这个"webrtc demo...
完整的WebRTC调用序列图
dechen6073的博客
07-06 138
说在前面的话：此图出自Rea-Time Communication with WebRTC:https://book.douban.com/subject/25849712/的第五章。 转载于:https://www.cnblogs.com/dhcn/p/7124860.html...
OmniGraffle UML模板型版下载
04-03
OmniGraffle UML类图时序图等全套模版型板，兼容6，7等各个版本。
从小白到入门webrtc音视频通话
拉你手跟我走的专栏
02-05 2576
包含浏览器、android中webrtc例子
webrtc 入门第二章 音视频录制
yinshipin007的博客
03-31 723
1、媒体录制原理在很多场景中回放音视频资源的需求是非常重要的例如会议，直播授课等。任何媒体形式的表情都可进行录制，如 ,,等。其中内容更加自由用户的任何2d,3d操作都可以进行录制和传播。MediaRecoder 是控制媒体录制的api，使用它可以进行录制音视频，使得web可以脱离服务器，独立进行视频录制。同时W3C也制定了相应的web标准。录制出来的是经过转码的标准媒体流数据。本章介绍了关于包括音频，视频等媒体资源录制，其流程其实很简单，使用到的api也不多，直接看代码都就可以操作，需要注意的如下。
Web_RTC 时序图
weixin_43724177的博客
11-10 212
web_rtc时序图
webRTC RTCPeerConnection连接建立过程 ---- 基于一个简易demo来分析
newchenxf的专栏
05-12 3726
前言 本文尝试梳理webRTC连接建立的过程，但是不会一上来就给你个高大上的图，而是基于一个简单的demo运行来展开。 webRTC的demo和服务器部署，我已经介绍了两套： 一个是google官方的： webRTC Android源码拉取与编译与运行 一个是Janus: webRTC服务器搭建（基于Janus）与Demo运行 这两种都是可以改一改，直接商业化的。 如果是纯粹学习用，那这里推荐个github找到的简单的demo: RTCStartupDemo。 比起前两个，这个demo只适合学习用，因为非常
webRTC（四），android应用开发基础课件
m0_64604636的博客
12-10 432
//获取屏幕约束 var divConstraints = document.querySelector(‘div#constraints’) function gotMediaStream(stream){ var videoTrack = stream.getVideoTracks()[0]; var videoConstraints = videoTrack.getSettings(); divConstraints.textContent= JSON.stringify(videoConstrain
WebRTC学习（一）WebRTC了解
IDoWhatIDo_92761的博客
05-11 3225
一：WebRTC学习了解   （一）WebRTC应用场景   （二）WebRTC的难点   （三）学习流程   （四）学习目标 二：WebRTC介绍   （一）概述   （二）WebRTC可以实现的功能   （三）WebRTC学习内容 三：WebRTC原理与架构   （一）核心层解析   （二）引擎层：音频引擎、视频引擎、传输模块 补充：虽然UDP很适合实时通讯，但是也有需要使用TCP的场景 四：WebRTC目录结构   （一）主目录结构   （二）WebRTC Module目录 五：WebRTC运行机制
WebRtc学习资料整理
fishmai的专栏
12-13 1282
很久没有写了，尤其是技术文章，总感觉很难受。这里总结一下最近的学习内容。 官网永远是最重要，但同时也是最容易忽略的学习途径。So you should look official websites firtsly.。 先看一看基础概念的解释 WebRTC 相關縮寫名詞簡介 推荐一种方式，打开官方给的例子，然后通过浏览器调试，定位到控制到就能够看到这个流程了。We
webrtc中tcc的实现原理，通过plantuml绘制时序图
最新发布
02-27
<think>好的，用户现在想了解WebRTC中TCC的实现原理，并要求用PlantUML绘制时序图。首先，我需要回顾一下之前和用户的对话历史。用户之前询问了TCC和REMB的区别，我已经详细介绍了它们的核心原理、工作流程、适用场景等，现在用户希望深入理解TCC的具体实现。 接下来，我需要明确用户的需求。用户可能是一位开发者，正在学习WebRTC的拥塞控制机制，或者是在实际项目中需要优化网络传输。用户之前已经了解了TCC的基本概念，现在需要更底层的实现细节和时序图来辅助理解。这可能意味着用户希望将理论知识应用于实际开发或问题排查中。 首先，我需要详细解释TCC的实现原理，包括发送端如何标记数据包、接收端如何反馈、发送端如何计算带宽等。这部分需要结构清晰，分步骤说明。然后，绘制PlantUML时序图，展示发送端、接收端以及可能的中继服务器的交互过程。需要注意时序图的准确性和易读性，确保每个步骤对应实现原理中的描述。 在思考过程中，我需要确认TCC的具体实现步骤。例如，发送端在RTP头部添加TransportSequenceNumber扩展，记录发送时间；接收端收集这些信息，生成Transport Feedback报文，并通过RTCP发送回发送端；发送端根据反馈计算延迟梯度，调整码率。这些步骤需要准确无误地呈现。 同时，用户可能希望了解TCC与其他机制（如REMB）的不同之处，在解释实现原理时，可以适当对比，但重点应放在TCC本身。另外，用户可能需要知道TCC的优势，比如基于延迟的拥塞控制更及时，适应高动态网络环境，这些也可以在解释中提及。 绘制时序图时，要确保每个环节的顺序正确。例如，发送端发送带有序列号和时间戳的RTP包，接收端接收后记录到达时间，然后生成反馈报文返回，发送端处理反馈并调整码率。需要检查PlantUML语法是否正确，避免出现错误导致无法生成图形。 可能遇到的挑战是如何将技术细节简化，让用户容易理解，同时保持专业性。需要平衡深度和易懂性，避免过于晦涩。此外，需要确保PlantUML代码的正确性，可能需要自己先验证一遍，或者在回答中提示用户如何使用该代码生成图形。 最后，总结部分需要概括TCC的关键点，并强调其优势和适用场景，帮助用户形成整体理解。同时提醒用户TCC需要两端支持，可能在部署时需要注意兼容性。 现在，我需要组织这些思考内容，以结构化的方式呈现给用户，确保逻辑清晰，步骤明确，同时提供可用的PlantUML代码，方便用户直接使用。检查是否有遗漏的步骤或错误的信息，确保回答准确且完整。</think>以下是WebRTC中TCC（Transport-Wide Congestion Control）的实现原理及其PlantUML时序图详解： --- ### **TCC实现原理** #### 核心步骤 1. **RTP包标记** 发送端在**每个RTP包头部**添加`Transport-Wide Sequence Number`扩展（RFC 8888），记录**全局递增的包序列号**和**发送时间戳**。 2. **接收端反馈** 接收端通过RTCP协议中的`Transport Feedback`报文（RFC 4585）反馈以下信息： - 收到的包序列号范围 - 每个包的**到达时间**（微秒级精度） - 丢失的包序列号 3. **发送端计算** 发送端根据反馈数据计算两个关键指标： - **延迟梯度**（Inter-Arrival Delta）：相邻包的到达时间差变化 - **传输层延迟增长趋势**（基于Kalman滤波器算法） 通过上述指标判断网络拥塞程度，动态调整发送码率。 --- ### **PlantUML时序图** ```plantuml @startuml participant "发送端" as Sender participant "网络" as Network participant "接收端" as Receiver Sender -> Sender: 为每个RTP包标记\nTransportSequenceNumber和发送时间戳 Sender -> Network: 发送RTP包（Seq=1,2,3...） Network --> Receiver: 转发RTP包（可能丢包/乱序） Receiver -> Receiver: 记录包到达时间\n并检测丢包 Receiver -> Sender: 发送Transport Feedback RTCP报文\n（包含到达时间、丢包信息） Sender -> Sender: 计算延迟梯度\n和网络状态 alt 网络拥塞 Sender -> Sender: 降低发送码率 else 网络空闲 Sender -> Sender: 提高发送码率 end @enduml ``` --- ### **关键算法解析** #### 延迟梯度计算（伪代码） ```python # 接收端记录的包到达时间 packet_arrival_times = { seq1: t1, seq2: t2, ... } # 发送端计算的延迟变化 for i in range(1, n): send_delta = send_time[i] - send_time[i-1] arrive_delta = arrive_time[i] - arrive_time[i-1] delta = arrive_delta - send_delta if delta > threshold: # 判断拥塞 trigger_congestion_control() ``` --- ### **技术优势** 1. **精确的延迟监控** 通过微秒级时间戳差异检测网络拥塞，比传统丢包检测快5-10倍。 2. **跨路径统一控制** 全局序列号机制可同时监控音频、视频、数据等多条流的状态。 3. **公平性保障** 使用`Additive Increase Multiplicative Decrease`（AIMD）算法避免带宽抢占。 --- ### **实际部署注意** 1. **RTP头部扩展协商** 需在SDP中通过`a=extmap`声明TransportSequenceNumber扩展： ```sdp a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01 ``` 2. **反馈频率优化** 通常每50ms发送一次Transport Feedback报文，突发场景可缩短至20ms。 --- 该机制已被集成到WebRTC的`SendSideCongestionController`模块中，是当前实时通信场景的最优解之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

等风来不如迎风去

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值