使用HTML5捕捉音訊與視訊資訊概觀及實例_html5教學技巧

本文概述
長期以來,音訊與視訊訊息的捕捉一直是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元素(),並且為accept屬性增加一個新的屬性值。
如果開發者想實現使用者透過相機拍照的功能,可以書寫如下所示的程式碼。

複製程式碼

程式碼如下:

錄影資料與音訊資料的程式碼與之類似：

複製代碼

代碼如下:

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

複製程式碼

程式碼如下:

<script> <br />function update(stream) { <br />document.querySelector('video') .src = stream.url; <br />} <br /></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 hasG有>程式碼如下:


function hasGethasGetUser) /請注意:在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元素的使用。請注意我們沒有使用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.webkitGetUserator.webkitGet mozGetUserMedia || navigator.msGetUserMedia;
var video = document.getElementById('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({vidaudio: trueeounction (stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
}
else {
alert('您的瀏覽器不支援getUserMedia方法');

}
セキュリティ
一部のブラウザでは、getUserMedia メソッドが呼び出されるときに、カメラまたはマイクへのアクセスを許可するか拒否するかをユーザーに尋ねるプロンプト ウィンドウが表示されます。
写真を撮る
Canvas API では、ctx.drawImage(video,0,0) メソッドを使用して、video 要素内の特定のフレームを Canvas 要素に出力できます。もちろん、ユーザーのカメラから撮影した画像情報をvideo要素に出力しているので、video要素を介してcanvas要素に画像情報を出力することも可能です。つまり、リアルタイムの写真撮影を実現します。関数は次のとおりです。

コードをコピーします

コードは次のとおりです:

Canvas>var video = document.getElementById('video');
var ctx = Canvas.getContext('2d'); var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0).src = Canvas .toDataURL( 'image/png');
}
}
video.addEventListener('click', snapshot, false)
//ベンダープレフィックスを使用しないでください
navigator.getUserMedia ({video : true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
},


CSS フィルターを適用する

これまでのところ、CSS フィルターは Chrome 18 以降のブラウザーで使用できます。

CSS フィルターを使用すると、video 要素でキャプチャされたビデオにさまざまな画像フィルター効果を追加できます。



コードをコピーします

コードは次のとおりです。 幅: 307px;

高さ: 250px;

背景: 1px ソリッド

}

-webkit-filter: グレースケール(1);
}
.sepia {
-webkit-filter: sepia(1);
- webkit-filter:blur(3px);
}
...

スクリプト>
var idx = 0;
var フィルター = ['グレースケール'、'セピア'、'ぼかし'、'明るさ'、'コントラスト'、'色相回転'、
'色相回転2 ', ' hue-rotate3', 'saturate', 'invert', ''];
function changeFilter(e) {
var el = e.target;
el.className = ''; 🎜>var effect = filters[idx % filters.length]; // フィルターをループします。
el.classList.add(effect);
>document.getElementById('video').addEventListener('click',changeFilter,false);