這篇文章主要介紹了關於使用HTML5捕捉音頻與視頻信息概述及實例,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
音頻與視頻信息的捕捉一直是Web開發中的一個難點,下面為大家介紹一種新的API,該API透過使用navigatior.getUserMedia()方法來讓Web應用程式擁有存取用戶攝影機與麥克風設備的能力本文概述
長期以來,音訊與視訊訊息的捕捉一直是Web開發中的一個困難。多年來,我們一直依賴瀏覽器插件來實現這個需求。
在HTML 5中,出現了許多可以存取硬體設備的API,例如存取GPS設備的Geolocation API、存取accelerometer設備的Orientation API、存取GPU設備的WebGL API、存取音訊播放設備的Web Audio API等等。這些API是非常強大的,因為開發者可以直接透過編寫JavaSccript腳本程式碼來存取底層硬體設備。
本文介紹一種新的API,該API透過使用navigatior.getUserMedia()方法來讓Web應用程式擁有存取使用者攝影機與麥克風裝置的能力。
捕捉媒體資料的技術發展歷史
在過去幾年裡,開始出現了在網路應用程式中存取客戶端本機裝置的需求,因此,W3C組織決定組織一個DAP( Device APIS POLICY)工作小組,來為該需求的實現制定一個統一的標準。
接下來讓我們來看看在2011年發生了哪些事情:
在HTML頁面檔案中實現媒體資料的捕捉
DAP工作小組的第一個要製定的標準就是如何在Web應用程式的HTML頁面中實現媒體資料的捕捉。他們決定重載類型為file的input元素(3525558f8f338d4ea90ebf22e5cde2bc),並且為accept屬性增加一個新的屬性值。
如果開發者想實現使用者透過相機拍照的功能,可以書寫如下所示的程式碼。
複製程式碼
程式碼如下:
<input type="file" accept="image/*;capture=camera">
錄製影片資料與音訊資料的程式碼與之類似:
複製程式碼
#
<input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">
複製程式碼
程式碼如下:<device type="media" onchange="update(this.data)"></device> <video autoplay></video> <script> function update(stream) { document.querySelector('video').src = stream.url; } </script>支援瀏覽器
複製程式碼
程式碼如下:###function hasGetUserMedia() { //请注意:在Opera浏览器中不使用前缀 return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } if (hasGetUserMedia()) { alert('您的浏览器支持getUserMedia方法'); } else { alert('您的浏览器不支持getUserMedia方法'); }
获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。getUserMedia方法的第一个参数是一个用于指定媒体类型的对象。例如,当你想访问摄像头设备时,第一个参数应该为{video:true},为了同时访问摄像头设备与麦克风设备,需要使用{video:true,audio:true}参数,代码如下所示:
复制代码
代码如下:
<video autoplay id="video"></video> <script> var onFailSoHard = function() { alert('设备拒绝访问'); }; //不使用供应商前缀 navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(localMediaStream); //请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件 video.onloadedmetadata = function(e) { //后续代码略 }; }, onFailSoHard); </script>
在这段代码中,结合了video元素的使用。请注意我们没有使用video元素的src属性值,而是为video元素指定了一个引用媒体文件的URL地址,同时将代表了从摄像头中所获取到的视频数据的LocalMediaStream对象转换为一个Blob URL。
在这段代码中,同时为video元素使用autoplay属性,如果不使用该属性,则video元素将停留在所获取的第一帧画面处。
请注意:在Chrome浏览器中,如果只使用{audio:true},则引发BUG,在Opera浏览器中,同样不能使用audio元素。
如果你想让多个浏览器同时支持getUserMedia方法,请使用如下所示的代码:
复制代码
代码如下:
window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var video = document.getElementById('video'); if (navigator.getUserMedia) { navigator.getUserMedia({audio: true, video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); }, onFailSoHard); } else { alert('您的浏览器不支持getUserMedia方法'); }
安全性
在有些浏览器中,当调用getUserMedia方法时,显示一个提示窗口,询问用户是否允许或拒绝访问他们的摄像头或麦克风。
拍照
在Canvas API中,可以使用ctx.drawImage(video,0,0)方法将video元素中的某一帧画面输出到canvas元素中。当然,既然我们已经将捕捉到的用户摄像头中的图像信息输出到video元素中,当然也可以将图像信息通过video元素输出到canvas元素中,即实现实时拍照功能,代码如下所示。
复制代码
代码如下:
<video autoplay></video> <img src="" id="img" ></img> <canvas style="display:none;" id="canvas" ></canvas> var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var localMediaStream = null; function snapshot() { if (localMediaStream) { ctx.drawImage(video, 0, 0); document.getElementById('img').src = canvas.toDataURL('image/png'); } } video.addEventListener('click', snapshot, false); //不使用供应商前缀 navigator.getUserMedia({video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); localMediaStream = stream; }, onFailSoHard);
应用CSS滤镜
目前为止,可以在Chrome 18以上版本的浏览器中使用CSS滤镜。
通过CSS滤镜的使用,我们可以对video元素中捕捉的视频添加各种图像滤镜效果。
复制代码
代码如下:
<style> #video3 { width: 307px; height: 250px; background: rgba(255,255,255,0.5); border: 1px solid #ccc; } .grayscale { -webkit-filter: grayscale(1); } .sepia { -webkit-filter: sepia(1); } .blur { -webkit-filter: blur(3px); } ... </style> <video id="video" autoplay></video> <script> var idx = 0; var filters = ['grayscale', 'sepia', 'blur', 'brightness', 'contrast', 'hue-rotate', 'hue-rotate2', 'hue-rotate3', 'saturate', 'invert', '']; function changeFilter(e) { var el = e.target; el.className = ''; var effect = filters[idx++ % filters.length]; // loop through filters. if (effect) { el.classList.add(effect); } } document.getElementById('video').addEventListener('click', changeFilter, false); </script>
相关推荐:
以上是使用HTML5捕捉音訊與視訊資訊概觀及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!