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;"`