HTML5講座3回の変更点

追加された行はこの色です。
削除された行はこの色です。
HTML5講座3回へ行く。
HTML5講座3回の差分を削除

HTML5では
getUserMediaというAPIを使うことで
ブラウザでカメラキャプチャーすることも可能です。

今回使うコードはこちらです
&ref(camera.html);


今回はローカルだとChromeで開くにはパーミッションが必要になるので
Chromeでもできるのですが
回避する方法はめんどくさいのでFirefoxで開きます
カメラとマイクを聞かれますので指定します

&ref(camera.png);

キャプチャーが開始されます

&ref(capture.png);

全ソースコードは次のようになります。

 <!doctype html>
 <html>
  <head>
  <title>カメラ</title>
   <script type="text/javascript">
       window.onload = function(){
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia || navigator.msGetUserMedia;
        window.URL = window.URL || window.webkitURL;
           
        var video = document.getElementById('myVideo');
        var localStream = null;
        navigator.getUserMedia(
            {video: true, audio: true}, 
            function(stream) { // for success case
                console.log(stream);
                video.src = window.URL.createObjectURL(stream);
            },
            function(err) { // for error case
                console.log(err);
            }
        );
       };
  </script>
  </head>
  <body>
   <video id="myVideo" width="400" height="300" autoplay="1" ></video> 
 </body>
 </html>

やってることは単純で
getUserMediaから得たストリームをvideoタグのsrcに流し込みます

#vote(○[0],△[0],×[0])

HTML5講座3回 の変更点