关于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="";

有别的方法可以留言告诉我啊。