开始使用WebRTC

Get Started with WebRTC  机翻

原文：Get Started with WebRTC - HTML5 Rocks

无需插件即可进行实时通信

想象一下，在这样一个世界中，您的手机、电视和计算机可以在一个通用平台上进行通信。想象一下，将视频聊天和对等数据共享添加到 Web 应用很容易。这就是WebRTC的愿景。

想试试吗？WebRTC可在桌面和移动设备上使用Google Chrome，Safari，Firefox和Opera。一个好的起点是 appr.tc 的简单视频聊天应用程序：

1. 在浏览器中打开 appr.tc。
2. 单击"加入"以加入聊天室，并让应用使用您的网络摄像头。
3. 在新选项卡中打开页面末尾显示的 URL，或者更好的是，在其他计算机上打开 URL。

快速入门

没有时间阅读本文或只想要代码？

1. 要获得WebRTC的概述，请观看以下Google I / O视频或查看这些幻灯片：

2. 如果尚未使用 API，请参阅在 HTML5 中捕获音频和视频，simpl.info getUserMedia。getUserMedia
3. 若要了解 API，请参阅以下示例和 RTCPeerConnection simpl.info。RTCPeerConnection
4. 要了解 WebRTC 如何使用服务器进行信令以及防火墙和 NAT 遍历，请参阅 appr.tc 中的代码和控制台日志。
5. 迫不及待，现在只想尝试WebRTC？尝试 20 多个演示中的一些，这些演示演示了 WebRTC JavaScript API。
6. 您的机器和 WebRTC 遇到问题？访问 WebRTC 疑难解答。

或者，直接跳转到WebRTC代码实验室，这是一个分步指南，解释了如何构建一个完整的视频聊天应用程序，包括一个简单的信令服务器。

WebRTC的非常短的历史

网络面临的最后一个主要挑战之一是通过语音和视频实现人类通信：实时通信或简称RTC。RTC 在 Web 应用中应与在文本输入中输入文本一样自然。没有它，你创新和开发新互动方式的能力就会受到限制。

从历史上看，RTC一直是企业和复杂的，需要昂贵的音频和视频技术在内部许可或开发。将 RTC 技术与现有内容、数据和服务集成既困难又耗时，尤其是在 Web 上。

Gmail视频聊天在2008年开始流行，2011年，谷歌推出了使用Talk的Hangouts（Gmail也是如此）。谷歌收购了GISP，该公司开发了RTC所需的许多组件，例如编解码器和回声消除技术。Google 开源了 GIPS 开发的技术，并与互联网工程任务组 （IETF） 和万维网联盟 （W3C） 的相关标准机构合作，以确保行业共识。2011年5月，爱立信构建了WebRTC的第一个实现。

WebRTC为实时，无插件的视频，音频和数据通信实施了开放标准。需求是真实的：

• 许多 Web 服务使用 RTC，但需要下载、本机应用或插件。其中包括Skype，Facebook和Hangouts。
• 下载，安装和更新插件很复杂，容易出错并且很烦人。
• 插件难以部署、调试、故障排除、测试和维护，并且可能需要许可和与复杂、昂贵的技术集成。首先，通常很难说服人们安装插件！

WebRTC项目的指导原则是，其API应该是开源的，免费的，标准化的，内置于Web浏览器中，并且比现有技术更有效。

我们现在在哪里？

WebRTC用于各种应用程序，例如Google Meet。WebRTC还与WebKitGTK+和Qt原生应用程序集成。

WebRTC实现了以下三个API：

• MediaStream（也称为getUserMedia)
• RTCPeerConnection
• RTCDataChannel

API 定义在以下两个规范中：

• WebRTC
• getUserMedia

Chrome，Safari，Firefox，Edge和Opera在移动设备和桌面上都支持这三个API。

getUserMedia：有关演示和代码，请参阅 WebRTC 示例或尝试 Chris Wilson 用作 Web 音频输入的惊人示例。getUserMedia

RTCPeerConnection：有关简单的演示和功能齐全的视频聊天应用程序，请参阅 WebRTC 示例分别对等连接和 appr.tc。这个应用程序使用适配器.js，一个由谷歌在WebRTC社区的帮助下维护的JavaScript填充程序，以抽象出浏览器的差异和规格变化。

RTCDataChannel：若要查看实际效果，请参阅 WebRTC 示例以查看其中一个数据通道演示。

WebRTC codelab 展示了如何使用所有三个 API 来构建一个简单的应用程序，用于视频聊天和文件共享。

您的第一个 WebRTC

WebRTC应用程序需要做几件事：

• 获取流式音频、视频或其他数据。
• 获取网络信息，例如 IP 地址和端口，并将其与其他 WebRTC 客户端（称为对等方）交换以启用连接，甚至通过 NAT 和防火墙。
• 协调信令通信以报告错误并启动或关闭会话。
• 交换有关媒体和客户端功能的信息，如分辨率和编解码器。
• 传输流式音频、视频或数据。

为了获取和通信流数据，WebRTC 实现了以下 API：

• MediaStream 可以访问数据流，例如来自用户的摄像头和麦克风。
• RTCPeerConnection 支持音频或视频通话，并提供加密和带宽管理功能。
• RTCDataChannel 支持通用数据的对等通信。

（稍后将详细讨论WebRTC的网络和信令方面。

MediaStream接口（也称为接口）getUserMedia

MediaStream API 表示同步的媒体流。例如，从摄像头和麦克风输入中获取的流具有同步的视频和音频轨道。（不要与<track>元素混淆，这是完全不同的东西。MediaStreamTrack

理解API的最简单方法可能是在野外查看它：MediaStream

1. 在浏览器中，导航到 WebRTC 示例 getUserMedia。
2. 打开控制台。
3. 检查全局范围内的变量。stream

每个都有一个输入（可能是由 生成的），还有一个输出（可能传递给视频元素或 ）。MediaStreamMediaStreamgetUserMedia()RTCPeerConnection

该方法采用 MediaStreamConstraints 对象参数，并返回解析为对象的 参数。getUserMedia()PromiseMediaStream

每个都有一个 ，例如 。由 and 方法返回 s 数组。MediaStreamlabel'Xk7EuLhsuHKbnjLWkW4yYGNJJ8ONsgwHBvLQ'MediaStreamTrackgetAudioTracks()getVideoTracks()

对于 getUserMedia 示例，返回一个空数组（因为没有音频），并且假设连接了一个工作正常的网络摄像头，则返回一个数组，该数组表示来自网络摄像头的流。每个都有一个种类 （ 或 ），a（类似于 ），并表示音频或视频的一个或多个通道。在这种情况下，只有一个视频轨道，没有音频，但很容易想象用例中还有更多，例如从前置摄像头，后置摄像头，麦克风获取流的聊天应用程序以及共享其屏幕的应用程序。stream.getAudioTracks()stream.getVideoTracks()MediaStreamTrackMediaStreamTrack'video''audio'label'FaceTime HD Camera (Built-in)'

可以通过设置 srcObject 属性将 A 附加到视频元素。以前，这是通过将属性设置为使用 创建的对象 URL 来完成的，但这已被弃用。MediaStreamsrcURL.createObjectURL()

正在主动使用相机，这会占用资源，并使相机保持打开状态并打开相机灯亮。当您不再使用轨道时，请确保呼叫以关闭摄像机。MediaStreamTracktrack.stop()

getUserMedia也可以用作 Web 音频 API 的输入节点：

<span style="color:white"><span style="background-color:#444444"><span style="color:#aeaeae"><em>// Cope with browser differences.</em></span><span style="color:#ffffff">
let audioContext</span><span style="color:#ffffff">;</span>
<span style="color:#e28964">if</span> <span style="color:#ffffff">(</span><span style="color:#e28964">typeof</span> <span style="color:#89bdff">AudioContext</span> <span style="color:#ffffff">===</span> <span style="color:#65b042">'function'</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
  audioContext </span><span style="color:#ffffff">=</span> <span style="color:#e28964">new</span> <span style="color:#89bdff">AudioContext</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span> <span style="color:#e28964">else</span> <span style="color:#e28964">if</span> <span style="color:#ffffff">(</span><span style="color:#e28964">typeof</span><span style="color:#ffffff"> webkitAudioContext </span><span style="color:#ffffff">===</span> <span style="color:#65b042">'function'</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
  audioContext </span><span style="color:#ffffff">=</span> <span style="color:#e28964">new</span><span style="color:#ffffff"> webkitAudioContext</span><span style="color:#ffffff">();</span> <span style="color:#aeaeae"><em>// eslint-disable-line new-cap</em></span>
<span style="color:#ffffff">}</span> <span style="color:#e28964">else</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
  console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#65b042">'Sorry! Web Audio not supported.'</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>

<span style="color:#aeaeae"><em>// Create a filter node.</em></span>
<span style="color:#e28964">var</span><span style="color:#ffffff"> filterNode </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> audioContext</span><span style="color:#ffffff">.</span><span style="color:#ffffff">createBiquadFilter</span><span style="color:#ffffff">();</span>
<span style="color:#aeaeae"><em>// See https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section</em></span><span style="color:#ffffff">
filterNode</span><span style="color:#ffffff">.</span><span style="color:#ffffff">type </span><span style="color:#ffffff">=</span> <span style="color:#65b042">'highpass'</span><span style="color:#ffffff">;</span>
<span style="color:#aeaeae"><em>// Cutoff frequency. For highpass, audio is attenuated below this frequency.</em></span><span style="color:#ffffff">
filterNode</span><span style="color:#ffffff">.</span><span style="color:#ffffff">frequency</span><span style="color:#ffffff">.</span><span style="color:#ffffff">value </span><span style="color:#ffffff">=</span> <span style="color:#3387cc">10000</span><span style="color:#ffffff">;</span>

<span style="color:#aeaeae"><em>// Create a gain node to change audio volume.</em></span>
<span style="color:#e28964">var</span><span style="color:#ffffff"> gainNode </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> audioContext</span><span style=&#