HTML5とJavaScriptでスマホのカメラを使ってみる

プログラミング

こんにちは。今日はJavaScriptでスマートフォンのカメラに写っているものを表示したり、停止したりしてみます。プログラムをアレンジして発展させようとしたのですが、残念ながらうまくいかなかったため、あまりオリジナリティはありません。

最近スマホのセンサーやらカメラやらを取り上げているのは、中古のスマホがIoTのデバイスに使えるんじゃないかと思って、クライアントサイドでプログラムを動かそうと試しているという感じです。

とりあえずプログラム

今回のプログラムはこれです。実機で動かすには、https://~ となるようにサーバにアップロードしてください。このあたりのことは今回は省略します。

<!Doctype html>
<html>
  <head>
    <title>Camera Test</title>
    <script type="text/javascript">


      function videoStart(){
        var constraints = { audio: false, video: { facingMode: "environment" } };

        navigator.mediaDevices.getUserMedia( constraints )
        .then(
          function( stream ) {
            var video = document.querySelector( 'video' );
            video.srcObject = stream;
            video.onloadedmetadata = function( e ) {
              video.play();
            };
          }
        )
      };


      function videoStop(){
        var constraints = { audio: false, video: { facingMode: "environment" } };

        navigator.mediaDevices.getUserMedia( constraints )
        .then(
          function( stream ) {
            var video = document.querySelector( 'video' );
            video.srcObject = stream;
            video.onloadedmetadata = function( e ) {
              stream.getVideoTracks()[0].stop();
            };
          }
        )
      };

    </script>
  </head>
  <body>
    <div><video id="myVideo" autoplay="1" ></video></div> 
    <div><button type="button" onclick="videoStart()">撮影</button> 
    <button type="button" onclick="videoStop()">停止</button></div>
  </body>
</html>

恥ずかしいので、スマートフォンのバックカメラで撮影するようにしてあります。

9行目と25行目の{ facingMode: “environment" }を{ facingMode: “user" }に変えると自分の顔を見つめることができます。ナルシストの方もそうでない方も試してみてください。

いくつかのページを参考にしていますが、それぞれのページのプログラムで書かれていたエラー処理は完全に取り除いてしまいました。(console.log・・・といわれても・・・)

実行結果

それでは実行結果です。ちなみに使用したスマートフォンは、Antutuスコアが約13万点で2万円台前半で買えるAndroid機です。ブラウザはChromeを使用しました。

撮影中
撮影停止

短いですが、今回はこれでおしまいにします。それではまた。

Posted by 春日井 優