Why WebRTC|“浅入深出”的工作原理详解
WebRTC可以被看作是一个不需要安装任何插件或者下载任何额外程序就能运行的浏览器原生实时通信手段。不同的客户端通过(相同或不同)浏览器跳转到同一个 URL 就能实现实时互通、看见彼此。但这只是“上帝视角”的说法,其中包含的技术框架和实现细节远没那么简单。
在我们开始讨论 WebRTC 是如何工作之前,先来厘清几个关键的技术概念。
P2P
可以实现实时点对点音视频(即多媒体)通信是 WebRTC 最为显著的一个特征。为了通过 Web 浏览器进行通信,要求每个人的 Web 浏览器都需要同意“开始接通”,知道对方的网络定位,并且还需要绕过网络安全和防火墙保护并实时传输所有多媒体通信才能够得以实现。
在基于浏览器的对等通信中,如何定位和建立与另一台计算机的 Web 浏览器的网络连接并进行高效数据传输是其最大的挑战之一。
当你想要访问一个网站时,一般都是直接输入网址或者点击连接跳转来进行页面查看。在这个过程中,其实是你向通过提供网页(HTML,CSS和JavaScript)进行响应的服务器发出了一个请求。而发出这个访问请求的关键是你向已知且易于定位的服务器(通过DNS)发出HTTP请求,并获得响应(即网页)。
上述场景中出现的问题就可以通过 P2P(点对点传输)技术来解决,而 WebRTC 本身就是基于点对点(Peer-to-Peer)连接的,其中的 RTCPeerConnection
就是负责建立 P2P 连接以及传输多媒体数据的 API。
防火墙和 NAT 穿透
日常生活中,我们大都是通过工作或家庭网络进行互联网访问,这时候我们的设备通常是在防火墙和网络访问转换设备(NAT)的后面,因此并没有分配静态的公共 IP 地址。更进一步来看,NAT 设备会将防火墙内部的私有 IP 地址转换为面向公众的IP地址,以确保对可用公共 IP 地址的安全性和 IPv4 限制。
为了使 WebRTC 技术正常工作,首先会向 STUN 服务器请求一个面向公众的 IP 地址。如果这个请求得到了回应,并且我们收到了面向公众的 IP 地址和端口,就可以告诉其他人如何直接和我们建立连接。而别人也可以使用 STUN 或 TURN 服务器执行相同的操作。
接下来,让我们一起来看看 WebRTC 的最关键的基础组件架构,这对于我们后续理解 WebRTC 的工作原理同样十分重要。
基本组件架构
WebRTC 的组件架构分为两层:应用层和核心层。上图中的绿色部分显示的是 WebRTC 提供的核心功能,而深紫色部分是浏览器提供的 JS 的 API(即浏览器对 WebRTC 核心层 C++ API 做了一层封装,封装成了 JS 接口)。
图片最上面的浅紫色指入箭头是上层应用,可以在浏览器中直接访问浏览器提供的 API,最终调用到核心层。
WebRTC的核心层中是没有视频的渲染的,所有的渲染都需要浏览器层自己做。
WebRTC 中其实涉及了许多复杂的技术议题,比如音频采集、视频采集、编解码处理器等。由于我们本章内容是希望可以为大家呈现一个简单易懂的 WebRTC 工作流程是,因此关于更多 WebRTC 技术的实现细节在本章我们先不一一讨论,如果感兴趣的小伙伴可点击进入#WebRTC#专栏自行查看。
关于WebRTC的工作流程,我们从“如何实现一个 1 对 1 通话”场景来看可能会更直观一些:
双方先调用
getUserMedia
打开本地摄像头;向信令服务器发送加入房间请求;
Peer B 接收到 Peer A 发送的 offer SDP 对象,并通过PeerConnection的
SetLocalDescription
方法保存 Answer SDP 对象并将它通过信令服务器发送给 Peer A。在 SDP 信息的 offer/answer 流程中,Peer A 和 Peer B 已经根据 SDP 信息创建好相应的音频 Channel 和视频 Channel,并开启Candidate 数据的收集,Candidate数据(本地IP地址、公网IP地址、Relay服务端分配的地址)。
当 Peer A 收集到 Candidate 信息后通过信令服务器发送给 Peer B。同样的过程 Peer B 对 Peer A 也会再发送一次。
这样 Peer A 和 PeerB 就相互交换了媒体信息及网络信息,如果能达到一致(找到交集),就可以开始通讯了。
为了帮助大家更好地了解 WebRTC 技术,我们最新一期的「 Agora talk」,邀请到了来自声网Agora WebRTC 团队的工程师。
将会围绕“下一代 WebRTC -- 实时通信的展望” 的主题和大家分享探讨更多有用又有趣技术细节。
议题:下一代 WebRTC——实时通信的展望
????直播时间:6月10日(周四) 晚 8:00
????????????主讲人:郭泽宇 声网Agora Web SDK 开发工程师
郭泽宇,声网Agora Web SDK 前端开发工程师。熟悉 WebRTC 通信技术栈以及相关协议规范,目前负责 Web SDK 4.x 版本的研发工作。
????演讲内容简介:
介绍 WebRTC Next Version 草案以及其中涉及到的使用场景。
为了满足WebRTC NV 中的场景需要针对现有 WebRTC 规范做出哪些改进。
WebRTC NV 当前的进展。
- 扫 码 报 名 -
????
点击【阅读原文】即可进行活动预约~
Why WebRTC|“浅入深出”的工作原理详解相关推荐
- 【TensorFlow】TensorFlow从浅入深系列之五 -- 教你详解滑动平均模型
本文是<TensorFlow从浅入深>系列之第5篇 TensorFlow从浅入深系列之一 -- 教你如何设置学习率(指数衰减法) TensorFlow从浅入深系列之二 -- 教你通过思维导 ...
- 计算机设备驱动的作用,浅谈电脑驱动程序的工作原理 详解电脑驱动程序意义...
本文主要是关于电脑驱动程序的相关介绍,并着重对电脑驱动程序的工作原理及意义进行了详尽的阐述. 电脑驱动程序 1 驱动程序是什么 驱动程序的概念,驱动程序实际上是一段能让电脑与各种硬件设备通话的程序代码 ...
- 浅入深出之Java集合框架(上)
Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到浅入深出之Java集合框架(下). ...
- 浅入深出之Java集合框架(中)
Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到浅入深出之Java集合框架(下). ...
- Angular浅入深出系列 - 写在前面
本系列目录: 写在前面 基础知识 控制器(Controller) 作用域(Scope) 集合(Collection) 模块(Module) 依赖注入(Dependency Injection) 服务( ...
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- 处理中文乱码_浅入深出:一次提问引发的深思,从此再也不怕“乱码”问题
这是恋习Python之浅入深出系列第3篇原创首发文章 作者|丁彦军 来源|恋习Python(ID:sldata2017) 转载请联系授权(微信ID:2394608316) 近日,有位粉丝向我请教,在爬 ...
- Java 注解 (Annotation)浅入深出
Java 注解 (Annotation)浅入深出 本文主要参考与借鉴frank909 文章,但更为简单,详细. Annotation 中文译过来就是注解.标释的意思.Annotation是一种应用于类 ...
- JavaScript中函数作用域之精辟,函数原理的浅入深出,及程序执行预编译之通天编译???
1.程序执行的前一刻会先将代码预编译一遍,如果有语法错误则直接终止程序运行 //预编译之通天编译 --> 在执行的前一刻,会把文件通天扫描一遍 /** //预编译 函数整体提升(即函数会放到程序 ...
最新文章
- oracle新建用户名和密码,Oracle安装后忘记用户名或密码+创建新登陆用户
- SWIG和PInvoke学习(1)
- GAN眼中的图像翻译(附神奇歌单)
- 如何实现快速的diff工具(windiff, winmerge)?
- matlab 中all和any函数
- Bitcoin 中的挖矿算法(6) 难度调整
- 存储过程循环遍历一个月的每一天的函数_JavaScript 循环:如何处理 async/await
- java getparametermap_重写getParameterMap后,报错 ,
- ASP.NET向Javascript传递变量
- YUV采样及存储格式
- windows上cppcheck检查不出任何错误解决
- oracle体系结构图
- Physical Standby Database Failover
- Vijos训练计划 1-1 计数问题
- Wind Python案例
- SiamRPN 论文理解
- 使用 WebSphere eXtreme Scale 处理事件流
- 安全行业从业人员自研开源扫描器合集
- python web实例
- 大一第一学期期末C语言程序设计笔记(五)