当前位置：网站首页>Case of camera opening by tour

Case of camera opening by tour

2022-07-01 21:37:00 【Desperately_ petty thief】 

<!doctype html>
<html lang="en">
<head>
    <title>js Call the camera to take photos and upload pictures </title>
    <meta charset="utf-8">
</head>
<body>
<button onclick="openMedia()"> Turn on camera </button>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="closeMedia()"> Turn off camera </button>
<script>
    let mediaStreamTrack=null; //  Video object ( overall situation )
    function openMedia() {
        let constraints = {
            video: { width: 500, height: 500 },
            audio: true
        };
        // get video camera 
        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);
    }

    //  Taking pictures 
    function takePhoto() {
        // get Canvas object 
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);


        // toDataURL  ---   Can be introduced into 'image/png'--- Default , 'image/jpeg'
        let img = document.getElementById('canvas').toDataURL();
        //  there img Is the picture you get 
        console.log('img-----', img);
        document.getElementById('imgTag').src=img;
    }

    //  Turn off camera 
    function closeMedia() {
        mediaStreamTrack.stop();
    }
	
	//  Send data to the back end 
	function sendImage(){ 
		// Create asynchronous objects   
		var xhr = new XMLHttpRequest();
		// Set the type of request and url
		xhr.open('get', 'http://localhost:8000/sys/test', true);
		//post The request must add a request header or an error will be reported 
		xhr.setRequestHeader("Content-type","application/json");
		// Send a request 
		// xhr.send({image:document.getElementById('canvas').toDataURL()});
		xhr.send();
		xhr.onreadystatechange = function () {
			//  This step is to determine whether the server responds correctly 
		  if (xhr.status == 200) {
			console.log(xhr.responseText);
		  } 
		};
	};
	
</script>
</body>

原网站

版权声明
本文为[Desperately_ petty thief]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207011947049948.html

边栏推荐

猜你喜欢

随机推荐