WebRTC-在浏览器中处理本地媒体（media）-2

浏览数：35 / 时间：2015年06月09日

上一篇文章简要介绍了WebTRC框架，在这篇文章中我们来看一下怎么用WebRTC API开发网页应用。开发者可以用的api逻辑上可以分为以下三种：

获得和管理本地和远程的音频和视频。MediaStream接口（和html5的audio 和 video标签关联）。
管理p2p连接。RTCPeerConnection接口。
管理其它数据。RTCDataChannel接口。

以下十步描述了用WebRTC API进行P2P通信的过程：

在本地端创建 MediaStream 对象（包括麦克风和摄像头等）。
在 MediaStream 中获得URL blob。
用获得的URL blob进行预览。
创建RTCPeerConnection对象。
把本地流媒体附加到新创建的连接中。
把本地会话描述发送给远程端。
接收从远程端的会话描述。
处理会话描述并把远程流媒体附加到RTCPeerConnection连接中。
从远程流媒体中获得URL blob。
用URL blob播放远端音频或视频。

下面是一个例子(捕获本地视频并预览)：

index.html

<!DOCTYPE html>
<html>
<head>
	<title>getUserMedia示例</title>
</head>

<body>
<div id="mainDiv">
 	<h1><code>getUserMedia()</code> 示例</h1>
 	<p>在示例中, 我们简单的调用 <code>getUserMedia()</code> 并在HTML5中显示摄像头捕获的视频 
	</p>
 	<video autoplay></video>

 	<script src="getUserMedia.js"></script>
</div>
</body>

</html>

getUserMedia.js

// 注意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浏览器: URL.createObjectURL() 把 MediaStream 转为 blob URL
        video.src = window.URL.createObjectURL(stream);
    } else {
        // Firefox和Opera: 可以直接把视频源设置为stream
        video.src = stream;
    }
    // 播放
    video.play();
}

function errorCallback(error){
    console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

结果

技术分享