WebRTC 的黎明

The Dawn of WebRTC 机翻

原文：The Dawn of WebRTC - SitePoint

Web 实时通信 (WebRTC) 旨在为开发人员提供使用简单 JavaScript API 创建高清视频和音频呼叫的能力。这些 API 直接嵌入在浏览器中，无需插件、下载或任何类型的安装即可启动和运行。

谷歌花了大约 2 亿美元将这项技术开源给开发社区。WebRTC 使用多种视频和音频编解码器，使任何人都能够创建下一代通信应用程序，而无需支付许可或版税。

有哪些可能性？

我们才刚刚开始了解 WebRTC 将如何改变通信行业。我们正在看到使用 WebRTC 创建的所有类型的应用程序。最具标志性的例子之一是亚马逊的 Mayday Button。它展示了大大小小的公司如何利用 WebRTC 的真正力量。

WebRTC 为您带来了许多功能来增强您的应用程序，例如：

• 视频通信：在浏览器之间创建安全和高清的音频和视频流
• 文件共享和消息传递：在浏览器之间安全地连接和共享数据，无需将文件上传到云或网络服务器。数据直接在连接的对等点之间发送
• 电话到浏览器： WebRTC 允许公共交换电话网络 (PSTN) 和浏览器之间的连接。您可以使用 HTML5 中的新 API、SIP 网关和 WebRTC 从一个位置拨打和接听电话
• 移动到移动： WebRTC 不仅适用于 Web，还有适用于 iOS 和 Android 的原生库利用 WebRTC 的功能
• 机器对机器： WebRTC 可嵌入到需要机器对机器通信的系统中，例如物联网。Google Chromecast 是在正常用例之外使用 WebRTC 的完美示例

了解 WebRTC API

WebRTC 依赖于三个直接嵌入到 Web 浏览器中的 JavaScript API，无需客户端或浏览器插件即可与另一个启用 WebRTC 的浏览器直接通信。这些 API 是：

• MediaStream（又名 getUserMedia）允许您访问用户使用的设备的摄像头、麦克风或屏幕。作为附加的安全层，在您被允许流式传输他们的媒体之前，用户将拥有访问权限。如果用户从安全连接 (HTTPS) 连接，则用户只需为应用程序授予一次访问权限，但如果您从非安全连接 (HTTP) 连接，则每次应用程序需要访问权限时都会提示用户
• RTCPeerConnection（又名 PeerConnection）允许两个用户直接通信，点对点。它对发送到本地计算机和从本地计算机发送到接收媒体的远程对等体的媒体进行编码和解码。
• RTCDataChannel (aka DataChannel) 代表两个对等点之间的双向数据通道。它搭载在 RTCPeerConnection 之上，允许您直接在两个连接的对等方之间安全地发送数据。

WebRTC 入门

我们将从一个简单的照相亭应用程序开始，它允许您使用网络摄像头捕获图像并将一些 CSS 过滤器应用于捕获的图像。它将教您使用 MediaStream API 开始使用 WebRTC 的基础知识。它是Google 团队创建的示例应用程序的轻微修改版本

HTML

在下面的 HTML 代码中，您将看到创建您的第一个 WebRTC Web 应用程序所需的基础知识。WebRTC 利用 HTML5 `video` 元素来呈现本地和远程视频流。此外，我们将使用 `canvas` 元素制作本地视频流的快照以应用过滤器：

<div class="m-content">
   <h1>getUserMedia + CSS filters demoh1>

   <div class="photo-booth">
      
      <video autoplay>video>
      
      <canvas>canvas>
   div>
   <div class="buttons">
      
      <button id="start">Access Webcambutton>
      
      <button id="snapshot">Take a Snapshotbutton>
      
      <button id="filter">Change Filterbutton>
   div>
div>

JavaScript

该navigator.getUserMedia()方法是 getUserMedia API 提供的方法，它允许您从用户那里检索流。在撰写本文时，需要为不同的供应商前缀定义它，以使该应用程序在所有 WebRTC 兼容浏览器上工作：Chrome、Firefox、Opera。我们可以通过以下代码实现这个目标：

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

我们需要定义我们请求的约束，这些约束navigator.getUserMedia()将决定我们请求的媒体类型。在此示例中，我们仅通过设置请求访问用户的网络摄像头video: true。

var constraints = { audio: false, video: true };

下面我们在变量中定义和存储演示应用程序的 HTML 元素。

var start   = document.querySelector('#start');
var snapshot = document.querySelector('#snapshot');
var filter  = document.querySelector('#filter');
var video   = document.querySelector('video');
var canvas  = document.querySelector('canvas');

接下来，我们需要为我们将应用于快照的过滤器创建一个数组。我们将在我们的 CSS 代码中定义过滤器，在下一节中描述，使用相同的名称：

var filters = ['blur', 'brightness', 'contrast', 'grayscale',
               'hue', 'invert', 'saturate', 'sepia'];

是时候享受真正的乐趣了！我们向我们的开始按钮添加一个click事件来初始化 navigator.getUserMedia(constraints, success, error);以访问我们的网络摄像头。必须获得许可才能访问我们的网络摄像头。每个浏览器供应商处理显示提示以允许以不同方式访问用户的网络摄像头和麦克风。

start.addEventListener('click', function() {
    navigator.getUserMedia(constraints, success, error);
});

在成功授予访问用户网络摄像头的权限后，我们将流对象作为 HTML5video标记的源传递。

function success(stream) {
   /* hide the start button*/
   start.style.display = 'none';
   
   /* show the snapshot button*/
   snapshot.style.display = 'block';
   
   /* show the filter button*/
   filter.style.display = 'block';
   if(window.URL) {
      video.src = window.URL.createObjectURL(stream);
   } else {
      video.src = stream;
   }
}

如果访问用户的网络摄像头发生错误或权限被拒绝，您将收到将打印到控制台的错误。

function error(e) {
   console.log('navigator.getUserMedia error: ', e);
}

接下来我们创建一个简单的函数来将我们的 CSS 过滤器应用于canvas和video元素。该函数将找到 CSS 类的名称并将过滤器应用于画布。

filter.addEventListener('click', function() {	
   var index = (filters.indexOf(canvas.className) + 1) % filters.length;
   video.className = filters[index];
   canvas.className = filters[index];		
});

最后，我们拍摄本地视频流的快照并将其渲染到canvas.

snapshot.addEventListener('click', function() {
   canvas.width = 360;
   canvas.height = 270;
   canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
});

CSS

您将在下面找到为您的第一个 WebRTC 应用程序设置样式的基础知识。

body
{
   font-family: 'Open Sans', sans-serif;
   background-color: #e4e4e4;
}

h1
{
   width: 780px;
   margin-left: 20px;
   float: left;
}

.m-content
{
   width: 800px;
   height: 310px;
   margin: auto;
}

.photo-booth
{
   width: 800px;
   height: 310px;
   float: left;
}

WebRTC 允许通过两种方式定义视频流的大小。您可以在contraints传递给的变量中navigator.getUserMedia(contraints, success, error);定义它，也可以在 CSS 中定义它。在这个例子中，我们使用 CSS 来定义video本地视频流和canvas元素的尺寸。

video
{
   width: 360px;
   height: 270px;
   float: left;
   margin: 20px;
   background-color: #333;
}

canvas
{
   width: 360px;
   height: 270px;
   float: left;
   margin: 20px;
   background-color: #777;
}

接下来我们给我们的按钮一点闪光。我们将隐藏我们的过滤器和快照按钮，直到我们可以使用 访问我们的麦克风和摄像头getUserMedia()。

.buttons
{
   margin-left: 20px;
   float: left;
}

button
{
   background-color: #d84a38;
   border: none;
   border-radius: 2px;
   color: white;
   font-family: 'Open Sans', sans-serif;
   font-size: 0.8em;
   margin: 0 0 1em 0;
   padding: 0.5em 0.7em 0.6em 0.7em;
}

button:active
{
   background-color: #cf402f;
}

button:hover
{
   background-color: #cf402f;
   cursor: pointer;
}

#filter, #snapshot
{
   display: none;
   margin-right: 20px;
   float: left;
}

接下来，我将使用 CSS 定义照相亭的过滤器。您可以在相关的 MDN 页面上找到支持的过滤器列表。

.blur
{
   filter: blur(2px);
   -webkit-filter: blur(2px);
}

.grayscale
{
   filter: grayscale(1);
   -webkit-filter: grayscale(1);
}

.sepia
{
   filter: sepia(1);
   -webkit-filter: sepia(1);
}

.brightness
{
   filter: brightness(2.2);
   -webkit-filter: brightness(2.2);
}

.contrast
{
   filter: contrast(3);
   -webkit-filter: contrast(3);
}

.hue
{
   filter: hue-rotate(120deg);
   -webkit-filter: hue-rotate(120deg);
}

.invert
{
   filter: invert(1);
   -webkit-filter: invert(1);
}

.saturate
{
   filter: staurate(5);
   -webkit-filter: staurate(5);
}

如果您熟悉 MailChimp，您可能已经注意到使用网络摄像头添加个人资料图片的功能。MailChimp 为其用户添加了一个简单但有效的解决方案，以使用与此演示类似的方式使用 WebRTC 修改他们的个人资料图像。

本文中开发的代码可在 GitHub 上找到。您可以在WebRTC Challenge上查看照片应用程序的现场演示。

兼容性

因此，您可能想知道 WebRTC 在浏览器供应商和移动设备上的可用性。就目前而言，WebRTC 仅与 Chrome、Firefox 和 Opera 的桌面版本以及 Android 上的移动浏览器兼容。WebRTC 尚未在 iOS 上用于移动浏览器，但您可以使用本机库来构建您的 iOS 和 Android 应用程序。微软正在积极推动对象实时通信 (ORTC)，目前计划成为 WebRTC 1.1 规范的一部分。在那之前，有一种解决方法是使用 Temasys 的托管开源插件来支持 Internet Explorer 和 Safari。

爱立信目前正在通过他们的“Bowser”应用程序支持 WebRTC，您可以从 Apple应用商店下载该应用程序。它是他们新框架OpenWebRTC的一部分，OpenWebRTC是一个基于 GStreamer 的跨平台 WebRTC 客户端框架。

网站iswebrtcreadyyet.com是一个方便的工具，可用于检查您喜欢的浏览器的状态。

WebRTC 资源

Web 实时通信是一项激动人心的技术，它为创新打开了大门。开发人员现在可以增强用户体验并在其应用程序中提供上下文信息。以下是一些资源，您可以查看这些资源以查找有关 WebRTC 的更多信息。

• Webrtc.org主页，由 Google Chrome 团队维护
• 使用 WebRTC 进行实时通信：Google I/O 2013 演示文稿
• WebRTC GitHub 存储库

如果您想使用 WebRTC 与朋友进行简单的会议或对话，以下是您可以免费使用的资源列表：

• Tawk.com
• Talky.io
• Appear.in

WebRTC 挑战

如果您想了解更多有关 WebRTC 生态系统的信息，请前往WebRTC 挑战赛。这是Blacc Spot Media团队发起的一项新计划，旨在向 Web 和移动社区的开发人员介绍和教育 WebRTC 的好处和功能。

结论

这只是 Web 实时通信 (WebRTC) 的强大功能的一瞥​​。随着我们继续这个系列，我们将深入探讨 WebRTC 的末端和外在，它在市场中的地位以及大小公司如何已经开始利用它的力量。重要的是要记住，WebRTC不是一个开箱即用的解决方案，而是一个允许您增强应用程序的工具。敬请期待更多！