外部カメラの表示と録画

いくら

2017.03.02

外部カメラの表示と録画

こんにちは、どこへ行ってもブラウザのタブ数が多いと指摘されるいくらです。
とある理由で外部カメラの表示と録画をする方法を調べました。
WebRTCというAPIの機能を利用すると簡単にできることが分かりサンプルを利用して、複数カメラの表示と録画までは検証できました。
Windowsアプリを作って対応しようかと考えていたのですが、ブラウザだけで簡単に対応できる時代になってました。
ただ今回利用する機能の制限としてはSSLに対応しているサーバーか、localhostでアクセスできるローカルサーバーが必要になります。
〇 http://localhost/sample/index.html
〇 https://sample.com/sample/index.html
× http://sample.com/sample/index.html
×の場合には以下のようなエラーで止まります。
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
これから１カメ、２カメ、３カメをvideoタグにそれぞれ表示し簡単に録画、ダウンロードできるツールとして作っていくところです。
目的のPCでは問題なく動作しました。
その他簡単に試したiPhoneのsafariでは表示されず、Androidのgalaxy s6とNexus 7 (2013)では表示されるものの、スペック不足からか期待通りの動作はしませんでした。
この後の確認としては、ダウンロードしたファイルがwebm形式でビデオコーデックはVP8というものだったので別形式にできないか検討します。
実際に作っていくと別の問題がでてくると思うので、簡単なところからここで共有していけたらと思います。
詳しくは、下記のサイト様が参考になるかと思います。