Help render webcam in a canvas

Hello guys
I am trying to show my camera in a new canvas, i am feeling near, but for some reason the imagen in canvas twinkle, any idea what I’m doing wrong? Thanks in advance This is my code:

var Turn = pc.createScript('turn');

Turn.prototype.update = function (dt) {
 
 var video;
 var canvas;

    function mostrarCamara() {
//	video = document.getElementById("video");
	 var video = document.createElement("video");
	canvas = document.getElementById("canvas");


 width="720";
 height="720";
 altoCamara = "720";
  anchoCamara = "720";


	var opciones = {
		audio: false,
		video: {
			width:720, height: 720
		}
	};

	if(navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices.getUserMedia(opciones)
		    .then(function(stream) {
		    	video.srcObject = stream;
		    	procesarCamara();
		    })
		    .catch(function(err) {
		    	console.log("Oops, hubo un error", err);
				
        
		    })
	} else {
		console.log("No existe la funcion getUserMedia... oops :( ");
	}
}

    mostrarCamara();






function procesarCamara() {
	var ctx = canvas.getContext("2d");

	ctx.drawImage(video, 0, 0, 720, 720, 0, 0, canvas.width, canvas.height);

	var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	var pixeles = imgData.data;

	var platanetes = [];

	for (var p=0; p < pixeles.length; p += 4) {
		var rojo = pixeles[p];
		var verde = pixeles[p+1];
		var azul = pixeles[p+2];
		var alpha = pixeles[p+3];

		var distancia = Math.sqrt(
			Math.pow(amarillo.r-rojo, 2) +
			Math.pow(amarillo.g-verde,2) +
			Math.pow(amarillo.b-azul, 2)
		);

		if (distancia < distanciaAceptableColor) {
		

			var y = Math.floor(p / 4 / canvas.width);
			var x = (p/4) % canvas.width;

			
			if (platanetes.length == 0) {
				
				var platanete = new Platanete(x, y);
				platanetes.push(platanete);



                                    console.log("fffededf");

			} else {
				

				var encontrado = false;
				for (var pl=0; pl < platanetes.length; pl++) {
					if (platanetes[pl].estaCerca(x, y)) {
						platanetes[pl].agregarPixel(x, y);
						encontrado = true;
						break;
					}
				}

				if (!encontrado) {
					var platanete = new Platanete(x, y);
					platanetes.push(platanete);
				}
			}
		}

	}

	ctx.putImageData(imgData, 0, 0);

	platanetes = unirPlatanetes(platanetes);

	for (var pl=0; pl < platanetes.length; pl++) {
		var width = platanetes[pl].xMaxima - platanetes[pl].xMinima;
		var height = platanetes[pl].yMaxima - platanetes[pl].yMinima;
		var area = width * height;

		if (area > 1500) {
		    platanetes[pl].dibujar(ctx);
		}
	}
	
	setTimeout(procesarCamara, 20);
}
};

I added this in a html file

`
<div class='text'>

     
<style type="text/css">
		#canvas { -moz-transform: scaleX(-1);  -o-transform: scaleX(-1);  -webkit-transform: scaleX(-1);  transform: scaleX(-1);  filter: FlipH;  -ms-filter: "FlipH"; }
</style>

  <video id="video" playsinline autoplay ></video>
  <canvas id="canvas" width="720" height="720" style="z-index:999;" ></canvas>



</div>
// style="display:none;"`

Hi @Luis_Mb,

From what I understand this isn’t a PlayCanvas API related question, you are using the browser vanilla api to do that on a new canvas element.

Not sure what the issue would be, but it would help if you share a sample project for people to take a look.

Hi @Leonidas
Thanks… Of course. This is the link to the project.

PlayCanvas | HTML5 Game Engine

The idea is to trigger an event and do an action when the camera detects the color yellow. Currently the canvas is being fed from the webcam, however it seems to flicker.

Hi @Luis_Mb,

Your main issue is that you are running all of your logic in the update method (turn.js script).

That means you restart the camera feed per frame, that produces flickering.

Trying writing this from the start in your initialize method, and use update only for things that require updating per frame.

1 Like