關於html5調用攝像頭的問題，其實我不想用html奈何。。。

轉自：http://www.cnblogs.com/imwtr/p/6413595.html

相比之下，這個大佬總結的更具體

  // 獲取媒體方法（舊方法）
      navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;



if (navigator.getMedia) {
         navigator.getMedia({
             video: true
         }, function(stream) {
             mediaStreamTrack = stream.getTracks()[0];
 
             video.src = (window.URL || window.webkitURL).createObjectURL(stream);
             video.play();
         }, function(err) {
             console.log(err);
         });
     }


    // 關閉攝像頭
    close.addEventListener('click', function() {
        mediaStreamTrack && mediaStreamTrack.stop();
    }, false);

　　這個方法關閉攝像頭更徹底，我更喜歡，前一個的關閉方法可能過時了。

 

寫在前面，謝謝這位大老18年發的博，讓我受益匪淺，網上關於這個都太老了，由於要硬着頭皮用攝像頭，不得不學習一下。

轉自：https://blog.csdn.net/binquan_liang/article/details/79489989

作者：binquan_liang

最近在學習在做HTML5的項目，看了博客上html5調用攝像頭拍照的文章，但各有瑕疵。於是自己查閱書籍寫了一個demo，主要分三步，廢話不多說上代碼。

接下來是js代碼部分：

<script>    
    var video = document.getElementById('video');  
    var canvas = document.getElementById('canvas');  
    var button= document.getElementById('button');  
    var context = canvas.getContext('2d');  
    function getUserMediaToPhoto(constraints,success,error) {  
        if(navigator.mediaDevices.getUserMedia){  
            //最新標准API  
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);  
        }else if (navigator.webkitGetUserMedia) {  
            //webkit核心瀏覽器  
            navigator.webkitGetUserMedia(constraints,success,error);  
        }else if(navigator.mozGetUserMedia){  
            //firefox瀏覽器  
            navigator.mozGetUserMedia(constraints,success,error);  
        }else if(navigator.getUserMedia){  
            //舊版API  
            navigator.getUserMedia(constraints,success,error);  
        }  
    }  
    //成功回調函數  
    function success(stream){  
        //兼容webkit核心瀏覽器  
        var CompatibleURL = window.URL || window.webkitURL;  
        //將視頻流轉化為video的源  
        video.src = CompatibleURL.createObjectURL(stream);  
        video.play();//播放視頻  
    }  
    function error(error) {  
        console.log('訪問用戶媒體失敗：',error.name,error.message);  
    }  
    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){  
        getUserMediaToPhoto({video:{width:480,height:320}},success,error);  
    }else{  
        alert('你的瀏覽器不支持訪問用戶媒體設備');  
    }  
    capture.addEventListener('click',function() {  
        // 將video畫面描繪在canvas畫布上  
        context.drawImage(video,0,0,480,320);  
    })  
 </script>  

　　

 

值得注意的是：

使用的時候打開攝像頭一定要上server上打開，否則沒辦法使用！因為打開的是屬於網絡的webcam，需要在server上打開。

目前好像chrome和opera還有大多數移動設備支持HTLM5打開攝像頭，我這個是在chrome上測試成功的。

還有一點，如果沒成功，很可能是你不小心關閉了chrome打開攝像頭的權限，你重新啟用權限就可以啦！

 

 

ps:自己添加，由於攝像頭占用資源，本着節約的思想，不用的時候我想關閉它，然而最后的結果就是，我只找到了video.src="";

有別的方法可以留言告訴我啊。