Node.js
SSL
カメラ
HTTPS
スマホ

スマフォカメラにブラウザからアクセス

More than 1 year has passed since last update.

nodeのhttp-serverを利用して,スマフォブラウザ(Chrome)からカメラ映像を取得します
スマフォブラウザからカメラを利用するときはsslじゃないとだめらしいです
環境できている人なら以下のリンクで一発
http://stackoverflow.com/questions/35127383/npm-http-server-with-ssl

使用技術

・webRTC
今回は意識しなくていいでしょう
興味があれば途中あるリンクを読んでみてください
スマフォではAndroidのChromeのみだそうです

・ssl
スマフォのブラウザでカメラを利用するには,ssl(https)じゃないとだめらしい

・node, http-server
httpsサーバーを利用するのには色々やり方がありますが,今回はnodeで,それもhttp-serverを利用します
nodeのインストール方法などに関しては,他の記事を参考にしてください
http-serverの説明などは途中リンクにて

環境

・MacBookAir 10.10.5
・node v7.4.0
・npm 4.5.0
・http-server 0.10.0

まずはPCブラウザでカメラ映像取得

そもそもブラウザでwebカメラ等を利用するときには,htmlファイルなどはサーバ上じゃないとだめ
今回,サーバはnodeでローカルマシーンにて構築します
ブラウザはChrome推奨(てかそれしか確認してないです)

http-serverインストール

参考:Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利
https://firegoby.jp/archives/5706

これの通りに行えばできました
使用したコマンド一覧

$ npm install -g http-server
$ http-server

その後ブラウザでlocalhost:8080にアクセス

カメラの利用

参考:HTML5でWebRTCを使ってみよう!「カメラを使ってみよう」編
https://html5experts.jp/mganeko/5098/

cam.html
<!doctype html>
<html>
 <head>
  <title>Self Camera</title>
 </head>
 <body>
   <video id="myVideo" width="400" height="300" autoplay="1" ></video>

   <script type="text/javascript">
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    var video = document.getElementById('myVideo');
    var localStream = null;
    navigator.getUserMedia({video: true, audio: false},
     function(stream) { // for success case
      console.log(stream);
      video.src = window.URL.createObjectURL(stream);
     },
     function(err) { // for error case
      console.log(err);
     }
    );
   </script>
 </body>
</html>

こちらに書いてある一番上のサンプルをいただきました
それをhttp-serverのコマンドを実行したフォルダに保存
http://localhost:8080/(保存したファイル名)
この場合は,http://localhost:8080/cam.html
で見れると思います

スマフォでカメラ映像取得

前述の通り,スマフォのブラウザでカメラを利用するには,ssl(https)じゃないとだめらしい

ssl鍵の作成

参考:npm http-server with SSL
http://stackoverflow.com/questions/35127383/npm-http-server-with-ssl

http-serverのコマンドを実行したフォルダにssl鍵を作成します
使用したコマンド

$ openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

その後,エンター何回か押す
すると,key.pemとcert.pemができるはず

http-serverでhttpsサーバ

参考:npm http-server with SSL
http://stackoverflow.com/questions/35127383/npm-http-server-with-ssl
(ssl鍵作成のときと同じリンク)

使用したコマンド

$ http-server -S -C cert.pem

PCブラウザでまずは確認
https://localhost:8080/cam.html

スクリーンショット 2017-05-16 16.25.48.png

下の(安全ではありません)をクリック
で,見れるはず!

スマフォのChromeでカメラ

PCと同じwifiにスマフォもwifiを接続してください

PCでifconfigでPCのIPアドレス確認
例:192.168.10.10など

スマフォ(Android)のブラウザ(Chrome)にてhttps://192.168.10.10(例):8080/cam.html

で,見れるはず
今回,使用技術を探すのが時間かかりましたが,一つ一つの作業はスムーズにいきました

その他,ポート開放しっぱなしになってしまったときこちらを参考にしました
http://qiita.com/yokozawa/items/dbcb3b31f9308e4dcefc