がねこまさし

HTML5でWebRTCを使ってみよう!「カメラを使ってみよう」編

こんにちは! がねこまさしです。これから数回に渡って、WebRTCについて書かせていただきます。 内容は2013年10月にNode学園祭2013で発表したプレゼンを、再構成したものになる予定です。

※こちらの記事は2014年に書かれました。2016年6月現在のアップデート記事がありますので、そちらもご参照ください。

WebRTCとは?

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

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

WebRTCで何ができるの?

WebRTCには大きく分けて2つの要素があります。

  • カメラ、マイクといったメディアへのアクセス(UserMedia)
  • Peer-to-Peer通信を行うための仕組み(RTCPeerConnection)

このほかにもHTML5の様々な要素と組み合わせて活用することができます。

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

ユーザーメディアを使ってみよう

それでは、さっそく使ってみましょう。ユーザーメディアで一番わかりやすいカメラを使います。Webカメラと最新のChromeかFirefoxをご用意ください。
※今回はChrome 32, Firefox 26で動作確認しています。

こちらをお好きなWebサーバーに保存し、ChromeないしFirefoxでアクセスしてみてください。カメラにアクセスしても良いかどうか確認のダイアログが表示されますので、OKすればカメラの映像が表示されるはずです。
FireFoxの場合:firefox_getusermedia

Chromeの場合:chrome_getusermedia

上手く動けば、このように自分の顔が映ると思います。
chrome_selfcamera
※上手くいかない場合は、JavaScriptコンソールを表示してエラーを確認してくださいね。
ちなみに、HTMLをWebサーバーに置かずに直接開いた場合(file:// ~ )、Chromeではセキュリティ制限に引っかかりカメラにアクセスするこができません。FireFoxは現状の実装ではアクセスできるようです。

CSS3 と組み合わせてみる

WebRTCは他の要素と組み合わせて使うことができると、最初に書きました。実際にやってみましょう。
※コードを単純にするために、ここからはChrome用のコードを掲載します。Firefoxの場合は適宜プレフィックスを変更してください。

このようにvideoタグを変更すると、左右反転した鏡の状態になります。この方が自分では見慣れた姿に映ります。skypeなど多くのビデオチャットアプリは、左右反転状態がデフォルトになっているものが多いようです。

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

CSS3のアニメーション機能も利用できます。たとえばこんな風に。

chrome_rotate

以上、ユーザメディア(カメラ)を使ってみました。次回は通信関連の要素についてご説明する予定です。

続編を読む

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