今回で23回目となるHTML5とか勉強会は，11月16日にNTTコミュニケーションズさんのオフィスをお借りし，「⁠Device系API」をテーマに開催されました。今回の勉強会は，前半をカンファレンス形式のセッション3つ，後半をアンカンファレンスという形式で行われました。

本稿では，今回のイベントについてレポートします。

Device系APIの全体図

まず最初はNTTコミュニケーションズのこまつけんさくさんに，Device系APIの全体像について講演いただきました。

Device系APIというのはブラウザからデバイス固有の機能を使えるようにするAPIのことです。現在一部ブラウザには，以下のようなAPIが実装されているそうです。デモはこちらです。iOS5デバイスで見ることをおすすめします。

• GeoLocation
• Device Orientation
• HTML Media Capture
• Stream
• Compass

APIはそれぞれのWorking Groupによって検討されていて，Device系APIは以下の3つのWGによって議論されています。

• Geolocation WG
  • 緯度経度取得，傾き取得
  • 最近は住所まで取得できるGeolocation level2を検討中（Firefox 7では実装済）
• Device API s WG
  • Device APIについて検討するメインのWG
    • 他アプリケーションとの連携を行うAPIが主
    • Media Captureなど
• Web Real-Time Communication WG
  • P2P，ストリーミングなど
    • Stream API

今後検討されていく仕組みとしては，以下のようなデバイスやサービスを見つけるものがあるそうです。

• Web Intents
  • Webサービス同士が連携する仕組み
• Discovery API
  • uPnPやZeroconf

これらが実装されたら，ウェブアプリだけですべてができるような世界になりそうで楽しみです。講演資料はこちらになります。

チーズ！（ウェブでカメラの取得）

続いて，Opera Softwareのダニエルさんに，Stream APIについて講演いただきました。

10月19日にOpera labで，getUserMediaが使えるOperaが公開されたそうです。getUserMediaとは，ブラウザからカメラやマイクにアクセスするAPIの実装です。今回は，そのOperaを使って，実際にカメラを利用してみるという内容でした。

getUserMediaは現在，以下のコードのように使われます。

navigator.getUserMedia(
    [type] *,
    [successCallback] *,
    [errorCallback]
);
function successCallback(stream){};
function errorCallback(error){};
*require

ここで指定するタイプとは使用するメディアのことです。また，ビデオを使う場合のカメラの指定もカメラのタイプで行います。使えるものは以下のとおりです。

• メディアのタイプ
  • audio
  • video
• ビデオのタイプ
  • environment
  • user

ビデオのタイプとは，メディアのタイプにvideoをセットしたときに使用するオプションです。environmentがユーザに向いていないカメラ，userはユーザに向いているカメラ，つまりスマートフォンでのリアカメラとフロントカメラかを指定するオプションです。指定しない場合，デフォルトのカメラが呼び出されます。指定の仕方は，ビデオをフロントカメラで使うなら「⁠”video user⁠”⁠」⁠，マイクとビデオ両方使い，リアカメラを使う場合は「⁠”audio, video environment⁠”⁠」のように指定します。

この仕様は，まだ策定中の仕様なので変更される場合もあります。まだ安定していないため，これから実装されるブラウザではメソッドプレフィックスがついて，operaGetUserMediaや，webkitGetUserMediaなどになるとのことです。

getUserMediaで取得したstreamは，videoタグのsrcに入れることで表示できます。表示後は，通常のvideoタグと同じようにcanvasへの表示や，canvas上での加工や，静止画にして保存などができます。講演中，streamをvideoに表示した後，canvasに表示し，それをクリックすることで映像を取得し，取得した画像をダウンロードできるというサンプルページを作成できることをライブコーディングで示しました。サンプルページはこちらになります（getUserMediaが使えるブラウザでご覧ください⁠）⁠。

一連のやり取りは動画や講演資料をご覧ください。