webrtc_WebRTC的曙光-CSDN博客

webrtc

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

Google花费了大约2亿美元来开源该技术，并将其提供给开发社区。 WebRTC使用多个视频和音频编解码器，使任何人都可以创建下一代通信应用程序，而无需支付许可费或专利使用费。

有什么可能？

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

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

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

了解WebRTC API

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

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

WebRTC入门

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

HTML

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

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

   <div class="photo-booth">
      <!-- local video stream will be rendered to the video tag -->
      <video autoplay></video>
      <!-- a copy of the stream will be made and css filters applied  -->
      <canvas></canvas>
   </div>
   <div class="buttons">
      <!-- call getUserMedia() to access webcam and give permission -->
      <button id="start">Access Webcam</button>
      <!-- take a snapshot from your webcam and render it to the canvas tag -->
      <button id="snapshot">Take a Snapshot</button>
      <!-- sort through the available css filters -->
      <button id="filter">Change Filter</button>
   </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);
});

成功授予访问用户网络摄像头的权限后，我们将流对象作为HTML5 video标签的来源。

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允许使用两种方法来定义视频流的大小。您可以在传递给navigator.getUserMedia(contraints, success, error); contraints变量中对其进行定义navigator.getUserMedia(contraints, success, error); 或者您可以在CSS中定义它。在此示例中，我们使用CSS定义本地视频流和canvas元素的video尺寸。

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;
}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

接下来，我将使用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挑战赛上观看照片应用程序的实时演示。

兼容性

因此，您可能想知道WebRTC在浏览器供应商和移动设备之间的可用性。目前，WebRTC仅与Chrome，Firefox和Opera的桌面版本以及Android上的移动浏览器兼容。 WebRTC尚未在iOS上用于移动浏览器，但是您可以使用本机库来构建iOS和Android应用程序。 Microsoft积极推动对象实时通信（ORTC），目前计划将其作为WebRTC 1.1规范的一部分。在此之前，使用Temasys的托管开放源代码插件可以在Internet Explorer和Safari中提供支持来解决。

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

网站iswebrtcreadyyet.com是您可以用来检查自己喜欢的浏览器状态的便捷工具。