获取用户多媒体设备视频、截图

我会带着你远行 2021-07-24 22:30 422阅读 0赞

getUserMedia()
    	1、h5中为了更好的获取用户设备，以便信息采集在window.navigator对象中,提供了getUserMedia()的方法来开启用户多媒体设备
    
    	2、通常需要canvas标签来配合，是为了获取实时图像采集功能
    	
    	兼容性写法
    
    		navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia
    	
    	获取多媒体设备
    
    		navigator.getUserMedia({
    			获取多媒体设备类型JSON
    		},function(){获取多媒体流文件即一帧一帧的图像},
    		function(){当设备或方法出现错误时的回调});

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    
    	<link rel="stylesheet" href="iconfont/iconfont.css">
    	<link rel="stylesheet" href="css/1.css" type="text/css">
    	<script src='jq/jquery-3.4.1.js'></script>
    	<script src="js/bootstrap.min.js"></script>
    	<script src='js/swiper.jquery.min.js'></script>
    	<script src="js/swiper.animate1.0.2.min.js"></script>
    	<link rel="stylesheet" href="css/swiper.min.css">
    	<link rel="stylesheet" href="css/bootstrap.min.css">
    	<link rel="stylesheet" href="css/animate.min.css">
    
    	<style>
    
    	
    	
    	</style>
    </head>
    <body>
    
    	<video src="" id='vd' style='border: solid 1px pink'></video>
    	<button>开始视频</button>
    	<canvas id="mycanvas"></canvas>
    	<button id="snapshot">截图</button>
    	<img src="">
    
    
    	<script>
    
    		var btn=document.querySelector('button');
    		var vdo=document.querySelector('#vd');
    		var canvas = document.querySelector('#mycanvas');
    		var bicaso = canvas.getContext('2d');
    		var mediaStream = null;
    
    
    		btn.onclick=function()
    		{ 
    			//处理兼容性
    			navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia
    
    			navigator.getUserMedia({ 
    				video:true, //摄像头
    				audio:true //麦克风
    			},function(stream){ 
    				//让摄像头捕捉到的信息实时加载到video标签中
    				//兼容性写法获取页面URL
    				var URL=window.URL||window.webkitURL;
    				//通过页面上的URL让捕捉到的流变成能直接在页面上播放的URL地址
    				//升级写法
    				vdo.srcObject=stream;
    				//可能发生版本问题写法
    				vdo.src = URL.createObjectURL(stream);
    				//播放
    				vdo.play();
    				//截屏
    				mediaStream = stream;
    
    			},function(err){ 
    				console.log(err);
    			})
    		}
    		//截屏
    		document.querySelector('#snapshot').onclick = function (){ 
    		if (mediaStream) { 
            	bicaso.drawImage(vdo, 0, 0, 250, 200);
            	document.querySelector('img').src = canvas.toDataURL('image/webp');
    
            	//
        	}
    	};
    
    	</script>
    	
    </body>
    
    </html>