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

今回使うコードはこちらです
filecamera.html

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

camera.png

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

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に流し込みます

選択肢 投票
○ 0  
△ 0  
× 0  
添付ファイル: filecapture.png 402件 [詳細] filecamera.png 416件 [詳細] filecamera.html 497件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2014-05-04 (日) 14:59:28