困った時の自分用メモ

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

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

動画ストリーミング配信の調査をする必要があり、その過程で検証調査した内容の備忘録。 今回は、サーバーに保持した画像を表示する方法

以下、ソースコード

<!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>
    <img id="image1" border="0" src="" width="128" height="128" alt="イメージ1">
    <script>
       
   //setInterval(UpdateStream, 100)
   UpdateStream();
   function UpdateStream() {

               
       var request = new XMLHttpRequest();
       request.open('GET', 'YOUR IMAGE URL/unko0.jpeg');
       request.responseType = 'blob';
       request.onreadystatechange = function(e) {
           switch ( request.readyState ) {
               case 0:
                   // 未初期化状態.
                   window.alert("uninitialized");
                   break;
               case 1: // データ送信中.
                   window.alert("loading...");
                   break;
               case 2: // 応答待ち.
                   window.alert("loaded.");
                   break;
               case 3: // データ受信中.
                   window.alert("loading.");
                   break;
               case 4: // データ受信完了.
                   if( request.status == 200 || request.status == 304 ) {
                       var blob = request.response;
                       var img = document.getElementById('image1');
                       window.alert(img);
                       img.src = window.URL.createObjectURL(blob);
                       window.alert("success2");
                   } else {
                       window.alert(e);
                       window.alert("error.");
                   }
                   break;
           }
       }

       request.send(null);
   }
 
    </script>
  </body>
</html>

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

・request.open('GET', 'https://natural-nail-eye.sakura.ne.jp/avatars/unko0.jpeg');
・request.responseType = 'blob';
blob指定しないと、画像データそのままで取得してしまう。
今回は、それだと不都合があるので、blobとして取得する。