がねこまさし

カメラを使ってみよう ーWebRTC入門2016

連載: WebRTC入門2016 (1)

こんにちは! がねこまさしです。2014年に連載した「WebRTCを使ってみよう!」シリーズですが、内容がすっかり古くなってしまいました。そこで2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしたいと思います。

WebRTCとは?

WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。

  • API → W3C
  • ビデオ/オーディオのコーデック → IETF

APIの策定作業はWebRTC 1.0に向けて大詰めに入っています。またより詳細な低レベルのAPIを定義しているORTCも登場し、将来の統合に向けた動きも始まっています。

コーデックの選定では、ブラウザがサポートしなければならないビデオコーデックに、既にデファクトスタンダードともいえるH.264が加わりました。また、Googleが開発しているオープンソースのビデオコーデック「VP9」をサポートするブラウザも増えています。

WebRTCで何ができるの?

WebRTCは厳密に言うとビデオ/オーディオ/データ通信を行うための仕組みですが、他にも関連が深い技術があります。この連載では3つをまとめてWebRTC(とその仲間たち)ということで扱います。

この3兄弟に、HTML5の様々な要素を組み合わせて活用することができます。

  • JavaScript(大前提)
  • videoタグ、audioタグ
  • CSS3
  • Canvas
  • WebGL
  • Web Audio API
  • WebSocket

新しいAPIでカメラを使ってみよう

カメラやマイクと言ったデバイスにアクセスするには、従来はnavigator.getUserMedia()というAPIを使いました。2016年6月現在では、これに代わる新しいAPIが登場しています。

  • navigator.mediaDevices.getUserMedia() になった
  • ベンダープレフィックスが取れた
  • コールバックではなくPromiseベースになった

またデスクトップブラウザの場合は次のブラウザで利用することができます。

  • Firefox 47 … 利用可能
  • Chrome 51 … 利用する場合にはフラグ設定が必要
    • chrome://flagsというURLを開く
    • 「試験運用版のウェブ プラットフォームの機能 #enable-experimental-web-platform-features」を有効に
    • Chromeを再起動
  • Edge 25 … Windows 10 のEdgeでも利用可能

サンプルコード

それではカメラから映像を取得してみましょう。サンプルコードはこちらです。

このHTMLファイルに、(Webサーバ経由で)ブラウザからアクセスしてみてください。GitHub Pagesでも公開していますので、すぐに試すことができます。

  • GitHub Pages で試す camera_new.html(※Chromeの場合は、上記のフラグ設定が必要です)
  • GitHub でソースを見る camera_new.html

ブラウザで[Start]ボタンをクリックすると、カメラへのアクセスの許可を求めるダイアログが表示されますので、許可してください。
Firefoxの場合 getusermedia_ff

Chromeの場合 getusermedia_chrome

Edgeの場合
getusermedia_edge
ウィンドウの下の部分にこのように表示されます。他のブラウザと違うので、ちょっと気が付きにくいかもしれません。

すると、このようにカメラの映像が表示されるはずです。 camera_ff

HTMLファイルの置き場所

カメラやマイクにアクセスするには、サンプルのHTMLファイルをWebサーバーに配置する必要がありますが、実はブラウザによって条件が異なります。

  • Chromeの場合 … 原則 https://~ のみ。例外として http://localhost/~ でも利用可能
  • Firefoxの場合 … https://~ および http://~ の両方で利用可能。さらに file://~ でも利用可能
  • Edgeの場合 … https://~ および http://~ の両方で利用可能。さらに file://~ でも利用可能

FirefoxやEdgeの場合は、ローカルのHTMLファイルを直接読み込んでも、利用可能です。

トラブルシューティング

カメラのアクセスの許可を求められた際に「常に拒否」すると、そのサイトからはカメラの映像を取得することができなくなります。その場合は明示的に再許可してあげる必要があります。

Firefoxの場合getusermedia_ff_ngで「許可」または「毎回確認する」を選択

Chromeの場合getusermedia_chrome_ng「常に許可する」を選択

Edgeの場合
※いまのところ「常に拒否」することはできないようなので、このケースは発生しません。

新旧 getUserMedia() をラップしてみると

新しいAPIである navigator.mediaDevices.getUserMedia()は、まだChromeではデフォルトの状態では使えません。これは、引数で渡すオプションの指定方法が、まだ新しい書き方に沿っていないことが原因です。

そのため、Chromeではしばらく新しいAPIはデフォルトでは使えない状態が続くと思われます。そこで古いAPIをPromise型にラップする例を用意してみました。(オプション指定の違いは吸収できていません)

これを使ってカメラ映像を取得する例もご用意しました。Chrome 51でもデフォルトのままで利用できます。

様々なWebRTC関連のブラウザの違いを吸収する adapter.js本家のGitHubで公開されています。より便利に使いたい場合は、そちらをご利用ください。

CSS3と組み合わせてみよう

WebRTCは他の要素と組み合わせて使うことができると書きました。実際にCSS3と組み合わせてみましょう。

ほかにも様々なバリエーションが考えられます。ぜひ自分でもいろいろ試してみてください。

また、CSS3アニメーションを使うこともできます。例えばこんな感じです。

camera_css_animation

CSS3と組み合わせたサンプルも、GitHub Pagesでも公開していますので、試してみてください。(ラップ関数を使っているので、デフォルトのChrome 51でも利用できます)

次回は

今回は新しいAPIを使って、カメラの映像を取得してみました。次回はWebRTCによる通信を手動で接続してみます。

de:code 2017
Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket