HTML5 を使用したオーディオおよびビデオ情報のキャプチャの概要と例-htmlチュートリアル-php.cn

この記事では、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 ページでメディアデータをキャプチャする方法です。メディアデータのキャプチャ。彼らは、ファイル型 () の入力要素をオーバーロードし、新しい属性値を 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(&#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>

ログイン後にコピー