困った時の自分用メモ

読んだ本を考察してメモったり、自分でいじった物の感想をメモったりする場。週1更新を目指します。

HTMLの話〜PCカメラからの映像を、サーバーに送る1〜

考察（技術）

動画ストリーミング配信の調査をする必要があり、その過程で検証調査した内容の備忘録。

nacl-ltd.github.io

ここを参考にした。
以下、ソースコード。

<!DOCTYPE html>
<html>
  <head>
   <! metaは、基本的には付加情報。http-equivはコメントとほぼ同じと思ってていい >
    <meta charset="utf-8">
    <title>browserCamamera sample01</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <style>
        html {
            height: 100%;
        }
        body {
        margin: 0 auto;
        width: 50%;
        height: 50%;
        }
 
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
  </head>
  <body>
    <video id="video" autoplay playsinline="true"></video>
    <canvas id="canvas1">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
    <img id="image1" border="0" src="" width="128" height="128" alt="イメージ1">
    <script>
       
   var video = document.getElementById('video');
   //  カメラの映像を取得
   var constraints = {
       //audio: false,
       audio: false,
       video: {
           // スマホのバックカメラを使用
           facingMode: 'environment'
       }
   };
   
   var flag = false;
   var count = 0;

   // ここで、カメラにアクセスする
   navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
       video.srcObject = stream;
       setInterval(UpdateStream, 5000)// 5秒に一回実行
       //UpdateStream()
   }).catch((err) => {
       window.alert(err.name + ': ' + err.message);
   });

   function UpdateStream() {
           
           // Canvasに描画したものを画像化する
           var canvas = document.getElementById('canvas1');

           var ctx = canvas.getContext('2d');
           var w = video.offsetWidth;
           var h = video.offsetHeight;
           canvas.setAttribute('width', w);
           canvas.setAttribute('height', h);
           ctx.drawImage(video, 0, 0, w, h);

           canvas.toBlob(function(blob) {

               var img = document.getElementById('image1');
               img.src = window.URL.createObjectURL(blob);
               
               // サーバーに画像をPOSTし、保存しておいてもらう
               var request = new XMLHttpRequest();
               request.open('POST', 'YOUR DOMAIN/index.php');
               //request.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
               var formData = new FormData();
               formData.append('image', blob, 'unko'+count+'.jpeg');
               count = count + 1;
               //formData.append('image', '<%= Time.now.strftime("%Y%m%d%H%M") %>}.jpeg');
               formData.append('uuid', 'yamashita');
               request.send(formData);

           }, 'image/jpeg', 0.95);

   }
 
    </script>
  </body>
</html>

重要なのは、以下の点かな

・<video id="video" autoplay playsinline="true"></video>
これで、カメラが起動するはず。
ローカル実行であれば、Chromeなら動く。Safariは無理。
サーバーアクセスの場合は、httpsでないと使えないらしい

・<canvas id="canvas1">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
カメラデータ（stream）を、直接画像にする方法がわからなかった為、サンプル通り、Canvasに描画してから、その描画物を画像化していると思われる。

ここまでで、カメラから取得した情報の画像化は終わっている。
以下は、サーバーに情報を送る場合の内容。

・canvas.toBlob(function(blob) {
・var request = new XMLHttpRequest();
・request.open('POST', 'YOUR DOMAIN/index.php');
・var formData = new FormData();
・formData.append('image', blob, 'unko'+count+'.jpeg');
・request.send(formData);

blobオブジェクトなる物に変換してから、指定のURLにPOSTする。
そうすると、そのPOST命令を検知できれば、blobオブジェクトが扱えるようだ。