Android端末をプレゼン用途でWebカメラ的に使おうとした話【設計編】

イントロ

こちらは、WebRTC Advent Calendar 2014の16日目のエントリーです。
まずは、タイトルに書いてる内容の説明から。

• 経緯
  1. エンタメな勉強会の第1回で登壇した際、Arduinoを試してみた話や、Arduinoで組んだ回路の説明をしつつ、「途中で何度か、実際にArduinoを配線して動かすライブデモ」を実施。
  2. Keynoteのプレゼン資料と、Webカメラ映像をだしたQuickTimeのウインドウを、何度か途中で切り替えつつプレゼンをする、というのが手間で面倒だった。
  3. 「プレゼン資料の提示と、カメラ映像表示との切り替えを、同一アプリ内でシームレスにできないか？」と考える。そして、「Webな勉強会なので、Webの技術を使って」とか。
  4. 「getUserMedia」で取得した映像をブラウザに表示して、かつ、プレゼン提示部分もWebページ上で表示しつつ、シームレスな画面切り替えができる方法を検討してみよう！

設計

利用する要素・仕組みの検討

• 前述の通り、カメラ映像は「getUserMedia」で取得して表示
• カメラ映像・プレゼン資料はフルスクリーン表示もしたい ＝ 「Fullscreen API ！」
  • Fullscreen API で、要素ごとのフルスクリーン表示・表示の切り替えを実装したら、「プレゼン資料を表示した要素と、カメラ映像を表示した要素を、個別にフルスクリーン表示＆切り替えができる！？」。
  • キーボードの適当なキーを、フルスクリーン要素の切り替えとか、フルスクリーンの終了に割り当てれば、前述のアプリ内でのシームレスな画面切り替えを、キー操作で実現できそう
• PC内蔵のカメラは、前述のような、「机の上にある特定の物体を表示する」といった事が難しいので、Android端末のカメラを利用してみる
  • PCにWebサーバたてれば、無線経由でAndroidとPCをつなげられるけど、有線接続できたほうが安定しそう・・・。
    ⇒ Android と PC の Chrome でのリモートデバッグ機能を使えば、PCのChrome上に、USB接続した Chrome on Android の画面表示をだす、といった、有線接続のWebカメラ的なことができそう！
• プレゼン資料はいくつか表示方法がありそう（上記の要件に合うかは検証が必要そうですが）
  • PDFで資料を準備して、PDF.js とか、何かライブラリを使って、ブラウザ上に表示
  • オンラインのスライドホスティングサービス（ SlideShare とか）に事前に資料をアップして、それをWebページ上に埋め込むとかで解決？
  • HTML + Javascript + CSS でプレゼン資料を準備（ライブラリ使ったりとか）

実装・コード

こちらは、もう少し内容が綺麗にまとまってから、別途公開予定。

2014/12/22追記

■ カメラ映像関連部分について、記事を公開しました。
⇒ 有線接続したAndroid端末をWebカメラ的に使う（ブラウザ上での映像表示）