WebRTC手记 —— 建立连接、原理剖析

最新推荐文章于 2025-07-24 09:02:01 发布
置顶 最新推荐文章于 2025-07-24 09:02:01 发布
阅读量2.4k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端开发 - WebRTC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32614411/article/details/81170076

 WebRTC自身并不提供ICE Servwr（NAT穿透服务器）（ICE服务器：STUN服务器 / TURN服务器），ICE服务器需要自己实现。

Signaling Server（信令服务器），需自己实现，它是在客户端A和客户端B之前传递彼此的SDP信息和candidate信息。ClientA和ClientB通过这些信息建立P2P连接来传送音视频数据。由于网络环境的复杂性，并不是所有的客户端之间都能够建立P2P连接，这种情况下就需要有个relay服务器做音视频数据的中转。

说明：STUN服务器 、TURN服务器、relay服务器的实现在WebRTC源码中都有示例

接下来将从使用层面描述WebRTC建立连接的流程，至于深层次的内容，将持续更新

场景：ClientA向ClientB发起视讯请求

  • 【ClientA创建PeerConnection对象】→【ClientA打开本地音视频设备】→【ClientA将音视频数据封装成MediaStream添加到PeerConnection中】
  • 【ClientA调用PeerConn
最低0.47元/天 解锁文章

200万优质内容无限畅学
WebRTC的工作原理
LiveVideoStack
06-16 633
我将从不同角度向大家解释WebRTC的工作原理。最后，它们将向你呈现出WebRTC的完整面貌。
深入浅出 WebRTC 通信原理：从点对点到多人会议的全方位解析
2401_86113453的博客
09-11 1711
随着远程办公和在线协作的普及，音视频通信的需求日益增长。无论是两点之间的通信还是多人会议，WebRTC（Web Real-Time Communication）作为一种开源技术，提供了低延迟的实时通信能力。它允许浏览器或移动设备通过直接的点对点（P2P）连接进行音频、视频和数据的实时传输。它使得不依赖中间服务器的实时通信成为可能，尤其适用于视频聊天、文件共享、音频会议等场景。在本文中，我们将深入介绍从两点之间的通信原理到底层协议，再到多人会议的实现。
webrtc 代码学习（三十四） SetLocal 和 SetRemote
Miracle_包子
11-13 2562
SetLocal 和 SetRemote 作者：LanPZzzz 文章目录1. 获取到 offer， SetRemoteDescription，然后CreateAnswer2. CreateAnswer 后，回调 OnSuccess 时候，SetLocalDescription，经过上面的CreateAnswer 返回的 webrtc::SessionDescriptionInterface* d...
一文带你了解webrtc基本原理（动手实现1v1视频通话）
王清培的个人博客
08-06 5520
webrtc (Web Real-Time Communications) 是一个实时通讯技术，也是实时音视频技术的标准和框架。大白话讲，webrtc是一个集大成的实时音视频技术集，包含了各种客户端api、音视频编/解码lib、流媒体传输协议、回声消除、安全传输等。对于开发者来说可以借助webrtc非常方便的实现低延时视频通话能力。现在主流的直播系统、会议系统基本都是基于webrtc来实现。...
webrtc建立连接的过程
Cosmic Lover
04-23 1353
WebRTC 是个神奇的技术，让浏览器直接进行点对点（P2P）音视频通话或数据传输，不用每次都靠服务器中转。想知道 Alice 和 Bob 是怎么通过 WebRTC 建立视频通话的吗？下面是整个过程，拆分成几个简单步骤，带你搞清楚每一步都在干啥！，两者配合让 WebRTC 在复杂的网络环境下也能实现高效的 P2P 通信。信令服务器只是个“临时助手”，真正的音视频数据靠 P2P，省服务器、降延迟！如果你觉得需要调整语气（比如更专业或更简短），或者想加点图表（比如流程图），告诉我，我可以再改！
WebRTC学习笔记——建立连接
irainsa的博客
03-10 599
WebRTC是一个开源的项目，可以提供浏览器，手机应用之间实时通信能力。同时，这一功能已经内置于现代浏览器中，所以它可以做到无须借助第三方软件或插件便可以在开发网络中传输高质量音视频流。主要JavaScript APIMediaStream 音视频流对象RTCPeerConnection 端对端音视频连接对象RTCDataChannel 端对端数据通道对象适用设备Firefox，Opera，Chrome浏览器支持并默认启用了WebRTC功能，并且能够实现互相通信。
流媒体学习之路(WebRTC)——音频NackTracker优化思路（8）
qw225967的博客
06-12 1707
音频NackTracker的逻辑与视频NackRequest有相似的地方，但是相比多了播放时间以及丢包的等待估计，因此限制更多。在同样的模拟环境下，原NackTracker的逻辑丢包明显。这与音频的特点有关，音频可以合理的丢弃数据并不会明显的影响听感，但是视频少一个数据就无法组成完整的图像。因此WebRTC为了保证实时性，增加了播放时间对比以及丢包参考，如果想要保证Nack的效果与视频一致，那么也需要调整一下它的频率和最大限制。
WebRTC指纹——深度分析（中篇）
最新发布
守城小轩的技术窝棚
07-24 760
本文深入分析了WebRTC协议栈中的可识别特征，揭示了不同实现之间的显著差异。研究通过STUN/TURN协议特征、DTLS层深度特征、媒体/数据通道差异及网络行为模式等维度，对主流WebRTC应用（如Google Hangouts、Facebook Messenger、Snowflake等）进行了协议层指纹分析。实验结果表明，这些特征差异构成有效的识别依据，但WebRTC DTLS流量在实际网络中的稀缺性既增加了被识别风险，也为检测带来挑战。研究为设计更隐蔽的WebRTC规避系统提供了重要技术参考。
GlenGithub#AndroidNote-1#WebRTC——AudioTrack-VideoTrack解析1
07-25
//一个list里面存的是音频的渲染器//构造方法//添加音频渲染器，与去除音频渲染器//释放掉AudioTrack//方法含义同AudioTrackpriva
webrtc建立连接过程
weixin_43968447的博客
01-18 1061
clientA
webrtc架构分析
04-29
WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的技术。本文对其源码框架进行分析
WebRTC 的工作原理解析
yinshipin007的博客
03-08 563
顾名思义，TURN 是一个中继服务器，当两个对等体之间无法直接连接时，它可以作为传输数据，音频，视频的媒介。但是，在NAT的存在下，它就像住在一个酒店，其房间的电话号码是隐藏在外面的世界，来到酒店的电话在接待处处理，并根据要求进一步重定向到您的房间。因为世界上有很多个浏览器，而且一个系统里可以同时存在好多个浏览器，浏览器也没有像电话号码一样的唯一 ID，虽然没有唯一的 ID，但是，浏览器所在的系统有一个唯一的 ID，就是 IP 地址，这个 IP 地址可以用来定位。当有人想给你打电话时，也需要同样的过程。
WebRTC1-原理探究
前端-后端学习之路
09-28 5849
1.抛砖引玉WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流或/和音频流或者其他任意数据的传输 实时查看WebRTC在浏览器中的支持情况： http://caniuse.com/#search=webRTC FirFox 45+,Ch
WebRTC原理解析
JunChow
05-07 441
浏览器本身不支持点对点建立信道进行通信，需通过服务器进行中转。因此浏览器之间一次通信需通过两段信道，通信效率同时受制于两段信道宽度，因此并不适合数据流的传输。 WebRTC是浏览器实时通信RTC的提供JS接口，JS接口通过信令建立浏览器点对点(peer-to-peer,P2P)的信道，信道可发送任何数据并无需经过服务器。 WebRTC提供三个API MediaStream用于获...
WebRTC基本原理
newchenxf的专栏
12-12 2382
什么是webRTC webRTC（web Real Time Communations）是一个开源的，提供各种终端（比如PC浏览器，android/ios客户端）实时通信（特别是音视频）的协议！ 对上层来说，就是一些接口调用。如果是浏览器，那就是java script API，如果是客户端，也有相应的库支持。 webRTC的应用场景： 音视频通话/多人会议 桌面共享/协助 云游戏 直播/在线教育 那么，两个webRTC应用终端之间，如何通信？这需要中间商（放心，不赚差价^^）。 中间商就包括，信令服务器
【Javascript】【WebRTC】WebRTC从原理到实现（六）：信令设计
天天向上 Up Up Up (*^▽^*)
01-11 677
两个设备之间建立RTC连接，需要知道彼此的地址，设备信息，媒体信息等 信令服务器帮助两个设备交换这些信息，只要这些消息交换完成了，就可以建立连接 具体信令设计是可以变通的，也不一定要用Socket，这里提供一种实现方案 （网络上有很多现成的ICE服务器，按教程搭建即可，这里不再介绍） ...
WebRTC 的工作原理解析 | 掘金技术征文
weixin_34072637的博客
06-03 962
介绍 WebRTC 是一个目前正在开发的开源项目，旨在提供 Web 应用程序之间实时的、点对点通信。 WebRTC 提供了简单的 JavaScript API，可以帮助开发人员轻松构建具有实时音视频传输功能的 Web 应用程序。 WebRTC 也计划支持手机的原生应用。在 WebRTC 提供的 API 之下，其实隐藏了 WebRTC 底层的实现原理，所以除了使用 API 之外，很有必要了解一下 ...
WebRTC入门与实战 --- WebRTC原理与架构
SmallBottle-CGWLMX的博客
11-07 2670
上一篇我们对WebRTC进行了整体的介绍和学习，作为技术人员，我们学习过程中是要了解一个技术的原理的，接下来我们就来学习一下WebRTC的原理与架构，下边是官网的架构图： 架构图颜色标识说明： （1）应用层：紫色部分是Web开发者API层； （2）核心层：蓝色实线部分是面向浏览器厂商的API层（也就是红色框标内模块，也是本人专注研...
WebRTC系列-网络传输之3网络连接的建立过程
HOSTEN的博客
06-18 885
在WebRTC中是通过`connection`这个类来表示一个网络链接，对于每一个connection来说，都由本地的`Port`(*本地遍历后的网络的三要素：IP、 端口 、传输协议*)和远端的`Candidate`(*消息接收到的对端的网络的三要素：IP 、端口、 传输协议*)组成，webrtc通过这两个就可以建立一个链接；........................
webrtc peer建立连接之后如何切换摄像头
11-27
WebRTC（Real-Time Communication）允许浏览器之间的实时音视频通信，包括屏幕共享。当你在WebRTC Peer-to-Peer (P2P) 连接中需要切换摄像头时，通常涉及到以下几个步骤： 1. **获取媒体流**：首先，你需要请求用户的权限，让他们选择要使用的摄像头。这通常是通过`navigator.mediaDevices.getUserMedia()`方法完成的，传入`video: true`参数。 ```javascript async function getUserMedia() { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); // 在这里，你可以设置stream作为localDescription对象 } ``` 2. **更新本地描述（Local Description）**：如果你已经有一个活动的连接并且想要切换摄像头，你需要创建一个新的`RTCPeerConnection`实例，并将新的媒体流添加到现有的描述对象中。 ```javascript const pc = new RTCPeerConnection(); pc.addStream(newStream); // 将新媒体流替换掉旧的 ``` 3. **发送更新**：如果你正在使用某种信令机制（如STUN、TURN服务器或WebSocket），你需要更新远程方的描述，让他们也切换到新的摄像头流。 4. **通知对端**：如果对方支持协商变化，他们会在收到新的描述后自动切换到新的摄像头源。 ```javascript pc.setLocalDescription(localDesc); // 更新本地描述并发送给对端 ``` 5. **处理兼容性**：并非所有客户端都能无缝切换，特别是对于只支持单摄像头流的情况，你可能需要在对端处理这个变更，或者提供指导让用户手动刷新页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值