LoginSignup
58
61

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-05-16

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にアクセス

カメラの利用

2019年6月26日
サンプルコードが動かなくなっていたので編集しました

参考:[それWeb]ブラウザからデバイスのカメラを通して動画を録画する
https://qiita.com/niisan-tokyo/items/fa6ff649a9a3312148bc

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">
    var video = document.getElementById("myVideo"); // 適当にvideoタグのオブジェクトを取得
      var constrains = { video: true, audio: true }; // 映像・音声を取得するかの設定
      navigator.mediaDevices
        .getUserMedia(constrains)
        .then(function(stream) {
          video.srcObject = stream; // streamはユーザーのカメラとマイクの情報で、これをvideoの入力ソースにする
          video.play();
        })
        .catch(function(err) {
          console.log("An error occured! " + 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鍵を作成します
使用したコマンド

追記
全部エンターだとcert.pemができなかったので
Country Nameのときに「jp」とかいれればできました

$ 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

58
61
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58
61