本文概述

長(zhǎng)期以來,音頻與視頻信息的捕捉一直是Web開發(fā)中的一個(gè)難點(diǎn)。許多年來,我們一直依賴瀏覽器插件來實(shí)現(xiàn)這個(gè)需求。

在HTML 5中,出現(xiàn)了許多可以訪問硬件設(shè)備的API,例如訪問GPS設(shè)備的Geolocation API、訪問accelerometer設(shè)備的Orientation API、訪問GPU設(shè)備的WebGL API、訪問音頻播放設(shè)備的Web Audio API等等。這些API是非常強(qiáng)大的,因?yàn)殚_發(fā)者可以直接通過編寫JavaSccript腳本代碼來訪問底層硬件設(shè)備。

本文介紹一種新的API,該API通過使用navigatior.getUserMedia()方法來讓W(xué)eb應(yīng)用程序擁有訪問用戶攝像頭與麥克風(fēng)設(shè)備的能力。

捕捉媒體數(shù)據(jù)的技術(shù)發(fā)展歷史

在過去幾年里,開始出現(xiàn)了在Web應(yīng)用程序中訪問客戶端本地設(shè)備的需求,因此,W3C組織決定組織一個(gè)DAP(Device APIS POLICY)工作小組,來為該需求的實(shí)現(xiàn)制定一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。

接下來讓我們來看看在2011年發(fā)生了哪些事情：

在HTML頁(yè)面文件中實(shí)現(xiàn)媒體數(shù)據(jù)的捕捉

DAP工作小組的第一個(gè)要制定的標(biāo)準(zhǔn)就是如何在Web應(yīng)用程序的HTML頁(yè)面中實(shí)現(xiàn)媒體數(shù)據(jù)的捕捉。他們決定重載類型為file的input元素(<input type="file">),并且為accept屬性添加一個(gè)新的屬性值。

如果開發(fā)者想實(shí)現(xiàn)用戶通過攝像頭進(jìn)行拍照的功能,可以書寫如下所示的代碼。

代碼如下:

<input type="file" accept="image/*;capture=camera">

錄制視頻數(shù)據(jù)與音頻數(shù)據(jù)的代碼與之類似：

代碼如下:

<input type="file" accept="video/*;capture=camcorder">

<input type="file" accept="audio/*;capture=microphone">

在這些代碼中,只需使用file控件(類型為file的input元素)即可完成拍照或錄制媒體數(shù)據(jù)的功能。但是在因?yàn)檫@些代碼中尚缺乏一些實(shí)現(xiàn)與之相關(guān)的需求(例如在canvas元素中渲染捕捉到的視頻數(shù)據(jù),或者對(duì)捕捉到的視頻數(shù)據(jù)應(yīng)用WEBGL濾鏡)的能力,所以沒有得到開發(fā)者的廣泛應(yīng)用。

支持瀏覽器：

Android 3.0瀏覽器

Chrome for Android (0.16)

Firefox Mobile 10.0

device元素

如果使用file控件,則捕捉媒體數(shù)據(jù)后對(duì)其進(jìn)行處理的能力是非常有限的,所以出現(xiàn)了一種新的可支持任何設(shè)備的標(biāo)準(zhǔn)。該標(biāo)準(zhǔn)使用device元素。

Opera瀏覽器是第一個(gè)通過device元素實(shí)現(xiàn)視頻數(shù)據(jù)捕捉的瀏覽器。幾乎在同一天,WhatWG組織決定使用navigator.getUserMedia()方法來捕捉媒體數(shù)據(jù)。一個(gè)星期后,Opera推出一個(gè)新的支持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>

支持瀏覽器：

不幸的是,目前為止尚沒有一個(gè)正式版的瀏覽器中支持device元素。

WEBRTC

最近,由于WebRTC(Web Real Time Communication:Web實(shí)時(shí)通信)API的出現(xiàn),媒體數(shù)據(jù)捕捉技術(shù)又有了一個(gè)很大的發(fā)展。Google、Opera、Mozilla等公司均正在努力將其實(shí)現(xiàn)在自己的瀏覽器中。

WebRTC API是一個(gè)與getUserMedia方法緊密相關(guān)的API,它提供一種訪問客戶端本地的攝像頭或麥克風(fēng)設(shè)備的能力。

支持瀏覽器：

目前為止,在Chrome 18版瀏覽器中,在chrome://flags頁(yè)面中進(jìn)行設(shè)置后可使用WebRTC,在Chrome 21版本的瀏覽器中,該API被默認(rèn)使用,不再需要設(shè)置。在Opera 12以上與Firefox 17版本的瀏覽器中默認(rèn)支持WebRTC API。

使用getUserMedia方法

通過使用getUserMedia方法,我們可以不依靠插件而直接訪問客戶端本地的攝像頭設(shè)備與麥克風(fēng)設(shè)備。

檢測(cè)瀏覽器支持

可以通過如下所示的方法來檢測(cè)瀏覽器是否支持getUserMedia方法。

代碼如下:

function hasGetUserMedia() {

//請(qǐng)注意:在Opera瀏覽器中不使用前綴

return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia || navigator.msGetUserMedia);

}

if (hasGetUserMedia()) {

alert('您的瀏覽器支持getUserMedia方法');

}

else {

alert('您的瀏覽器不支持getUserMedia方法');

}

獲取訪問設(shè)備的權(quán)限

為了訪問客戶端攝像頭設(shè)備與麥克風(fēng)設(shè)備,我們首先需要獲取權(quán)限。getUserMedia方法的第一個(gè)參數(shù)是一個(gè)用于指定媒體類型的對(duì)象。例如,當(dāng)你想訪問攝像頭設(shè)備時(shí),第一個(gè)參數(shù)應(yīng)該為{video:true},為了同時(shí)訪問攝像頭設(shè)備與麥克風(fēng)設(shè)備,需要使用{video:true,audio:true}參數(shù),代碼如下所示：

代碼如下:

<video autoplay id="video"></video>

<script>

var onFailSoHard = function() {

alert('設(shè)備拒絕訪問');

};

//不使用供應(yīng)商前綴

navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {

var video = document.getElementById('video');

video.src = window.URL.createObjectURL(localMediaStream);

//請(qǐng)注意:當(dāng)使用getUserMedia方法時(shí),在Chrome瀏覽器中不觸發(fā)onloadedmetadata事件

video.onloadedmetadata = function(e) {

//后續(xù)代碼略

};

}, onFailSoHard);

</script>

在這段代碼中,結(jié)合了video元素的使用。請(qǐng)注意我們沒有使用video元素的src屬性值,而是為video元素指定了一個(gè)引用媒體文件的URL地址,同時(shí)將代表了從攝像頭中所獲取到的視頻數(shù)據(jù)的LocalMediaStream對(duì)象轉(zhuǎn)換為一個(gè)Blob URL。

在這段代碼中,同時(shí)為video元素使用autoplay屬性,如果不使用該屬性,則video元素將停留在所獲取的第一幀畫面處。

請(qǐng)注意：在Chrome瀏覽器中,如果只使用{audio:true},則引發(fā)BUG,在Opera瀏覽器中,同樣不能使用audio元素。

如果你想讓多個(gè)瀏覽器同時(shí)支持getUserMedia方法,請(qǐng)使用如下所示的代碼：

代碼如下:

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方法');

}

安全性

在有些瀏覽器中,當(dāng)調(diào)用getUserMedia方法時(shí),顯示一個(gè)提示窗口,詢問用戶是否允許或拒絕訪問他們的攝像頭或麥克風(fēng)。

拍照

在Canvas API中,可以使用ctx.drawImage(video,0,0)方法將video元素中的某一幀畫面輸出到canvas元素中。當(dāng)然,既然我們已經(jīng)將捕捉到的用戶攝像頭中的圖像信息輸出到video元素中,當(dāng)然也可以將圖像信息通過video元素輸出到canvas元素中,即實(shí)現(xiàn)實(shí)時(shí)拍照功能,代碼如下所示。

代碼如下:

<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);

//不使用供應(yīng)商前綴

navigator.getUserMedia({video: true}, function(stream) {

video.src = window.URL.createObjectURL(stream);

localMediaStream = stream;

}, onFailSoHard);

應(yīng)用CSS濾鏡

目前為止,可以在Chrome 18以上版本的瀏覽器中使用CSS濾鏡。

通過CSS濾鏡的使用,我們可以對(duì)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>