UserMedia API：使用浏览器访问摄像头拍照

最新推荐文章于 2024-05-09 20:51:28 发布

ddk87869

最新推荐文章于 2024-05-09 20:51:28 发布

阅读量947

点赞数

原文链接：http://www.cnblogs.com/ecalf/archive/2013/05/26/3099943.html

版权

使用 UserMedia API 访问摄像头的功能

最新版本的 chrome、firefox、 opera 已经支持

<head> <title>Camera and Video Control with HTML5 Example</title> <style> video,img { display: block; margin: 0 0 20px 0; } </style> </head> <body> <div id="page"> <div id="contentHolder"> <section class="left"> <h1>Camera and Video Control with HTML5</h1> <video id="video" autoplay=""></video> <button id="btn">Take Photo</button><br> <img id="photo"> <script> window.addEventListener("DOMContentLoaded", function(){ var width = 480; var photo = document.getElementById("photo"); var video = document.getElementById("video"); var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); var mediaErr = function(error) { console.log("media error: ",error); }; var mediaConf = { video: true , //寮€濮嬫憚鍍忓ご audio: true ,//寮€鍚害鍏嬮 }; //event:take photo document.getElementById("btn").addEventListener("click", function(){ context.drawImage(video, 0, 0, video.width, video.height); photo.setAttribute('src', canvas.toDataURL('image/png')); }); //event: resize video video.addEventListener('play', function(ev){ setTimeout(function(){ if(video.videoWidth){ height = video.videoHeight/(video.videoWidth/width); video.setAttribute('width', width); video.setAttribute('height', height); canvas.setAttribute('width',width); canvas.setAttribute('height',height); photo.setAttribute('width', width); photo.setAttribute('height', height); }else{ setTimeout(arguments.callee,100); } },100); }, false); // open media if(navigator.getUserMedia) { // Standard, opera navigator.getUserMedia(mediaConf, function(stream) { video.src = stream; video.play(); }, mediaErr); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed, chrome navigator.webkitGetUserMedia(mediaConf, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, mediaErr); }else if(navigator.mozGetUserMedia){ // firefox navigator.mozGetUserMedia(mediaConf,function(stream){ video.mozSrcObject = stream; video.play(); },mediaErr); }else{ console.log('your browser do not support UserMedia API'); } }, false); </script> </section> </div> </div></body>

跟新：加入关闭摄像头方法

<!DOCTYPE html>
<html>
<head>    
<title>Camera and Video Control with HTML5 Example</title>
<style>    
    video,img { display: block; margin: 0 0 20px 0; }
</style>
</head>
<body>

<div id="page">

<div id="contentHolder">
<!--
<div>
<!-- camera--照相机；camcorder--摄像机；microphone--录音 -->
<input id="uploadimg" type="file" accept="image/*" capture="camera" />
</div>
-->

<section class="left">
<h1>Camera and Video Control with HTML5</h1>
    <video id="video" autoplay ></video>
    <button id="btnStop" data-status='1'>stop</button>
    <button id="btn">Take Photo</button><br />    
    <img id="photo" />
    <script>
    document.getElementsByTagName('input')[0].addEventListener('change',function(){
    	var file=this.files[0];
    	var formatDate = function(date){
    		return date.getFullYear()
    		+'-'+(date.getMonth()+1)
    		+'-'+date.getDate()
    		+' '+date.getHours()
    		+':'+date.getMinutes()
    		+':'+date.getSeconds();
    	};
    	var s = 'now:  '+formatDate(new Date())+'<hr />';
    	for(var k in file){
    		if(file.hasOwnProperty(k)&&typeof(k)=='string'){
    			if(k=='lastModifiedDate'){
    				s+= k+':  '+formatDate(file[k])+'<br/>';
    			}else{
    				s+= k+':  '+file[k]+'<br/>';
    			}
    		}
    	
    	}
    	
    	
    	var el = document.createElement('div');
    	
    	el.innerHTML = s;
    	this.parentNode.appendChild(el);
    	
    	/*
    	 var reader = new FileReader(); 
    	 reader.onloadend = function() { 
    		 console.log('reader>>>',this);
    	 };
    	 
    	reader.readAsDataURL(file);
    	*/
    },false);
    
    
    
    
    
        window.addEventListener("DOMContentLoaded", function(){
            var width = 480;
            var photo = document.getElementById("photo");
            var video = document.getElementById("video");
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");                
            var mediaErr = function(error) {
                    console.log("media error: ",error); 
                };
            var mediaConf = {
                        video: true , //开始摄像头
                        audio: false //开启麦克风
                    }; 
           	window.videoStream;
           	
             //stop camera
             document.getElementById('btnStop').addEventListener('click',function(){
            	 if(this.dataset.status==1){
            		 videoStream.stop();
            		 this.dataset.status=0;
            		 this.innerHTML='play';
            	 }else{
            		 openMedia();
            		 this.dataset.status=1;
            		 this.innerHTML='stop';
            	 }
            	 
             });
             
             
             
            //event:take photo
            document.getElementById("btn").addEventListener("click", function(){                
                context.drawImage(video, 0, 0, video.width, video.height);                
                photo.setAttribute('src', canvas.toDataURL('image/png'));                        
            });        
            
            //event: resize video
            video.addEventListener('play', function(ev){
                    setTimeout(function(){                        
                        if(video.videoWidth){
                            height = video.videoHeight/(video.videoWidth/width);
                            video.setAttribute('width', width);
                            video.setAttribute('height', height);
                            canvas.setAttribute('width',width);
                            canvas.setAttribute('height',height);    
                            photo.setAttribute('width', width);
                            photo.setAttribute('height', height);                                                        
                        }else{
                            setTimeout(arguments.callee,100);
                        }
                    },100);
            }, false);
            
            
            // open media
        	function openMedia(){
        	    if(navigator.getUserMedia) { // Standard, opera
                    navigator.getUserMedia(mediaConf, function(stream) {
                    	videoStream = stream;
                        video.src = stream;
                        video.play();
                    }, mediaErr);    
                } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed, chrome
                    navigator.webkitGetUserMedia(mediaConf, function(stream){
                    	videoStream = stream;
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, mediaErr);
                }else if(navigator.mozGetUserMedia){ // firefox
                    navigator.mozGetUserMedia(mediaConf,function(stream){   
                    	videoStream = stream;
                        video.mozSrcObject = stream;
                        video.play();            
                    },mediaErr);
                    
                }else{
                    console.log('your browser do not support UserMedia API');
                }
            }
        	openMedia();
            
        }, false);

    </script>
        
</section>


</div>


</body>
</html>

转载于:https://www.cnblogs.com/ecalf/archive/2013/05/26/3099943.html

ddk87869

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UserMedia API：使用浏览器访问摄像头拍照

使用 UserMedia API访问摄像头的功能最新版本的 chrome、firefox、 opera 已经支持 <head> <title>Camera and Video Control with HTML5 Example</title><style> video,img { display: b...
复制链接

扫一扫