WebRTC Demo - getUserMedia()
WebRTC介绍
WebRTC提供三类API：
- MediaStream，即getUserMedia
- RTCPeerConnection
- RTCDataChannel
getUserMedia已经由Chrome, Opera和Firefox支持。
RTCPeerConnection目前则由Chrome, Opera和Firefox支持。Chrome和Opera提供的接口名字为webkitRTCPeerConnection，Firefox则命名为mozRTCPeerConnection。
RTCDataChannel则只有Chrome 25, Opera 18和Firefox 22及以上版本才支持。
一个WebRTC应用需要做如下几件事情：
- 获取流（Streaming），包括音频，视频，以及其它数据
- 获取网络信息，如IP和端口（PORT），并与其它WebRTC Client交换信息，有的时候还需要穿越防火墙或NAT
- 信令（Signaling），用于报告错误、初始化或关闭会话
- 交换多媒体以及Client的支持能力信息，比如分辩率、编解码信息等
- 流通信
MediaStream（getUserMedia）
每一个MediaStream都有一个输入（Input）和输出（Output）。输入可以是由navigator.getUserMedia()生成的多媒体流。输出则可以是html5的video元素或者一个RTCPeerConnection。
咱们看一个简单的示例。
index.html文件内容如下：
<!DOCTYPE html> <html> <head> <meta name="keywords" content="WebRTC, HTML5, JavaScript" /> <meta name="description" content="WebRTC Demo" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <base target="_blank"> <title>getUserMedia</title> <link rel="stylesheet" href="../../css/main.css" /> </head> <body> <div id="container"> <h1><a href="#" title="WebRTC samples homepage">WebRTC samples</a> <span>getUserMedia</span></h1> <!--video元素，视频将输出到这里--//> <video autoplay></video> <p>在video元素中显示<code>getUserMedia()</code>生成的视频流。</p> <p><code>MediaStream</code>对象<code>window.stream</code>是全局对象。 <code>getUserMedia()</code> callback对window.stream赋值。你可以在控制台中查看他的值。</p> <a href="#" title="View source for this page on Github" id="viewSource">源代码</a> </div> <!--getUserMedia示例代码--//> <script src="js/main.js"></script> </body> </html>
index.html主要由一个video元素和一个main.js文件构成。video元素负责输出getUserMedia生成的MediaStream；main.js是主要的代码代码逻辑。
main.js文件内容如下：
// 全局变量，inspector的console中可以查看
video = document.querySelector("video"); // get video element ref
constraints = {audio: false, video: true}; // only need video
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
/**
* successCallback
* getUerMedia成功获得一个MediaStream时，会回调此方法
**/
function successCallback(stream){
window.stream = stream; // stream available to console
if (window.URL) { // 生成视频流的地址，将其做为video的输入
video.src = window.URL.createObjectURL(stream);
} else {
video.src = stream;
}
}
function errorCallback(error){
console.log("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, successCallback, errorCallback);
点击看DEMO。
getUserMedia()方法需要三个参数：
-
一个约束对象，如main.js中的constraints
-
一个success callback，成功时，会回调此方法，参数是一个MediaStream
-
一个error callback，失败时，会回调此方法，参数是一个error对象
MediaStream由id,label,MediaStreamTracks(video tracks和audio tracks)构成。读者可以在console中查看window.stream对象，了解其构成及方法。
在Chrome和Opera中，URL.createObjectURL()方法把一个MediaStream转化为一个Blob Url。这样，Video元素就可以使用此地址作为其输入。
