webrtc_WebRTC的曙光

最新推荐文章于 2024-06-12 10:52:52 发布

culi3118

最新推荐文章于 2024-06-12 10:52:52 发布

阅读量220

点赞数

文章标签：网络 java python javascript js ViewUI

原文链接：https://www.sitepoint.com/the-dawn-of-webrtc/

版权

webrtc

Web Real-Time Communications (WebRTC) was built to provide developers with the ability to create high definition video and audio calls using simple JavaScript APIs. These APIs are embedded directly in the browser and require no plugins, downloads, or installation of any type to get you up and running.

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

Google spent about $200 million to open source the technology giving it to the development community. WebRTC uses several codecs for video and audio giving anyone the ability to create next generation communication apps without the need to pay for licensing or royalties.

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

有什么可能性？ (What are the Possibilities?)

We have only begun to scratch the surface of how WebRTC will change the communications industry. We are seeing all types of applications being created with WebRTC. One of the most iconic examples is Amazon’s Mayday Button. It shows the true power of how WebRTC is being harnessed by companies large and small.

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

WebRTC brings many abilities for you to enhance your apps such as:

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

Video Communications: Create secure and high definition audio and video streams between browsers
视频通信：在浏览器之间创建安全的高清音频和视频流
File Sharing and Messaging: Securely connect and share data between browsers without the need to upload files to the cloud or a network server. Data is sent directly between the connected peers
文件共享和消息传递：安全地连接和共享浏览器之间的数据，而无需将文件上传到云或网络服务器。数据直接在连接的对等方之间发送
Phone to Browser: WebRTC allows for connections between Public Switched Telephone Network (PSTN) and browsers. You can make and receive calls all from one location with the use of the new APIs in HTML5, a SIP Gateway and WebRTC
电话到浏览器： WebRTC允许在公共交换电话网(PSTN)和浏览器之间建立连接。您可以使用HTML5中的新API，SIP网关和WebRTC，从一个位置拨打和接听所有电话
Mobile to Mobile: WebRTC is not just for the web, there are native libraries for both iOS and Android that utilize WebRTC’s capabilities
移动到移动： WebRTC不仅适用于网络，还有适用于iOS和Android的本机库，都利用WebRTC的功能
Machine to Machine: WebRTC is embeddable for systems needing to communicate machine to machine such as with the Internet of Things. Google Chromecast is a perfect example of using WebRTC outside the normal use case
机器对机器： WebRTC可嵌入到需要与机器进行通信的系统，例如与物联网。 Google Chromecast是在正常用例之外使用WebRTC的完美示例

了解WebRTC API (Understanding the WebRTC APIs)

WebRTC relies on three JavaScript APIs embedded directly into web browsers requiring no client or browser plugin in order to communicate directly with another WebRTC enabled browser. These APIs are:

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

MediaStream (aka getUserMedia) allows you to gain access to the camera, microphone, or screen of the device employed by the user. As an added layer of security, the user will have grant access before you will be allowed to stream their media. If the user connects from a secure connection (HTTPS) the user will only need to grant access once for the application but if you connect from a non-secure connection (HTTP) the user will be prompted each time the application needs access
MediaStream(aka getUserMedia)允许您访问用户使用的设备的摄像头，麦克风或屏幕。作为附加的安全层，在允许您流式传输媒体之前，用户将具有授予访问权限的权限。如果用户通过安全连接(HTTPS)连接，则该用户只需要为该应用程序授予一次访问权限，但是如果您通过非安全连接(HTTP)连接，则每次需要该应用程序访问时都会提示该用户
RTCPeerConnection (aka PeerConnection) allows two users to communicate directly, peer to peer. It encodes and decodes media sent to and from your local machine to a remote peer receiving your media.
RTCPeerConnection(又名PeerConnection)允许两个用户直接进行点对点通信。它对发送到本地计算机和从本地计算机发送到接收您的媒体的远程对等方的媒体进行编码和解码。
RTCDataChannel (aka DataChannel) represents a bi-directional data channel between two peers. It piggy backs on top of the RTCPeerConnection allowing you to send data directly between the two connected peers securely.
RTCDataChannel(又称DataChannel)表示两个对等点之间的双向数据通道。它搭载在RTCPeerConnection的顶部，使您可以在两个连接的对等方之间安全地直接发送数据。

WebRTC入门 (Getting Started with WebRTC)

We are going to start off with a simple photo booth app that will allow you to capture an image using your webcam and apply some CSS filters to the captured image. It’ll teach you the basics of getting started with WebRTC using the MediaStream API. It is a slighted modified version of the sample app that the Google team created

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

HTML (HTML)

In the HTML code below you will see the basics needed to create your first WebRTC web application. WebRTC utilizes the HTML5 `video` element to render local and remote video streams. In addition we are going to use the `canvas` element to make a snapshot of our local video stream to apply a filter:

在下面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 (JavaScript)

The navigator.getUserMedia() method is the method provided by the getUserMedia API and it allows you to retrieve the stream from your users. At the time of this writing, it needs to be defined for the different vendor prefixes to make this application work across all WebRTC compatible browsers: Chrome, Firefox, Opera. We can achieve this goal with the following code:

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

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

We need to define the constraints we are requesting with navigator.getUserMedia() which will determine the media type we are requesting. In this example we are only requesting access to the user’s webcam by setting video: true.

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

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

Below we define and store the HTML elements for the demo application in variables.

下面，我们将演示应用程序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');

Next we need to create an array for the filters that we’ll apply to the snapshot. We’ll define the filters in our CSS code, described in the next section, using the same names:

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

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

Time for the real fun! We add an click event to our start button to initialize navigator.getUserMedia(constraints, success, error); to gain access the our webcam. Permission must be granted in order to access our webcam. Each browser vendor handles showing the prompt to allow access to the users’ webcam and microphone differently.

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

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

After successfully granting permission to access the user’s webcam we pass the stream object as the HTML5 video tag’s source.

成功授予访问用户网络摄像头的权限后，我们将流对象作为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;
   }
}

If an error occurs accessing the user’s webcam or permission is denied you will receive an error that will be printed to the console.

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

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

Next we create a simple function to apply our CSS filters to the canvas and video elements. The function will find the name of the CSS class and apply the filter to the canvas.

接下来，我们创建一个简单的函数，将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];		
});

Lastly we take a snapshot of our local video stream and render it to the canvas.

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

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

CSS (CSS)

Below you will find the basics for styling your first WebRTC application.

在下面，您将找到样式化第一个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 allows two ways of defining the size of your video stream. You can define it in your contraints variable that you pass to navigator.getUserMedia(contraints, success, error); or you can define it in your CSS. In this example we are using CSS to define the video dimensions of our local video stream and canvas elements.

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

Next we give our buttons a little flare. We will hide our filter and snapshot buttons until we have gained access to our microphone and camera using getUserMedia().

接下来，我们给按钮加一点光晕。我们将隐藏过滤器和快照按钮，直到使用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;
}

Next I will define the photo booth’s filters using CSS. You can find a list of supported filters on the related MDN page.

接下来，我将使用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);
}

If you are familiar with MailChimp you may have noticed the ability to add your profile picture using your webcam. MailChimp has added a simple but effective solution for its users to modify their profile image using WebRTC in a similar manner to this demo.

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

The code developed in this article is available on GitHub. You can view a live demo of the photo app at the WebRTC Challenge.

本文开发的代码可在GitHub上获得。您可以在WebRTC挑战赛上观看照片应用程序的实时演示。

兼容性 (Compatibility)

So you may be wondering about the availability of WebRTC across the browser vendors and mobile devices. As it currently sits today WebRTC is only compatible on desktop versions of Chrome, Firefox and Opera and mobile browsers on Android. WebRTC is not yet available on iOS for mobile browsers but you can use native libraries to build your iOS & Android applications. Microsoft is actively pushing Object Real-Time Communication (ORTC) which is currently planned to be part of the WebRTC 1.1 specification. Until then, there is a work-around using Temasys’s hosted open-source plugin for support in Internet Explorer and Safari.

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

Ericsson is currently supporting WebRTC with their “Bowser” app that you can download from the Apple app store. It is part of their new framework OpenWebRTC which is a cross-platform WebRTC client framework based on GStreamer.

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

A handy tool that you can use to check the status of your favorite browser is the website iswebrtcreadyyet.com.

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

WebRTC资源 (WebRTC Resources)

Web Real-Time Communications is an exciting technology that has opened the doors for innovation. Developers can now enhance user experiences and provide contextual information in their applications. Below are some resources that you can check out to find more information about WebRTC.

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

Webrtc.org homepage, maintained by the Google Chrome Team
Webrtc.org主页，由Google Chrome小组维护
Real-Time Communication with WebRTC: Google I/O 2013 Presentation
与WebRTC的实时通信： Google I / O 2013演示文稿
WebRTC GitHub Repo
WebRTC GitHub存储库

If you want to use WebRTC for simple meetings or conversations with a friend, below is a list of resources that you can use for free:

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

WebRTC挑战 (WebRTC Challenge)

If you are up for learning more about the WebRTC ecosystem head over to the WebRTC Challenge. It is a new initiative started by the team at Blacc Spot Media to introduce and educate developers across the web and mobile communities about the benefits and capabilities of WebRTC.

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

结论 (Conclusion)

This is only a glimpse of the power and capabilities of Web Real-Time Communications (WebRTC). As we continue this series we will dive deeper into the ends and outs of WebRTC, where it stands in the market and how companies large and small have already started to harness it’s power. It is important to remember that WebRTC is NOT an out-of-box solution but a tool that will allow you to enhance your applications. Stay tuned for more!

这只是Web实时通信(WebRTC)的强大功能的一瞥。随着我们继续进行本系列文章，我们将更深入地研究WebRTC的始末，它在市场上的地位以及大小公司如何开始利用它的力量。重要的是要记住，WebRTC 并非开箱即用的解决方案，而是使您可以增强应用程序的工具。敬请期待更多！

翻译自: https://www.sitepoint.com/the-dawn-of-webrtc/

webrtc

culi3118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webrtc_WebRTC的曙光

webrtcWeb Real-Time Communications (WebRTC) was built to provide developers with the ability to create high definition video and audio calls using simple JavaScript APIs. These APIs are embedded direc...
复制链接

扫一扫