Habrahabrの読者に、 Dave Voyles による記事「ブラウザでのMedia Capture APIの使用」の翻訳を提供します。

今日は、W3CのWebリアルタイムコミュニケーションワーキンググループとデバイスAPIワーキンググループで共同開発されたMedia CaptureとStreams APIを試してみたいと思います。一部の開発者は、WebページがWebカメラやマイクなどのデバイスにアクセスできるようにするメインインターフェイスであるgetUserMediaとしてそれらを知っている場合があります。

プロジェクトのソースコードは、私のGitHubにあります。実験用の実用的なデモがあります。最新のWindows 10プレビューリリースでは、Microsoftは最初にMicrosoft EdgeのメディアキャプチャAPIのサポートを追加しました。この例のコードの多くは、エッジ開発チームがテストサイトで行ったPhoto Captureサンプルからのものです。

もう少し学習したい人のために、Eric BidelmanはこれらのAPIのストーリーを伝える優れたHTML5 rocksの記事を書いています。

始めましょう

getUserMedia（）メソッドは、Media Capture APIを学習するための優れた出発点です。 getUserMedia（）の呼び出しは、 MediaStreamConstraintsを引数として受け取り、キャプチャデバイスおよびキャプチャされたメディアストリーム（マイクの音量、ビデオ解像度、カメラがオンになっている（翻訳者のメモを意味する）など）の設定または要件を決定します。

MediaStreamConstraintsを通じて、enumerateDevices（）メソッドから取得できるIDを使用して特定のキャプチャデバイスを使用することもできます。ユーザーが許可を与えると、特定のMediaStreamConstraintsが見つかった場合、getUserMedia（）はMediaSteamオブジェクトとともにプロミスを返すことができます。

プラグインをダウンロードすることなく、これらすべてを実行できます！この例では、APIについてさらに学習し、取得した動画と画像に優れたフィルターを作成します。ブラウザはサポートされていますか？ getUserMedia（）はChrome 21、Opera 18、Firefox 17で利用可能でしたが、現在はEdgeで利用できました。

検出機能

ディスカバリー機能は、navigator.getUserMediaの存在のアイドルチェックです。すべてのブラウザをチェックするのは大変です。 Modernizrの使用をお勧めします。仕組みは次のとおりです。

if (Modernizr.getusermedia) { var getUM = Modernizr.prefixed('getUserMedia', navigator); getUM({video: true}, function( //... //... }

デモのようにModernizrがなければ、これを使用します。

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (!navigator.getuserMedia) { Console.log('You are using a browser that does not support the Media Capture API'); }

ビデオプレーヤー

HTMLでは、ページの上部にビデオタグを配置できます。自動再生中です。これがないと、最初のフレームにハングアップします。

 <div class="view--video"> <video id="videoTag" src="" autoplay muted class="view--video__video"></video> </div>

ここにはまだメディアソースはありませんが、Javascriptを使用して行います。

デバイスへのアクセス

新しい機能により、開発者にいくつかの新しい機能が提供される可能性がありますが、ユーザーセキュリティの観点からリスクがあるため、Webアプリケーションを起動するときに最初に発生するのは、キャプチャデバイスへのユーザーアクセス許可の要求です。 getUserMediaはいくつかのパラメーターを受け入れます。最初のオブジェクトは、アクセスするメディアの各タイプの詳細と要件を示すオブジェクトです。カメラにアクセスするには、カメラとマイクの両方を使用するために、最初のパラメーターは{video：true}でなければなりません{video：true、audio：true}。

マルチカメラのサポート

ここでは本当に興味深いものになります。この例では、 MediaDevices.enumeratedDevicesメソッドも使用します。マイク、カメラ、スピーカーなど、システムで使用可能な入出力デバイスに関する情報を収集します。このプロミスは、デバイスのタイプ（タイプ）を含む複数のプロパティを返すことができます：「videoinput」、「audioinput」、または「audiooutput」。さらに、文字列の形式で一意のIDを生成できます（videoinput：id 、たとえば：「FaceTime HD Camera（Built-in）」。この技術は実験的なものであり、 CanIUse.comではまだ利用できません。

ビデオプレーヤーへのソースの設定

initalizeVideoStream関数では、ページからビデオタグを取得し、それをストリームソースとして設定していることがわかります。ストリーム自体はblobです。ブラウザがsrcObject属性をサポートしていない場合は、メディアストリームのURLを作成して設定する必要があります。

  var initializeVideoStream = function(stream) { mediaStream = stream; var video = document.getElementById('videoTag'); if (typeof (video.srcObject) !== 'undefined') { video.srcObject = mediaStream; } else { video.src = URL.createObjectURL(mediaStream); } if (webcamList.length > 1) { document.getElementById('switch').disabled = false; } };

CSSフィルターを適用する

私は下手な写真家なので、Instagramのフィルターに常に頼っています。しかし、写真やビデオにフィルターを適用できるとしたらどうでしょうか？できます！

ビデオストリーム用の単純な関数を作成しました。これにより、CSSフィルターをリアルタイムで適用できます。画像の機能とほとんど同じです。

  var changeCssFilterOnVid = function () { var el = document.getElementById('videoTag'); el.className = 'view--video__video'; var effect = filters[index++ % filters.length] if (effect) { el.classList.add(effect); console.log(el.classList); } }

クラスの先頭には、フィルターの名前を含む配列があります。これらは文字列として保存され、名前でCSSクラスに対応します。
// CSSフィルターvar index = 0; var filters = ['grayscale'、 'sepia'、 'blur'、 'invert'、 'brightness'、 'contrast'、 '']; およびCSS：

 /* image * video filters */ .grayscale { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); filter: grayscale(1); } .sepia { -webkit-filter: sepia(1); -moz-filter: sepia(1); -ms-filter: sepia(1); filter: sepia(1); } .blur { -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); }

Edgeのテストドライブページで、より多くの例を参照し、リアルタイムの値を変更できます。

画像を保存する

コードを理解すると、慣れていないことがいくつかわかるかもしれません。最初に目を引いたのは、navigator.msSaveBlobです。 Blobコンストラクターを使用すると、クライアントで直接Blobを簡単に作成および操作できます。 IE 10以降でサポートされています。

msSaveBlobを使用すると、blobオブジェクト（この場合は写真）をディスクに保存できます。彼には兄弟がいます。msSaveOrOpenBlobメソッドを使用すると、ブラウザ内から画像を開くことができます。

  var savePhoto = function() { if (photoReady) { var canvas = document.getElementById('canvasTag'); if (navigator.msSaveBlob) { var imgData = canvas.msToBlob('image/jpeg'); navigator.msSaveBlob(imgData, 'myPhoto.jpg'); } else { var imgData = canvas.toDataURL('image/jpeg'); var link = document.getElementById('saveImg'); link.href = imgData; link.download = 'myPhoto.jpg'; link.click(); } canvas.removeEventListener('click', savePhoto); document.getElementById('photoViewText').innerHTML = ''; photoReady = false; } };

ブラウザがメソッドをサポートしている場合、画像を保存するために必要なコードの量が削減されます。

次は？

これはほんの始まりに過ぎません。これに加えて、WebGLを使用できます。これにより、より多くのフィルターを適用したり、オーディオ/ビデオストリームをリアルタイムでインタラクティブな環境に配置したりできます。多分これは私の次のプロジェクトになります...

さらに、Web Audio APIをバインドして、オーディオストリームに周波数変調を適用できます。 Web Audioチューナーのこの例は、これを完全に示しています。視覚化する方が簡単だと思う人もいるので、Microsoftの例をご覧ください。

モバイルブラウザーがこのテクノロジーのサポートを開始すると、これらのAPIを使用してメインハードウェアをリンクし、プラットフォームに注意を払うことなくそれらを操作できます。今がウェブ開発者になるのに最適な時期です。これを使用した後、なぜ私がこれに参加できてうれしいのかを理解してください。

見つかったすべてのエラーについては、hpで報告してください。

ブラウザでMedia Capture APIを使用する