在浏览器中处理本地媒体(media)

上一篇文章简要介绍了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 –> mozGetUserMedianavigator.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 inspectionwindow.stream = stream;if (window.URL) {// Chrome浏览器: URL.createObjectURL() 把 MediaStream 转为 blob URLvideo.src = window.URL.createObjectURL(stream);} else {// Firefox和Opera: 可以直接把视频源设置为streamvideo.src = stream;}// 播放video.play();}function errorCallback(error){console.log("navigator.getUserMedia error: ", error);}navigator.getUserMedia(constraints, successCallback, errorCallback);结果

,勇士面前无险路。

在浏览器中处理本地媒体(media)

相关文章:

你感兴趣的文章:

标签云: