Faire un drawImage d'une vidéo avec canvas par ChopinJohann - page 1

Bonjour,

J'ai écris ce code qui me fait tomber sur un problème étonnant:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#video {width: auto;}
		#viewfinder {position: absolute; border: solid rgba(255,255,255,0.5) 5px;}
	</style>
</head>
<body>

	<video id="video" autoplay></video>
	<div id="viewfinder"></div>
	<button id="snap">Scan</button>

<script type="text/javascript">

var video = document.getElementById('video');	
var canvas = document.getElementById('canvas');

// Get access to the camera
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();

        // Wait until the video is loaded
        video.addEventListener( "loadedmetadata", function (e) {

			var viewfinder = document.getElementById('viewfinder');
			var video_height = video.offsetHeight;
			var video_width = video.offsetWidth;

			vis_dim = Math.min(video_height, video_width);

			// Find the width of the viewfinder's borders
			border_wdt = window.getComputedStyle(viewfinder).getPropertyValue("border-left-width");
		 
			// The borders are assumed to be smaller than 10px
			border_wdt = parseInt(border_wdt[0]);

			// Create the viewfinder
			viewfinder.style.height = vis_dim - vis_dim / 10 + "px";
			viewfinder.style.width = vis_dim - vis_dim / 10 + "px";

			// Add some variables about the viewfinder
			var vf_height = viewfinder.offsetHeight;
			var vf_width = viewfinder.offsetWidth;

			viewfinder.style.top = video.offsetTop + ((video_height - vf_height) / 2) + "px";
			viewfinder.style.left = video.offsetLeft + ((video_width - vf_width) / 2) + "px";

			// Create the canvas
			var canvas = document.createElement('canvas');
			canvas.id = "canvas";
			canvas.width = vf_height - border_wdt * 2;
			canvas.height = vf_height - border_wdt * 2;
			canvas.style.border = "1px solid";
			
			// Insert the canvas in the body
			var body = document.getElementsByTagName("body")[0];
			body.appendChild(canvas);

			context = canvas.getContext('2d');

			// When the snap is click :
			document.getElementById("snap").addEventListener("click", function() {

				// Copy viewfinder's view on the canvas
				context.drawImage(
									// element to copy
									video, 

									// Begin off the zone to copy: left
									viewfinder.offsetLeft + border_wdt - video.offsetLeft, 

									// Begin off the zone to copy: top
									viewfinder.offsetTop + border_wdt - video.offsetTop,

									// Width of the zone to copy
									vf_width - border_wdt * 2, 

									// Height of the zone to copy
									vf_width - border_wdt * 2, 

									// Left point to begin the copy in the canvas
									0, 

									// Top point to begin the copy in the canvas
									0, 

									// Copy width
									vf_width - border_wdt * 2, 

									// Copy height
									vf_width - border_wdt * 2
								);
			});
		}, false );
    });
}

</script>

</body>
</html>

Ce code me permet de faire une capture d'écran de la vidéo de ma caméra sur une petite zone que j'aurai défini (je l'ai nommé viewfinder).

Il fonctionne très bien jusqu'au moment où je décide de modifier en css la largeur ou la hauteur de ma vidéo. Une zone qui n'a rien à voir à celle du viewfinder se colle dans le canvas.

Quelqu'un aurait-il déjà eu affaire à ce type de problème ? Prenait 2s pour tester le code si jamais mes explications ne sont pas claires

Merci d'avance

-
Edité par ChopinJohann 19 juin 2018 à 13:07:34

Faire un drawImage d'une vidéo avec canvas

Faire un drawImage d'une vidéo avec canvas

Supprimer

Modérer

Signaler le message aux modérateurs