お知らせ

ただいま、シンタックスハイライターの設定を見直しております。
プログラムが見にくくなっているページがありますが、ご容赦ください。

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を使用しました。

撮影中
撮影停止

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

この記事を書いた人
春日井 優

高校で情報科という教科を担当しています。以前は数学科も担当していました。(今でも数学科の教員免許状は有効です。)プログラムを覚えたのは、「ゲームセンターあらし」という漫画のキャラクターがBASICを解説する「こんにちはマイコン」を読んだことがきっかけでした。

Posted by kasugai