关于WebRTC的初步尝试

WebRTC（Web Real TimeCommunication），即支持web中音频，视频和数据的实时通信。

在Firefox，opera，chrome on desktop，chrome on android中均有支持。

WebRTC使用RTCPeerConnection在浏览器之间传递流数据，但也需要一种协调通信和发送控制消息的机制，这一过程称为信令。WebRTC未规定信令方法和协议。

WebRTC旨在工作于点对点，因此用户可以通过最直接的路线进行连接。但是，WebRTC是为了应对真实世界的网络而构建的：客户端应用程序需要穿越NAT网关和防火墙，并且在直接连接失败的情况下需要对等网络需求回退。作为此过程的一部分，WebRTC API使用STN服务器来获取计算机的IP地址，并在发生对等通信失败的情况下使TURN服务器充当中继服务器。

另外，所有WebRTC组件都必须加密，并且其JavaScript API只能用于安全源（HTTPS或本地主机，这点很重要！）。信令机制不是由WebRTC标准定义的，所以首先必须确保使用安全协议。

用法：

在工作目录中添加一个video元素和一个script元素到index.html：

Realtime communication with WebRTC

Realtime communication with WebRTC

将以下内容添加到js文件夹中的main.js中：

'use strict';

varconstraints={

video:true

};

varvideo=document.querySelector('video');

functionhandleSuccess(stream){

video.srcObject=stream;

}

functionhandleError(error){

console.error('getUserMedia error: ',error);

}

navigator.mediaDevices.getUserMedia(constraints).

then(handleSuccess).catch(handleError);

效果：

运行分析：

在getUserMedia()通话之后，浏览器请求用户访问其相机的许可（如果这是第一次请求当前原点的相机访问）。如果成功，则返回MediaStream，媒体元素可以通过srcObject属性使用它：

navigator.mediaDevices.getUserMedia(constraints).

then(handleSuccess).catch(handleError);

functionhandleSuccess(stream){

video.srcObject=stream;

}

该constraints参数允许您指定要获取的媒体。在这个例子中，只有视频，因为音频默认是禁用的：

varconstraints={

video:true

};

也可以使用约束来实现视频分辨率等附加要求：

consthdConstraints={

video:{

width:{

min:1280

},

height:{

min:720

}

}

}

该MediaTrackConstraints规范列出了所有可能的约束类型，虽然不是所有的选项都被所有浏览器支持。如果当前选择的摄像机不支持请求的分辨率，getUserMedia()则会拒绝该分辨率，OverconstrainedError并且用户不会被提示允许访问其摄像机。

如果getUserMedia()成功，则来自网络摄像头的视频流被设置为视频元素的来源：

functionhandleSuccess(stream){

video.srcObject=stream;

}

——Happy Ending——