WebRTC介绍及简单应用

转自：https://www.cnblogs.com/vipzhou/p/7994927.html

WebRTC介绍及简单应用

---

WebRTC，即Web Real-Time Communication，web实时通讯技术。简单地说就是在web浏览器里面引入实时通讯，包括音视频通话等。

• WebRTC实时通讯技术介绍
• 如何使用
• 媒体介绍
• 信令
• STUN和TURN介绍
• 对等链接和提议/应答协商
• 数据通道
• NAT和防火墙穿透
• 简单应用
• 其它

---

WebRTC实时通讯技术介绍

WebRTC实现了基于网页的语音对话或视频通话，目的是无插件实现web端的实时通讯的能力。

WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、展现等功能，而且还支持跨平台，包括linux、windows、mac、android等。

1. WebRTC三角形

2. WebRTC梯形

3. WebRTC的多方会话

WebRTC支持多个浏览器参与的多方会话或会议会话，要创建这类会话有以下两种模式：

4. WebRTC新功能特性

---

如何使用WebRTC

WebRTC易于使用，只需极少步骤即可创建媒体会话。有些消息在浏览器和服务器之间流动，有些则直接在两个浏览器（成为对等端）之间流动。

一、创建WebRTC会话

创建WebRTC链接须要以下几个步骤：

• 获取本地媒体（getUserMedia()，MediaStream API）
• 在浏览器和对等端（其它浏览器或终端）之间创建对等链接（RTCPeerConnection API）
• 将媒体和数据通道关联至该链接
• 交换会话描述（RTCSessionDescription）

• 浏览器M从Web服务器请求网页
• Web服务器向M返回带有WebRTC js的网页
• 浏览器L从Web服务器请求网页
• Web服务器向L返回带有WebRTC js的网页
• M决定与L通讯，经过M自身的js将M的会话描述对象（offer，提议）发送至Web服务器
• Web服务器将M的会话描述对象发送至L上的js
• L上的js将L的会话描述对象（answer，应答）发送至Web服务器
• Web服务器转发应答至M上的js
• M和L开始交互，肯定访问对方的最佳方式
• 完成后，M和L开始协商通讯密钥
• M和L开始交换语音、视频或数据

WebRTC三角形会话具体的调用流程：

说明：
    SDP对象的传输多是一个来回反复的过程，而且该过程采用的协议并未标准化

WebRTC梯形会话方式具体的调用流程：

说明：
    此场景中，浏览器M和L直接交换媒体，只是它们运行的Web服务器不用而已。每一个浏览器的会话描述对象都会映射至Jingle[XEP-0166]session-initiate消息和session-accept方法。 

---

媒体介绍

先来看下WebRTC中的本地媒体：

一、WebRTC中的媒体

• 轨道（MediaStreamTrack，表明设备或录制内容可返回的单一类型的媒体，惟一关联一个“源”，WebRTC不能直接访问或控制“源”，对“源”的一切控制都经过轨道实施；一个“源”可能对应多个轨道对象）
• 流（MediaStream，轨道对象的集合）

轨道和流的示意以下：

二、捕获本地媒体

以下代码展现了本地媒体的简单获取，并展现：

// 注意getUserMedia()在各浏览器中的区别 // Opera --> getUserMedia // Chrome --> webkitGetUserMedia // Firefox --> mozGetUserMedia navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; // 只获取video: var constraints = {audio: false, video: true}; var video = document.querySelector("video"); function successCallback(stream) { // Note: make the returned stream available to console for inspection window.stream = stream; if (window.URL) { // Chrome浏览器 video.srcObject = stream; } else { // Firefox和Opera: 能够直接把视频源设置为stream video.src = stream; } // 播放 video.play(); } function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback);

运行效果以下：

完整代码查看：https://github.com/caiya/webrtc-demo.git