WebCRT技术应用

WebRTC五周年庆了，刚好用到了WebRTC，就写一写。

        

WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。2011年5月开放了工程的源代码，在行业内得到了广泛的支持和应用，成为下一代视频通话的标准。

官方网站：

https://webrtc.org/

GitHub地址：

https://github.com/webrtc

WebRTC架构

WebRTC共分三个API。

• MediaStream（又称getUserMedia）
• RTCPeerConnection
• RTCDataChannel

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

2.1 简介

首先，检查浏览器是否支持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.2 展示摄像头图像

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

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

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

function onSuccess(stream) {

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

    //more code
}

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

function onSuccess(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();
}

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

代码下载地址：http://download.csdn.net/detail/cashcat2004/9564405