動画ストリーミング配信の調査をする必要があり、その過程で検証調査した内容の備忘録。 今回は、サーバーに保持した画像を表示する方法
以下、ソースコード。
<!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として取得する。