getUserMedia()の基本getUserMedia()は、カメラやマイクなどメディアデバイスにアクセスできるAPIです。今回はもっともシンプルなデモで、引数の概要をおさえ、このAPIの使い方を掴んでみましょう。Streamsという仕様の中から、getUserMedia()というAPIを紹介します。APIがまとまっている仕様です。Capureの部分を、次回の記事ではStreamsの部分に焦点をあてて解説していきます。Streamsこの仕様に含まれるgetUserMedia()というAPIを使うことで、端末のカメラやマイクの入力ストリームを、JavaScriptから取得・操作することができます。APIやコードの解説をしていく前に、このAPIを使うと何ができるようになるのか、簡単な例をデモで示します。このシリーズの以降のデモは、お使いの端末にカメラやマイクが付いていない場合、またはこのAPIに対応していない環境(対応環境は後述)では確認できません。getUserMedia()でできること新規タブで開くボタンをクリックするとカメラの利用許可が求められます。それを許可すると、あらかじめ設置したvideoタグにカメラの映像が映し出されるデモです。このように取得した音や映像のストリームはさまざまな使い方ができます。APIで録画そのほかにもアイデア次第でいろいろなことに利用できますし、それらはすべて、JavaScriptで記述でき、ブラウザ上で動きます。前提として、対応ブラウザについて触れておきます。etcEdgeFirefoxChromeSafariつい先日ですが、Safariのバージョン11がリリースされ、WebRTCの対応とあわせて実装されています。そのため現時点では、IEを除くすべてのモダンブラウザで利用が可能となっています。11はiOSでも利用可能なため、iPhoneやiPadからも利用が可能です。開発時に注意したいこととして、プロトコルはhttpsである必要があります。端末のカメラにアクセスできてしまうため、セキュリティには配慮すべきという理由からです。次の仕様書にその旨が書いてあります。Architecturelocalhostやfile://で開発するだけなら問題ないブラウザもありますが、サービスを公開する場合には、必ずhttpsで配信するようにしてください。シンタックスそれではさっそくコードを見ていきます。getUserMedia()は、グローバルオブジェクトであるNavigatorオブジェクトのmediaDevicesクラスから利用できます。});IDLは次のとおりです。constraints);このようにPromiseを返すAPIとなっており、resolveされた場合は、MediaStreamが取得できます。rejectされた場合は、一般的なほかのPromiseと同じくエラーが渡され、それでエラーハンドリングをすることになります。【ワンポイント】非推奨のシンタックス最新の仕様だとPromiseが返されますが、次のようにコールバックを渡す方式だったことも昔はありました。mediaDevicesではなくNavigatorオブジェクトから直接利用していました。インターネットで検索する場合、古い記事が見つかることも多いため注意が必要です。errorCallback);このAPIを実行すると、最初は必ずユーザーにマイク・カメラの利用許可を確認するダイアログが表示されます。ChromeのダイアログFirefoxの場合は、どのマイク・カメラを使用するかの選択もできるようになっています。Firefoxのダイアログこれらのダイアログで許可をすることで、そのオリジンでの利用が許可できます。次のような場合は、ストリームの取得ができずrejectされます。引数で指定した条件に見合うカメラ・マイクが見つからない場合(後述)ブラウザにもよりますが、ブラウザがカメラやマイクを利用している間はタブにマークがつくものもあります。ハードウェアの機能として、カメラの横にあるインジケータが点灯する端末もあります(Macなど)。一度与えた許可を取り消す方法もありますが、ブラウザごとに詳細は異なります。Chromeの場合、アドレスバーのサイト情報の部分や、右側のカメラアイコンをクリックして表示されるコントロール画面から、与えた許可を取り消すことができます。カメラ許可のコントロール(サイト情報)カメラ許可のコントロール(カメラアイコン)引数で指定できる値getUserMedia()に渡せる唯一の引数についてです。オブジェクトでvideoとaudioそれぞれのプロパティを指定します。})先の例ではこのように、videoとaudioにそれぞれtrueを指定していただけでした。false;};IDLによると、videoとaudioそれぞれ、booleanかMediaTrackConstraintsの指定が可能となっています。Streamsどちらもtrueにすると、カメラとマイク両方の許可を求めるようになりますし、falseを設定した場合や未指定の場合は許可を求めません(利用しません)。実は、この設定値はMediaTrackConstraintsという値で、よりさまざまな指定ができます。Streamsたとえばこのような指定が可能です。これは、カメラの解像度を指定しています。}もうひとつの指定の例です。することで、リアカメラではなくフロントカメラを利用したい旨を示すことができます。}そのほかにもaspectRatioやframeRateなど、仕様上は、さまざまな値の指定が可能となっています。指定できる値は「設定値」というよりも、その名のとおり「制約」と捉えるとわかりやすいです。いうのも、必ずその指定になるというわけではなく、最終的にはブラウザが判断した結果になるからです。これら詳細な指定の方法については、仕様書に詳しく記載されているので、そちらを確認してみてください。Patternデモのコード解説getUserMedia()の使い方がわかったところで、冒頭のデモのコードを抜粋して、解説していきます。false);getUserMedia()でカメラのストリームのみを取得しています。取得できたストリームは、video要素のsrcObjectに代入することで、そのまま再生することができます。stream)HTML側でvideo要素にautoplay属性を指定しておくか、JavaScriptからplay()メソッドを実行して再生する必要があることに注意してください(今回のデモではautoplay属性を利用します)。autoplay></video>また、iOSのSafariで利用する場合、playsinline属性を指定することも合わせて検討してください。playsinline属性が指定されていない場合、ストリームはフルスクリーンで再生されます。getUserMedia()で取得したMediaStreamの詳細や、取得した入力ストリームをストップする方法など詳しくは次回の記事で紹介します。この例ではカメラを使いましたが、マイクだけを利用することももちろん可能です。});これは端末マイクから拾った音をそのまま端末スピーカーから出力するコードなので、試す際にはハウリングに注意してください。入力デバイスを切り替えるFirefoxの場合、カメラ・マイクの利用許可を求めるダイアログで、どのデバイスを利用するかを選択することができました。Chromeなどのブラウザではその選択肢が提示されないため、デバイスを切り替える場合は自分でコードを書く必要があります。利用可能なデバイスは、navigator.mediaDevices.enumerateDevices()メソッドから取得できます。});このように利用可能なデバイス(MediaDeviceInfo)配列が、Promiseで取得できます。これは筆者の端末のChromeでの実行結果の例です。ProをHDMIで外部モニタに接続しつつ、外付けのUSBヘッドセットを接続しているため、たくさんの候補があります。して取得したdeviceIdを、getUserMedia()の引数で指定します。},}こうすることで、任意の入力デバイスを使用することができます*。現時点ではChromeのみ、enumerateDevices()の結果に入力デバイスだけでなく出力デバイスも含まれるようです。APIで定義されるsetSinkId()というメソッドを使うことで、出力デバイスの制御に利用できます。おわりに今回の記事では、ブラウザから端末のカメラ・マイクにアクセスできるgetUserMedia()について紹介しました。こんなにも簡単なコードで実現することができ、何か試しにコードを書いてみたくなったのではないでしょうか。getUserMedia()が受け取る引数についての指定についても紹介しました。今回は単に取得したストリームをvideo要素に表示するだけでしたが、次回の記事ではさらに応用したデモを紹介する予定です。有右嗣フロントエンド・エンジニア業務系SIerにて主にWebサービス開発の上流工程を経験した後、大手インターネット企業に転職。ソーシャルゲームをはじめとする、モバイル向けWebサービスのフロントエンド開発を数多く経験する。2015年株式会社ピクセルグリッドへ入社。フロントエンドはもちろん、サーバーサイドやネットワークの知識も豊富である。特定商取引法に基づく。