上一篇文章简要介绍了WebTRC框架,在这篇文章中我们来看一下怎么用WebRTC API开发网页应用。开发者可以用的api逻辑上可以分为以下三种:
以下十步描述了用WebRTC API进行P2P通信的过程:
下面是一个例子(捕获本地视频并预览):
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);
原文:http://blog.csdn.net/sinat_26227857/article/details/44535447