转自：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易于使用，只需极少步骤便可建立媒体会话。有些消息在浏览器和服务器之间流动，有些则直接在两个浏览器（成为对等端）之间流动。
1、建立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中的本地媒体：
1、WebRTC中的媒体
- 轨道（MediaStreamTrack，代表设备或录制内容可返回的单一类型的媒体，唯一关联一个“源”，WebRTC不能直接访问或控制“源”，对“源”的一切控制都通过轨道实施；一个“源”可能对应多个轨道对象）
- 流（MediaStream，轨道对象的集合）
轨道和流的示意如下：
2、捕获本地媒体
如下代码展示了本地媒体的简单获取，并展示：
// 注意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);运行效果如下：
posted on
