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

  • 5
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

イントロ

こちらは、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カメラ的に使う(ブラウザ上での映像表示)

この投稿は WebRTC Advent Calendar 201416日目の記事です。