游览器打开摄像头案例-CFANZ编程社区

游览器打开摄像头案例
<!doctype html>
<html lang="en">
<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
</head>
<body>
<button onclick="openMedia()">开启摄像头</button>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="closeMedia()">关闭摄像头</button>
<script>
    let mediaStreamTrack=null; // 视频对象(全局)
    function openMedia() {
        let constraints = {
            video: { width: 500, height: 500 },
            audio: true
        };
        //获得video摄像头
        let video = document.getElementById('video');     
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then((mediaStream) => {
            mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
            video.srcObject = mediaStream;
            video.play();
        });
		
		setInterval(sendImage, 3000);
    }

    // 拍照
    function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);


        // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
        let img = document.getElementById('canvas').toDataURL();
        // 这里的img就是得到的图片
        console.log('img-----', img);
        document.getElementById('imgTag').src=img;
    }

    // 关闭摄像头
    function closeMedia() {
        mediaStreamTrack.stop();
    }
	
	// 发送数据到后端
	function sendImage(){ 
		//创建异步对象  
		var xhr = new XMLHttpRequest();
		//设置请求的类型及url
		xhr.open('get', 'http://localhost:8000/sys/test', true);
		//post请求一定要添加请求头才行不然会报错
		xhr.setRequestHeader("Content-type","application/json");
		//发送请求
		// xhr.send({image:document.getElementById('canvas').toDataURL()});
		xhr.send();
		xhr.onreadystatechange = function () {
			// 这步为判断服务器是否正确响应
		  if (xhr.status == 200) {
			console.log(xhr.responseText);
		  } 
		};
	};
	
</script>
</body>
0 条评论