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

2019-06-24プログラミング

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

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

1. とりあえずプログラム
2. 実行結果

とりあえずプログラム

今回のプログラムはこれです。実機で動かすには、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>

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

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

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