本文概述 長期以來,音頻與視頻信息的捕捉一直是web開發中的一個難點。許多年來,我們一直依賴浏覽器插件來實現這個需求。
在Html 5中,出現了許多可以訪問硬件設備的API,例如訪問GPS設備的Geolocation API、訪問accelerometer設備的OrIEntation API、訪問GPU設備的WebGL API、訪問音頻播放設備的Web Audio API等等。這些API是非常強大的,因為開發者可以直接通過編寫JavaSccript腳本代碼來訪問底層硬件設備。
本文介紹一種新的API,該API通過使用navigatior.getUserMedia()方法來讓Web應用程序擁有訪問用戶攝像頭與麥克風設備的能力。
捕捉媒體數據的技術發展歷史 在過去幾年裡,開始出現了在Web應用程序中訪問客戶端本地設備的需求,因此,W3C組織決定組織一個DAP(Device APIS POLICY)工作小組,來為該需求的實現制定一個統一的標准。
接下來讓我們來看看在2011年發生了哪些事情：
在Html頁面文件中實現媒體數據的捕捉
DAP工作小組的第一個要制定的標准就是如何在Web應用程序的Html頁面中實現媒體數據的捕捉。他們決定重載類型為file的input元素(<input type="file">),並且為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('video').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('您的浏覽器支持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>