HTML5_html5 チュートリアルのヒントを使用してオーディオおよびビデオ情報をキャプチャする概要と例

この記事の概要
Web 開発において、オーディオおよびビデオ情報のキャプチャは長い間困難でした。長年にわたり、私たちはこのニーズを満たすためにブラウザーのプラグインに依存してきました。
HTML 5 には、GPS デバイスにアクセスする Geolocation API、加速度計デバイスにアクセスする Orientation API、GPU デバイスにアクセスする WebGL API、オーディオ再生デバイスにアクセスする Web Audio API など、ハードウェア デバイスにアクセスできる API が多数あります。 。開発者は JavaScript スクリプト コードを記述することで基盤となるハードウェア デバイスに直接アクセスできるため、これらの API は非常に強力です。
この記事では、Web アプリケーションが navigatior.getUserMedia() メソッドを使用してユーザーのカメラおよびマイク デバイスにアクセスできるようにする新しい API を紹介します。

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

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

コードをコピー

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

ビデオ データとオーディオ データを記録するコードは似ています:

コードをコピーします

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

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

これらのコードでは、ファイル コントロール (ファイル タイプの入力要素) を使用します。写真の撮影またはメディア データの記録機能を完了します。ただし、これらのコードには、いくつかの関連要件 (キャンバス要素でのキャプチャされたビデオ データのレンダリング、キャプチャされたビデオ データへの WEBGL フィルターの適用など) を実装する機能がまだ欠けているため、開発者によって広く使用されていません。
サポートされているブラウザ:
Android 3.0 ブラウザ
Chrome for Android (0.16)
Firefox Mobile 10.0
デバイス要素
ファイル コントロールを使用する場合は、メディア データをキャプチャして処理します。機能は非常に限られているため、あらゆるデバイスをサポートできる新しい標準が登場しました。この規格ではデバイス要素を使用します。
Opera ブラウザは、デバイス要素を通じてビデオ データをキャプチャする最初のブラウザです。ほぼ同じ日に、WhatWG 組織はメディア データをキャプチャするために navigator.getUserMedia() メソッドを使用することを決定しました。 1 週間後、Opera は navigator.getUserMedia() メソッドをサポートする新しいブラウザをリリースしました。その後、Microsoft Tools によって、この方法をサポートする IE 9 ブラウザがリリースされました。
device要素の使い方は以下の通りです。

コードをコピーします

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

<script> <br>function update(stream) { <br>ドキュメント.querySelector('ビデオ').src = ストリーム.url <br><br><br><br><strong>サポートされているブラウザ</strong>: <br>残念ながら、現時点では、device 要素をサポートしているブラウザの正式バージョンはありません。 <br>WEBRTC <br>近年、WebRTC (Web Real Time Communication: ウェブリアルタイム通信) API の登場により、メディアデータキャプチャ技術が大きく進歩しました。 Google、Opera、Mozilla などの企業は、ブラウザへの実装に熱心に取り組んでいます。 <br>WebRTC API は getUserMedia メソッドと密接に関連した API であり、クライアントのローカル カメラまたはマイク デバイスにアクセスする機能を提供します。 <br>サポートされているブラウザ: <br>これまで、Chrome 18 バージョンのブラウザでは、chrome://flags ページで設定した後に WebRTC を使用できました。Chrome 21 バージョンのブラウザでは、この API が使用されました。デフォルトでは、これ以上の設定は必要ありません。 WebRTC API は、Opera 12 および Firefox 17 以降のブラウザでデフォルトでサポートされています。 <br>getUserMedia メソッドの使用 <br>getUserMedia メソッドを使用すると、プラグインに依存せずに、クライアントのローカルのカメラ デバイスおよびマイク デバイスに直接アクセスできます。 <br><strong>ブラウザのサポートの検出</strong> <br>次に示すメソッドを使用して、ブラウザが getUserMedia メソッドをサポートしているかどうかを検出できます。 <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode99'));"><u>コードをコピーします</u></span></div>コードは次のとおりです。</div> <div class="msgborder" id="phpcode99"> <br>function hasGetUserMedia() { <br>/ /注意: 接頭辞 <br>return は Opera ブラウザでは使用されません!!(navigator.getUserMedia || navigator.webkitGetUserMedia || <br>navigator.mozGetUserMedia || navigator.msGetUserMedia); <br>} <br>if (hasGetUserMedia()) { <br>alert('お使いのブラウザは getUserMedia メソッドをサポートしています'); <br>} <br>else { <br>alert('お使いのブラウザは getUserMedia メソッドをサポートしていません'); <br>} <br> </div> <br><strong>デバイスへのアクセス許可を取得する <br></strong>クライアントのカメラ デバイスとマイク デバイスにアクセスするには、まず許可を取得する必要があります。 getUserMedia メソッドの最初のパラメータは、メディア タイプを指定するオブジェクトです。たとえば、カメラ デバイスにアクセスする場合、最初のパラメータは {video:true} にする必要があります。カメラ デバイスとマイク デバイスに同時にアクセスするには、{video:true,audio: true} パラメータは次のとおりです: <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode100'));"><u>コードをコピーします</u></span></div>コードは次のとおりです:</div> <div class="msgborder" id="phpcode100"> <br><ビデオ自動再生 id="video"></video> <br><script> <br>var onFailSoHard = function() { <br>alert('デバイス アクセスが拒否されました'); 🎜>}; <br>//ベンダープレフィックスを使用しないでください <br>navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { <br>var video = document.getElementById('video') ; <br>video.src = window.URL.createObjectURL( localMediaStream); <br>//注意: getUserMedia メソッドを使用する場合、onloadedmetadata イベントは Chrome ブラウザではトリガーされません <br>video.onloadedmetadata = function( e) { <br>//以降のコードは省略します<br>}, onFailSoHard); <br><br><br> このコードでは、ビデオ要素が結合されます。なお、video要素のsrc属性値は使用せず、video要素にメディアファイルを参照するURLアドレスを指定し、カメラから取得した映像データを表すLocalMediaStreamオブジェクトをBlob URLに変換します。 <br>このコードでは、video 要素にも autoplay 属性が使用されています。この属性が使用されない場合、video 要素は取得された最初のフレームに留まります。 </div>注意: Chrome ブラウザで {audio:true} のみを使用するとバグが発生し、Opera ブラウザでも audio 要素を使用できません。 <br>複数のブラウザで getUserMedia メソッドを同時にサポートしたい場合は、以下に示すコードを使用してください: <br><br><br><br><br><div class="msgheader">コードをコピーします<div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode101'));"> <u>コードは次のとおりです:</u></span> </div>window.URL = window.URL || </div>navigator.getUserMedia = navigator.webkitGetUserMedia | | <div class="msgborder" id="phpcode101">navigator.msGetUserMedia; <br>var video = document.getElementById('video'); <br>navigator.getUserMedia({audio: true, video: true}, function (stream) { <br>video.src = window.URL.createObjectURL(stream); <br>} <br>else { <br>alert('Yourブラウザは getUserMedia メソッドをサポートしていません'); <br>} <br><br><br><strong>セキュリティ</strong> <br>一部のブラウザでは、getUserMedia メソッドが呼び出されるときに、カメラまたはマイクへのアクセスを許可するか拒否するかをユーザーに尋ねるプロンプト ウィンドウが表示されます。 <br><strong>写真を撮る</strong> <br>Canvas API では、ctx.drawImage(video,0,0) メソッドを使用して、video 要素内の特定のフレームを Canvas 要素に出力できます。もちろん、ユーザーのカメラから撮影した画像情報をvideo要素に出力しているので、video要素を介してcanvas要素に画像情報を出力することも可能です。つまり、リアルタイムの写真撮影を実現します。関数は次のとおりです。 <br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode102'));"><u>コードをコピーします</u></span></div>コードは次のとおりです:</div> <div class="msgborder" id="phpcode102"> <br><ビデオ自動再生>< ;/video&gt ; <br /><img src="" id="img" ></img> <br><canvas style="display:none;" ></ Canvas>var video = document.getElementById('video'); <br />var ctx = Canvas.getContext('2d'); var localMediaStream = null; <br />function snapshot() { <br />if (localMediaStream) { <br />ctx.drawImage(video, 0, 0).src = Canvas .toDataURL( 'image/png'); <br />} <br />} <br />video.addEventListener('click', snapshot, false) <br />//ベンダープレフィックスを使用しないでください<br />navigator.getUserMedia ({video : true}, function(stream) { <br />video.src = window.URL.createObjectURL(stream); <br />localMediaStream = stream; <br />}, <br /><br /><); 🎜><br />CSS フィルターを適用する<br /> <br />これまでのところ、CSS フィルターは Chrome 18 以降のブラウザーで使用できます。 </div>CSS フィルターを使用すると、video 要素でキャプチャされたビデオにさまざまな画像フィルター効果を追加できます。 <br /><strong></strong><br /><br /><br />コードをコピーします<br><div class="msgheader"><div class="right">コードは次のとおりです。<span style="CURSOR: pointer" onclick="copycode(getid('phpcode103'));"><u> </u><style> >#video3 { 幅: 307px; </div>高さ: 250px; </div>背景: 1px ソリッド <div class="msgborder" id="phpcode103">} <br> <br> -webkit-filter: グレースケール(1); <br>} <br>.sepia { <br>-webkit-filter: sepia(1); <br>- webkit-filter:blur(3px); <br>} <br>... <br></style> <br><video id="video" autoplay></video>スクリプト> <br>var idx = 0; <br>var フィルター = ['グレースケール'、'セピア'、'ぼかし'、'明るさ'、'コントラスト'、'色相回転'、<br>'色相回転2 ', ' hue-rotate3', 'saturate', 'invert', '']; <br>function changeFilter(e) { <br>var el = e.target; <br>el.className = ''; 🎜>var effect = filters[idx % filters.length]; // フィルターをループします。 <br>el.classList.add(effect); <br> >document.getElementById('video').addEventListener('click',changeFilter,false); <br></script>