WebRTC

作者: 空谷悠 | 来源:发表于2017-05-10 18:35 被阅读137次

WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频、音频和数据。

WebRTC共分三个API。

MediaStream(又称getUserMedia)

RTCPeerConnection

RTCDataChannel

getUserMedia主要用于获取视频和音频信息,后两个API用于浏览器之间的数据交换。

首先,检查浏览器是否支持getUserMedia方法。

navigator.getUserMedia ||(navigator.getUserMedia= navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia ||navigator.msGetUserMedia);

if(navigator.getUserMedia) {

//do something

}else{

console.log('your browser not support getUserMedia');

}

Chrome21、Opera 18和Firefox 17支持该方法,目前IE还不支持,上面代码中的msGetUserMedia只是为了确保将来的兼容。

getUserMedia方法接受三个参数。

getUserMedia(streams, success, error);

含义如下:

streams:表示包括哪些多媒体设备的对象

success:回调函数,获取多媒体设备成功时调用

error:回调函数,获取多媒体设备失败时调用

用法如下:

navigator.getUserMedia({

video:true,

audio:true}, onSuccess, onError);

上面的代码用来获取摄像头和麦克风的实时信息。

如果网页使用了getUserMedia,浏览器就会询问用户,是否许可提供信息。如果用户拒绝,就调用回调函数onError。

发生错误时,回调函数的参数是一个Error对象,它有一个code参数,取值如下:

PERMISSION_DENIED:用户拒绝提供信息。

NOT_SUPPORTED_ERROR:浏览器不支持指定的媒体类型。

MANDATORY_UNSATISHIED_ERROR:指定的媒体类型未收到媒体流。

2 展示摄像头图像

将用户的摄像头拍摄的图像展示在网页上,需要先在网页上放置一个video元素。图像就展示在这个元素中。

<video    id="webcam">  </video>

然后,用代码获取这个元素。

functiononSuccess(stream) {

var  video = document.getElementById('webcam');//more code

}

最后,将这个元素的src属性绑定数据流,摄像头拍摄的图像就可以显示了。

functiononSuccess(stream) {

var   video = document.getElementById('webcam');

if(window.URL) {

video.src=window.URL.createObjectURL(stream);

}else{

video.src=stream;

}

video.autoplay=true;     //or video.play();

}

它的主要用途是让用户使用摄像头为自己拍照。

3、实时数据交换

WebRTC的另外两个API,RTCPeerConnection用于浏览器之间点对点的连接,RTCDataChannel用于点对点的数据通信。

RTCPeerConnection带有浏览器前缀,Chrome浏览器中为webkitRTCPeerConnection,Firefox浏览器中为mozRTCPeerConnection。Google维护一个函数库adapter.js,用来抽像掉浏览器之间的差异。

var  dataChannelOptions ={

ordered:false,//do not guarantee order

maxRetransmitTime: 3000,//in milliseconds

};

var  peerConnection =newRTCPeerConnection();

//Establish your peer connection using your signaling channel here

var   dataChannel =peerConnection.createDataChannel("myLabel", dataChannelOptions);

dataChannel.onerror=function(error) {

console.log("Data Channel Error:", error);

};

dataChannel.onmessage=function(event) {

console.log("Got Data Channel Message:", event.data);

};

dataChannel.onopen=function() {

dataChannel.send("Hello World!");

};

dataChannel.onclose=function() {

console.log("The Data Channel is Closed");

};

原网址:http://www.cnblogs.com/jscode/p/3601648.html

相关文章

网友评论

    本文标题:WebRTC

    本文链接:https://www.haomeiwen.com/subject/nzbgtxtx.html