HTML5 を使用したオーディオおよびビデオ情報のキャプチャの概要と例

この記事では、HTML5 を使用して音声とビデオの情報をキャプチャする方法の概要と例を主に紹介します。これは、必要とする友人と共有して参考にすることができます。 Web 開発で話題になっている問題ですが、Web アプリケーションが navigatior.getUserMedia() メソッドを使用してユーザーのカメラやマイク デバイスにアクセスできるようにする新しい API を紹介します

この記事の概要

長い間、オーディオとビデオ情報のキャプチャは、Web 開発において常に困難な点でした。長年にわたり、私たちはこのニーズを満たすためにブラウザーのプラグインに依存してきました。

HTML 5 には、GPS デバイスにアクセスするための Geolocation API、加速度計デバイスにアクセスするための Orientation API、GPU デバイスにアクセスするための WebGL API、オーディオ再生デバイスにアクセスするための Web Audio API など、ハードウェア デバイスにアクセスできる API が多数あります。 、 等々。開発者は JavaScript スクリプト コードを記述することで基盤となるハードウェア デバイスに直接アクセスできるため、これらの API は非常に強力です。

この記事では、Web アプリケーションが navigatior.getUserMedia() メソッドを使用してユーザーのカメラおよびマイク デバイスにアクセスできるようにする新しい API を紹介します。

メディア データのキャプチャの技術開発の歴史
ここ数年、Web アプリケーションでクライアントのローカル デバイスにアクセスする必要性が浮上し始めたため、W3C 組織は、DAP (Device APIS POLICY) ワーキング グループを組織することを決定しました。この要件を実現するための統一標準を開発します。 2011 年に何が起こったかを見てみましょう:

HTML ページ ファイルでのメディア データのキャプチャの実装
DAP ワーキング グループによって開発される最初の標準は、Web アプリケーションの HTML ページでメディア データをキャプチャする方法です。 メディア データのキャプチャ。彼らは、ファイル型 (3525558f8f338d4ea90ebf22e5cde2bc) の入力要素をオーバーロードし、新しい属性値を accept 属性に追加することにしました。
開発者がユーザーがカメラで写真を撮る機能を実装したい場合は、以下に示すようにコードを記述できます。

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

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

ビデオデータとオーディオデータを記録するためのコードは次のようになります:

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

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

これらのコードでは、ファイル コントロール (ファイル タイプの入力要素) を使用するだけで、写真の撮影やメディア データの記録の機能を完了できます。ただし、これらのコードには、いくつかの関連要件 (キャンバス要素でのキャプチャされたビデオ データのレンダリング、キャプチャされたビデオ データへの WEBGL フィルターの適用など) を実装する機能がまだ欠けているため、開発者によって広く使用されていません。

サポートされているブラウザ:

Android 3.0 ブラウザ
Chrome for Android (0.16)
Firefox Mobile 10.0
device 要素
ファイル コントロールを使用する場合、メディア データをキャプチャして処理する機能は非常に制限されるため、新しい標準が存在します。あらゆるデバイスをサポートします。この規格ではデバイス要素を使用します。
Opera ブラウザは、デバイス要素を介してビデオ データ キャプチャを実装した最初のブラウザです。ほぼ同じ日に、WhatWG 組織はメディア データをキャプチャするために navigator.getUserMedia() メソッドを使用することを決定しました。 1 週間後、Opera は navigator.getUserMedia() メソッドをサポートする新しいブラウザをリリースしました。その後、Microsoft Tools によって、この方法をサポートする 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: ウェブリアルタイム通信) API の登場により、メディアデータキャプチャ技術が大きく進歩しました。 Google、Opera、Mozilla などの企業は、ブラウザへの実装に熱心に取り組んでいます。
WebRTC API は、クライアントのローカル カメラまたはマイク デバイスにアクセスする機能を提供する getUserMedia メソッドに密接に関連する API です。
サポートされているブラウザ:
これまでのところ、Chrome 18 バージョンのブラウザでは、chrome://flags ページで設定した後に WebRTC を使用できます。Chrome 21 バージョンのブラウザでは、この API がデフォルトで使用されます。セットアップは不要になりました。 WebRTC API は、Opera 12 および Firefox 17 以降のブラウザでデフォルトでサポートされています。
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(&#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('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(&#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+canvas动态实现饼状图步骤详解

HTML5声音录制/播放功能的实现代码

以上がHTML5 を使用したオーディオおよびビデオ情報のキャプチャの概要と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。