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.videoHeight / (video.videoWidth/width); -->
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>