webrtc为Google提供动力的技术与视频群聊,Facebook Messenger和不和谐

9分钟内您需要了解的有关Web RTC的所有信息 (Everything you need to know about Web RTC in 9 minutes)

作者注 (Author’s Note)

Greeting readers,

问候读者,

This article is part of “I Grow with Startups” series, which consists of a variety of Tech tutorials, news, and tips for software development:

本文是“ 我与初创企业一起成长”系列的一部分,系列由各种技术教程,新闻和软件开发技巧组成

  1. Build a Well Structured 3-tier Architecture with Node.js (Part 1) — ES6

    使用Node.js构建结构良好的3层架构(第1部分)— ES6

  2. 2 Simple Tips to Increase Your Team Code Quality

    2条提高团队代码质量的简单技巧

  3. The Perfect Structure to Authenticate & Authorize Your API with Node.js

    使用Node.js进行API身份验证和授权的完美结构

  4. I built a M.E.R.N codebase in an hour (Part 2)

    我在一个小时内建立了一个MERN代码库 (第2部分)

  5. How to build REST APIs with Java & MySQL using Tomcat

    如何使用Tomcat使用Java和MySQL构建REST API

  6. Build your own Mailing API using Nodemailer, Gmail & Google OAuth2

    使用Nodemailer,Gmail和Google OAuth2构建自己的Mailing API

  7. WebRTC — The technology that powers Google Meet, Facebook Messenger

    WebRTC —推动Google Meet,Facebook Messenger的技术

  8. Say Hello to the new Github CLIs

    向新的Github CLI打个招呼

  9. Easy Setup with Java, Springboot, Kafka

    使用Java,Springboot,Kafka轻松设置

  10. What it takes to have a successful team cooperation

    成功的团队合作需要什么

  11. How to deploy an application to AWS using Docker, EC2, ECS, and ECR

    如何使用Docker,EC2,ECS和ECR将应用程序部署到AWS

  12. We save 45% of the total cost by hosting our client to Cloud Storage

    通过将客户托管到Cloud Storage,我们可以节省总成本的45%

Thanks for visiting this series, and enjoy reading!

感谢您访问本系列,并喜欢阅读!

Image for post
Image by Google Developers (2013)
Google开发人员提供的图片(2013年)

实时通讯的历史 (History of Real-time Communication)

  • Around the 2010s, real-time communication was only available using additional software, plugins, or Adobe Flash.

    在2010年代左右,只能使用其他软件,插件或Adobe Flash进行实时通信。
  • In 2013, the first cross-browser video call between Chrome & Firefox was introduced.

    2013年,Chrome和Firefox之间进行了首次跨浏览器视频通话。
  • In 2014, the first cross-browser data transfer occurred, opening to a new-emerging trend in real-time communication via the client-side.

    2014年,第一次跨浏览器数据传输发生,通过客户端进行实时通信打开了一个新兴的趋势。

Today, it is known as the Web RTC that we use every day in Chrome, Mozilla Firefox, Opera, Safari, Edge, iOS, and Android.

今天,它被称为Web RTC ,我们每天都在Chrome,Mozilla Firefox,Opera,Safari,Edge,iOS和Android中使用它。

Image for post
Source by CometChat
来源:CometChat

总览 (Overview)

WebRTC stands for Web Real-Time Communication, which is a networking technology introduced in 2011 by Google to enable real-time audio, video, and data transmission across the web and native browsers.

w ^ ebRTC代表Web浏览eal- 定时器沟通,这是由谷歌在2011年推出,使实时音频,视频和网络上和原生浏览器的数据传输的网络技术

“Its mission is to enable rich, high-quality RTC applications to be developed for the browser, mobile platforms, and IoT devices, and allow them all to communicate via a common set of protocols.”

“其使命是使丰富,高质量的RTC应用程序能够为浏览器,移动平台和IoT设备开发,并允许它们所有人通过一组通用协议进行通信。”

WebRTC allows web apps to create Peer-To-Peer communication. WebRTC is a vast topic, so in this post, we’ll focus on the following issues of WebRTC:

WebRTC允许Web应用程序创建对等通信。 WebRTC是一个广泛的主题,因此在本文中,我们将重点讨论以下WebRTC问题:

  1. Why do developers & companies love Web RTC?

    为什么开发人员和公司喜欢Web RTC?
  2. What happens during the P2P connection

    P2P连接期间会发生什么
  • Signaling

    发信号
  • NATs & ICE

    NAT与ICE
  • STUN & TURN Server

    STUN&TURN服务器
  • VP9 Video Codec

    VP9视频编解码器

3. WebRTC APIs

3. WebRTC API

4. Security

4.安全性

为什么开发人员和公司喜欢Web RTC? (Why do developers & companies love Web RTC?)

1.免费开源 (1. Free open source)

  • It provides browsers with end-to-end direct communication and allows developers to facilitate this connection easily.

    它为浏览器提供了端到端的直接通信,并使开发人员可以轻松地实现这种连接。

2.速度提升 (2. Speed Enhancement)

  • No longer needs to be routed through a server; it reduces latency and bandwidth consumption.

    不再需要通过服务器进行路由; 它减少了延迟和带宽消耗。
  • Direct communication improves the speed of data transfer & file sharing.

    直接通信可提高数据传输和文件共享的速度。

3.无需第三方应用 (3. No third party app required)

  • Requiring no additional software, plugins, or continuous server involvement (Well, it does, but only in the beginning, you will know why later)

    不需要额外的软件,插件或持续的服务器参与(确实如此,但仅在开始时,您会知道稍后的原因)
  • Easily be embedded in any websites and connect peers across the internet.

    轻松地嵌入到任何网站中,并通过Internet连接对等方。

4.易于实施 (4. Easy to implement)

  • Less time and effort to facilitate peer-to-peer (P2P) connection.

    更少的时间和精力来促进对等(P2P)连接。
  • All the functionality can be done through the client-side.

    所有功能都可以通过客户端来完成。
  • Developers just need to download a WebRTC compatible browser and use

    开发人员只需下载兼容WebRTC的浏览器并使用

5.兼容 (5. Compatible)

Image for post
Image by CodeBurst
图片来自CodeBurst
  • Supported by most popular browsers: Microsoft Edge, Google Chrome, Mozilla Firefox, Safari, Safari, Opera, Vivaldi.

    最受欢迎的浏览器支持:Microsoft Edge,谷歌浏览器,Mozilla Firefox,Safari,Safari,Opera,Vivaldi。
  • Supported by Android, Chrome OS, Firefox OS, BlackBerry 10, iOS, Tizen.

    受Android,Chrome OS,Firefox OS,BlackBerry 10,iOS,Tizen支持。

6.提供跨许多浏览器的安全连接 (6. Provide a safe connection across many browsers)

  • Encryption is mandatory for all of the WebRTC components.

    所有WebRTC组件都必须进行加密。
  • Since it is not a plugin, it runs inside the browser’s sandbox without creating a new process so that no malware can get into the user’s system.

    由于它不是插件,因此可以在浏览器的沙箱中运行,而无需创建新进程,因此不会有恶意软件进入用户系统。
  • No need to keep track of the updates. With the automatic updates of the browser’s version, the user gets the patch as soon as it is available.

    无需跟踪更新。 通过自动更新浏览器的版本,用户可以在可用补丁后立即获得补丁。

P2P连接期间会发生什么 (What happens during the P2P connection)

Image for post
Image by PubNub
图片来自PubNub

To connect two browsers, Web RTC is required to perform five steps to set up a P2P connection.

要连接两个浏览器,需要Web RTC执行五个步骤来建立P2P连接。

  1. Signal processing to remove ambient noise from the audio or video.

    进行信号处理以消除音频或视频中的环境噪声。
  2. Codec handling to compress and decompress the audio or video.

    编解码器处理以压缩和解压缩音频或视频。
  3. Routing from one peer to another through firewalls, (NATs), and relays to create an Interactive Connectivity Establishment (ICE)

    通过防火墙,NAT和中继从一个对等方路由到另一个对等方以创建交互式连接建立(ICE)
  4. User data is encrypted before transmitting across connections.

    跨连接传输之前,用户数据已加密。
  5. Managing bandwidth to the user what each peer has to give

    管理给用户的带宽,每个对等端必须提供的带宽

发信号 (Signaling)

  • P2P connections in the browser are established by a server to ensure all peers agree to the session.

    浏览器中的P2P连接由服务器建立,以确保所有对等方都同意会话。
  • Information like session keys, error messages, media metadata, codecs, bandwidth, and public IP address and ports are shared between peers to create the connection.

    在对等方之间共享会话密钥,错误消息,媒体元数据,编解码器,带宽,公共IP地址和端口之类的信息以创建连接。
  • The server signals to both peers to determine what media format to use and what each peer wants to send to the other.

    服务器向两个对等方发出信号 ,以确定要使用的媒体格式以及每个对等方要发送给另一对等方的媒体格式。

Image for post

网络地址转换(NAT)和ICE (Network Address Translations (NATs) and ICE)

NATs translate a private IP address found on devices like a home router to a public IP address. Firewalls and NATs slow the process by blocking specific protocols or ports. The solution WebRTC uses is a framework called ICE.

NAT将在家庭路由器等设备上找到的专用IP地址转换为公用IP地址。 防火墙和NAT通过阻止特定协议或端口来减慢该过程。 WebRTC使用的解决方案是一个称为ICE的框架。

ICE establishes a P2P connection over the internet by trying all connections in parallel and selecting the most efficient path. There are two types of connections: STUN & TURN

ICE通过并行尝试所有连接并选择最有效的路径来建立Internet上的P2P连接。 有两种连接类型: STUN和TURN

STUN服务器 (STUN Servers)

It first works connecting through a STUN (Session Traversal Utilities for NAT) server to get a direct link through the network address.

它首先通过STUN(用于NAT的会话遍历实用程序)服务器进行连接,以通过网络地址获得直接链接。

A STUN server provides the requestor a public IP address to communicate with others. Its purpose is to help a requestor answer the question, “What’s my IP Address?”

STUN服务器为请求者提供一个公共IP地址,以便与他人进行通信。 其目的是帮助请求者回答以下问题:“我的IP地址是什么?”

STUN服务器如何工作 (How STUN servers work)

Image for post
STUN and TURN server interaction with two peers
STUN和TURN服务器与两个对等方的交互

To set up a connection with other peers, an endpoint is required to know its public IP to share with others.

要建立与其他对等方的连接,端点需要知道其公共IP以与他人共享。

  1. When an endpoint (Calvin) is behind a NAT/Firewall, it can only identify its local IP address, and the other (Elana) cannot connect to the local IP because of the firewall security.

    当端点(Calvin)位于NAT /防火墙之后时,它只能识别其本地 IP地址,而另一个(Elana)由于防火墙的安全性而无法连接到本地IP。

  2. This endpoint will ask for help from the STUN server to provide its public IP address and a type of NAT.

    该端点将向STUN服务器寻求帮助,以提供其公共IP地址和NAT类型。
  3. The other endpoint (Elana) can attempt the connection between the two using the given public IP address from the STUN server.

    另一个端点(Elana)可以使用来自STUN服务器的给定公共IP地址尝试两者之间的连接。

  4. If successful, media will flow directly to each endpoint without a 3rd party or another server.

    如果成功,媒体将直接流向每个端点,而无需第三方或其他服务器。
  5. For security, all STUN servers will be dropped and wait for the next query.

    为了安全起见,所有STUN服务器都将被删除并等待下一个查询。

局限性—对称NAT (Limitations — Symmetric NAT)

However, the situation above may sometimes fail, and the PORT and IP number will be changed.

但是,上述情况有时可能会失败 ,并且PORT和IP号将被更改。

This situation is called “symmetric NAT” as the public IP address of the STUN server does not have enough capability to establish connectivity here, as the port would also need a translation.

这种情况称为“对称NAT”,因为STUN服务器的公共IP地址没有足够的能力在此处建立连接,因为端口也需要转换。

Some routers use Symmetric NAT, which is made to add another security layer to the endpoint or avoid many strangers to connect to your device. A Symmetric NAT not only translates the IP address from private to public but also translates ports.

某些路由器使用对称NAT,这是为了向端点添加另一个安全层或避免许多陌生人连接到您的设备。 对称NAT不仅将IP地址从私有转换为公共,而且还转换端口。

In other words, the router will only accept connections from known peers that the user previously connected to. Hence, another solution is made to ensure that the connection between two peers is successful is through the TURN server.

换句话说,路由器将仅接受来自用户先前连接的已知对等方的连接。 因此,提出了另一种解决方案以确保两个对等方之间的连接成功,即通过TURN服务器

为什么STUN服务器有用 (Why STUN servers are useful)

As a protocol, STUN is super fast, lightweight, and straightforward. It allows the media to travel directly to each other in a short time. STUN is beneficial to speed up the connection and get the result faster in real-time.

作为协议,STUN超级快速,轻巧且简单。 它允许媒体在短时间内彼此直接传播。 STUN有助于加快连接速度并实时更快地获得结果。

The scenario is similar when the user is using LAN to download the data, which is faster than downloading from the Wi-fi. Most importantly, it allows the media to travel directly between both endpoints. STUN can be used publicly and free.

当用户使用LAN下载数据时,情况类似,这比从Wi-fi下载速度更快。 最重要的是,它允许媒体直接在两个端点之间传播。 STUN可以公开免费使用。

TURN服务器 (TURN Servers)

TURN (Traversal Using Relays around NAT) server acts as relay servers incase the peer-to-peer connection dies. While STUN servers are used to establish the connection, TURN servers remain active throughout the association.

ŤURN(遍历周围可用的NAT)服务器充当中继服务器柜面对等网络连接的管芯。 使用STUN服务器建立连接时,TURN服务器在整个关联过程中保持活动状态。

A TURN server keeps relaying the media between the WebRTC peers. That is why the term “relay” is used to define TURN.

TURN服务器不断在WebRTC对等之间中继媒体。 这就是为什么使用术语“继电器”来定义TURN的原因。

Image for post
STUN server interaction with two peers (Source: Calvin Nguyen)
STUN服务器与两个对等服务器的交互(来源:Calvin Nguyen)

TURN服务器如何工作 (How TURN servers work)

This relay server is used to relay traffic if the STUN server fails, and it also has the STUN’s functions.

如果STUN服务器出现故障,则该中继服务器用于中继流量,并且还具有STUN的功能。

The TURN server is a STUN server with transmitting capability built-in. More specifically, TURN is used to relay audio/video/data streaming between peers, not signaling data.

TURN服务器是内置了传输功能的STUN服务器。 更具体地说,TURN用于在同级之间中继音频/视频/数据流,而不是信令数据。

  1. Follow the steps for STUN Servers

    请遵循STUN服务器的步骤
  2. If STUN fails, an end-user will create a connection with a TURN server, inform all peers to send data to the server, which is in charge of transferring data to the first end-user.

    如果STUN失败,则最终用户将与TURN服务器建立连接,通知所有对等方将数据发送到服务器,该服务器负责将数据传输给第一个最终用户。

One main reason why a STUN server is always used first is that the TURN server is too expensive, and uses massive bandwidth if HD Video is streamed online.

始终首先使用STUN服务器的一个主要原因是TURN服务器过于昂贵 ,并且如果在线播放高清视频会占用大量带宽。

VP9视频编解码器 (VP9 Video Codec)

One of the main features, why many people start to use WebRTC, is for video streaming. As live video becomes more mainstream and starts getting higher quality, it requires data transfer to be faster or the packet size to be smaller to be easily transferred.

为什么许多人开始使用WebRTC的主要功能之一是视频流 。 随着实时视频变得越来越主流并开始获得更高的质量,它要求数据传输更快或数据包大小更小以便于传输。

That is when VP9 Video Codec takes place to compress and decompress the audio or video. It helps stream video quicker and more apparent. By supporting VP8, Safari 12.1 can exchange live video with other peers.

那就是当VP9视频编解码器用于压缩和解压缩音频或视频时。 它有助于更​​快更清晰地流式传输视频。 通过支持VP8,Safari 12.1可以与其他对等交换实时视频。

Image for post

VP9, which is an improvement from VP8, is a video compression format owned by Google and created by On2 Technologies.

VP9是VP8的改进版,是Google拥有的视频压缩格式,由On2 Technologies创建。

The main feature is to conceal packet loss and clean up noisy images, as well as capture and playback capabilities across multiple platforms.

其主要功能是隐藏数据包丢失并清除嘈杂的图像,以及跨多个平台的捕获和回放功能。

With VP9, users can use WebRTC to stream a 720p video without packet loss or delay. It can also support a 1080p video call at the same bandwidth and helps reduce poor connections and data usage to avoid expensive costs for users.

借助VP9,用户可以使用WebRTC来流式传输720p视频,而不会丢失数据包或延迟。 它还可以在相同带宽下支持1080p视频通话,并有助于减少不良的连接和数据使用量,从而避免用户付出高昂的成本。

JavaScript API (JavaScript APIs)

There are three main Javascript APIs that handle audio capturing, video conferencing, and data transmission:

有三种主要的Javascript API,它们可以处理音频捕获,视频会议和数据传输:

媒体流 (MediaStream)

  • Utilizes a user’s camera and microphone to capture and stream audio and video. Using this API allows you to get access to input devices such as the microphone and the web camera.

    利用用户的摄像头和麦克风捕获和流式传输音频和视频。 使用此API,您可以访问输入设备,例如麦克风和网络摄像头。
  • When a developer integrates WebRTC into their website, they can create constraints on how they want the audio and video streamed. Limitations like the frame rate, size of the video frame, resolutions, and much more.

    当开发人员将WebRTC集成到他们的网站中时,他们可以对如何传输音频和视频创建约束。 局限性包括帧速率,视频帧的大小,分辨率等等。
  • This API was provided as part of HTML 5, whereas the other two APIs are explicitly offered for WebRTC.

    该API是HTML 5的一部分,而其他两个API是为WebRTC明确提供的。

RTCPeerConnection (RTCPeerConnection)

  • Send the captured stream of audio and video in real-time across the internet to another WebRTC endpoint. Using these APIs enables users to transmit audio and video captured by getUserMedia to other peers.

    通过Internet实时将捕获的音频和视频流发送到另一个WebRTC端点。 使用这些API,用户可以将getUserMedia捕获的音频和视频传输到其他对等方。
  • Has features to connect to a remote peer, maintain and monitor the connection, and close the connection once after it’s done.

    具有以下功能:连接到远程对等方,维护和监视连接,并在完成后关闭连接。

RTCDataChannel (RTCDataChannel)

  • Transmit arbitrary data. Each data channel is associated with an RTCPeerConnection.

    传输任意数据。 每个数据通道都与一个RTCPeerConnection相关联。
  • Built-in security (DTLS) and congestion control.

    内置安全性(DTLS)和拥塞控制。

安全 (Security)

One of the security risks in any real-time communication application may raise during the transmission of data. Eventually, encryption is a mandatory feature of WebRTC and is enforced on all components.

在数据传输期间,任何实时通信应用程序中的安全风险之一可能会增加。 最终,加密是WebRTC的强制性功能,并在所有组件上强制执行。

WebRTC uses two standardized encrypting protocols:

WebRTC使用两种标准化的加密协议:

数据报传输层安全性(DTLS) (Datagram Transport Layer Security (DTLS))

  • A standardized protocol that is built in a browser. It’s used to encrypt data streams. It is based on the Transport Layer Protocol (TLP).

    浏览器中内置的标准化协议。 它用于加密数据流。 它基于传输层协议(TLP)。
  • Preserves the semantics of the transport because DTLS uses User Data Protocol (UDP).

    由于DTLS使用用户数据协议(UDP),因此保留了传输的语义。
  • It is an extension of Secure Sockets Layer (SSL); any SSL protocol could be used to secure WebRTC data allowing end-to-end encryption.

    它是安全套接字层(SSL)的扩展; 任何SSL协议均可用于保护WebRTC数据,从而允许端到端加密。

安全实时传输协议(SRTP) (Secure Real-time Transport Protocol (SRTP))

  • Used to encrypt media streams.

    用于加密媒体流。
  • It is an extension to Real-Time Transport Protocol (RTP), which does not have any built-in security mechanisms.

    它是对实时传输协议(RTP)的扩展,它没有任何内置的安全性机制。
  • Adds protection, integrity, and message authentication to the RTP.

    将保护,完整性和消息身份验证添加到RTP。
  • Downside: While it provides encryption for the RTP packets, it does not encrypt the header.

    缺点:虽然它为RTP数据包提供加密,但不对标头进行加密。

保护2个对等方之间的链接的步骤 (Steps to secure a link between 2 peers)

  1. Initiates signaling process exchanges the metadata between two peers.

    启动信令过程在两个对等点之间交换元数据。
  2. ICE check is performed, and ICE establishes a channel between parties.

    进行ICE检查,并且ICE在双方之间建立通道。
  3. DTLS handshake is performed. If there are media transported, the SRTP uses the keys that were exported at the DTLS handshake step.

    执行DTLS握手。 如果传输了媒体,则SRTP使用在DTLS握手步骤中导出的密钥。
  4. All peers have secure channels with keys that are not known publicly.

    所有对等方均具有安全通道,且通道具有公开未知的密钥。
  5. Exchange Keys between the peers.

    对等方之间的交换密钥。

使用WebRTC的应用程序 (Applications that use WebRTC)

  • Google Meet/ Google Hangout

    Google Meet / Google Hangouts
  • Facebook Messenger

    Facebook Messenger
  • Discord

    不和谐
  • Amazon Chime

    亚马逊风铃

For more, you can check out this link for a list of apps that use WebRTC

有关更多信息,您可以查看此链接以获取使用WebRTC的应用程序的列表。

跟进 (Follow-up)

  • If you enjoy reading I Grow with Startups, and would like to read more in the future. Please subscribe here.​

    如果您喜欢阅读“ 我与初创企业共成长” ,并且希望在以后阅读更多内容。 请在这里订阅。

  • Connect with me on Github, LinkedIn

    GithubLinkedIn上与我联系

翻译自: https://medium.com/swlh/webrtc-the-technology-that-powers-google-meet-hangout-facebook-messenger-and-discord-cb926973d786

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值