首頁 > 文章 > web前端 > 使用HTML5捕捉音訊與視訊資訊概觀及實例

使用HTML5捕捉音訊與視訊資訊概觀及實例

不言原創: 2018-05-08 14:56:551216瀏覽

這篇文章主要介紹了關於使用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">

在這些程式碼中,只需使用file控件(類型為file的input元素)即可完成拍照或錄製媒體資料的功能。但是在因為這些程式碼中尚缺乏一些實現與之相關的需求(例如在canvas元素中渲染捕捉到的視訊資料,或者對捕捉到的視訊資料應用WEBGL濾鏡)的能力,所以沒有得到開發者的廣泛應用。
支援瀏覽器：
Android 3.0瀏覽器
Chrome for Android (0.16)
Firefox Mobile 10.0
device元素
如果使用file控制項,則捕捉媒體資料後對其進行處理的能力是非常有限的,所以出現了一種新的可支援任何設備的標準。該標準使用device元素。
Opera瀏覽器是第一個透過device元素實現影片資料捕捉的瀏覽器。幾乎在同一天,WhatWG組織決定使用navigator.getUserMedia()方法來捕捉媒體資料。一個星期後,Opera推出一個新的支援navigator.getUserMedia()方法的瀏覽器。後來,Microsoft工具推出支援此方法的IE 9瀏覽器。
device元素的使用方法如下所示。

複製程式碼

程式碼如下:

<device type="media" onchange="update(this.data)"></device> 
<video autoplay></video> 
<script> 
function update(stream) { 
document.querySelector(&#39;video&#39;).src = stream.url; 
} 
</script>

支援瀏覽器
:
不幸的是,目前為止尚沒有一個正式版的瀏覽器中支援device元素。
WEBRTC
最近,由於WebRTC(Web Real Time Communication:Web即時通訊)API的出現,媒體資料捕捉技術又有了一個很大的發展。 Google、Opera、Mozilla等公司都正在努力將其實現在自己的瀏覽器中。
WebRTC API是一個與getUserMedia方法緊密相關的API,它提供一種存取客戶端本地的攝影機或麥克風設備的能力。
支援瀏覽器：
目前為止,在Chrome 18版瀏覽器中,在chrome://flags頁面中進行設定後可使用WebRTC,在Chrome 21版本的瀏覽器中,該API被預設使用,不再需要設定。在Opera 12以上與Firefox 17版本的瀏覽器中預設支援WebRTC API。
使用getUserMedia方法
透過使用getUserMedia方法,我們可以不依靠外掛程式而直接存取客戶端本地的攝影機裝置與麥克風裝置。偵測瀏覽器支援

可以透過如下所示的方法來偵測瀏覽器是否支援getUserMedia方法。

複製程式碼

程式碼如下:###

function hasGetUserMedia() { 
//请注意:在Opera浏览器中不使用前缀 
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 
if (hasGetUserMedia()) { 
alert(&#39;您的浏览器支持getUserMedia方法&#39;); 
} 
else { 
alert(&#39;您的浏览器不支持getUserMedia方法&#39;); 
}

获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。getUserMedia方法的第一个参数是一个用于指定媒体类型的对象。例如,当你想访问摄像头设备时,第一个参数应该为{video:true},为了同时访问摄像头设备与麦克风设备,需要使用{video:true,audio:true}参数,代码如下所示：

复制代码

代码如下:

<video autoplay id="video"></video> 
<script> 
var onFailSoHard = function() { 
alert(&#39;设备拒绝访问&#39;); 
}; 
//不使用供应商前缀 
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { 
var video = document.getElementById(&#39;video&#39;); 
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(&#39;video&#39;); 
if (navigator.getUserMedia) { 
navigator.getUserMedia({audio: true, video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
}, onFailSoHard); 
} 
else { 
alert(&#39;您的浏览器不支持getUserMedia方法&#39;); 
}

安全性
在有些浏览器中,当调用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(&#39;video&#39;); 
var canvas = document.getElementById(&#39;canvas&#39;); 
var ctx = canvas.getContext(&#39;2d&#39;); 
var localMediaStream = null; 
function snapshot() { 
if (localMediaStream) { 
ctx.drawImage(video, 0, 0); 
document.getElementById(&#39;img&#39;).src = canvas.toDataURL(&#39;image/png&#39;); 
} 
} 
video.addEventListener(&#39;click&#39;, 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 = [&#39;grayscale&#39;, &#39;sepia&#39;, &#39;blur&#39;, &#39;brightness&#39;, &#39;contrast&#39;, &#39;hue-rotate&#39;, 
&#39;hue-rotate2&#39;, &#39;hue-rotate3&#39;, &#39;saturate&#39;, &#39;invert&#39;, &#39;&#39;]; 
function changeFilter(e) { 
var el = e.target; 
el.className = &#39;&#39;; 
var effect = filters[idx++ % filters.length]; // loop through filters. 
if (effect) { 
el.classList.add(effect); 
} 
} 
document.getElementById(&#39;video&#39;).addEventListener(&#39;click&#39;, changeFilter, false); 
</script>

使用HTML5捕捉音訊與視訊資訊概觀及實例

相關文章