WebCam con Mozilla

hcrisel · #1 (**permalink**) 10/12/2013, 15:59

Hola a todos.

Soy demasiado novato con este lenguaje.

Estuve corriendo un HTML de mozilla que ve mi Webcam y me permite sacar una imagen, pero cuando la muestra en el lienzo pone DOS imagenes en lugar de una.
Termino viendo la WebCam + 2 imagenes exactamente iguales.

Es evidente que me está mostrando algún buffer de video, memoria, canvas, etc.

¿serían tan amables de sugerirme donde logro encontrar la solución?

que comando de buscar o aprender para resolverlo.

Muchas Gracias y les deseo lo mejor.

Carlangueitor · #2 (**permalink**) 10/12/2013, 17:09

No podemos saber nada si no muestras tu código.

Saludos

hcrisel · #3 (**permalink**) 11/12/2013, 15:54

perdón me había olvidado del código

Anda muy bien; pero muestra dos imagenes (canvas.png y image.jpeg)
En mi caso preferiría que solo me muestre la (Jpeg) sobre el lienzo.
Muchas Gracias a todos.

¿alguién conoce donde podría rumbiar mi busqueda para aprender a resolverlo?

<!DOCTYPE html>
<html lang='es'>

<head>
<title>Fotografía con HTML5</title>
<meta charset='UTF-8'>

<style>
body{background-color: RGB(215,201,168);}
</style>
</head>

<video id="video" width="640" height="480" ></video>
<button id="boton">Fotografía</button>
<canvas id="canvas"></canvas>
<img src="" id="fotox" alt="Imagenx">

<script>

(function() {

var streaming = false,
video = document.querySelector('#video'),
canvas = document.querySelector('#canvas'),
fotos = document.querySelector('#fotox'),
boton = document.querySelector('#boton');

navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
navigator.getMedia({video: true, audio: true} , function(stream) {
if (navigator.mozGetUserMedia)
{video.mozSrcObject = stream;}
else
{var vendorURL = window.URL || window.webkitURL; video.src = vendorURL.createObjectURL(stream); }
video.play(); },

function(err) {console.log("Ha ocurrido un Error! " + err);} );

video.addEventListener('canplay', function(ev){
if (!streaming) {
width = 640;
height = 320; 
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);

function takepicture() {
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
canvas.getContext('2d').drawImage(video, 0, 0, 320, 240);
var data = canvas.toDataURL('image/jpeg');
fotos.setAttribute('src', data);
}

boton.addEventListener('click', function(ev){takepicture(); ev.preventDefault(); }, false);

})();

</script>

<body> </body>

</html>