Skip to content

Instantly share code, notes, and snippets.

@roimergarcia

roimergarcia/webcam_test.html

Created November 8, 2014 00:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roimergarcia/6e391021cf04902fb72b to your computer and use it in GitHub Desktop.
Save roimergarcia/6e391021cf04902fb72b to your computer and use it in GitHub Desktop.
Download ZIP
Prueba de Webcam con HTML5+js
Raw
webcam_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba de cámara Web</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.contenedor{ width: 350px; float: left;}
.titulo{ font-size: 12pt; font-weight: bold;}
#camara, #foto{
width: 320px;
min-height: 240px;
border: 1px solid #008000;
}
</style>
<script type="text/javascript">
//Nos aseguramos que estén definidas
//algunas funciones básicas
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || function(){alert('Su navegador no soporta navigator.getUserMedia().');};
jQuery(document).ready(function(){
//Este objeto guardará algunos datos sobre la cámara
window.datosVideo = {
'StreamVideo': null,
'url' : null
};
jQuery('#botonIniciar').on('click', function(e){
//Pedimos al navegador que nos de acceso a
//algún dispositivo de video (la webcam)
navigator.getUserMedia({'audio':false, 'video':true}, function(streamVideo){
datosVideo.StreamVideo = streamVideo;
datosVideo.url = window.URL.createObjectURL(streamVideo);
jQuery('#camara').attr('src', datosVideo.url);
}, function(){
alert('No fue posible obtener acceso a la cámara.');
});
});
jQuery('#botonDetener').on('click', function(e){
if(datosVideo.StreamVideo){
datosVideo.StreamVideo.stop();
window.URL.revokeObjectURL(datosVideo.url);
};
});
jQuery('#botonFoto').on('click', function(e){
var oCamara,
oFoto,
oContexto,
w, h;
oCamara = jQuery('#camara');
oFoto = jQuery('#foto');
w = oCamara.width();
h = oCamara.height();
oFoto.attr({'width': w, 'height': h});
oContexto = oFoto[0].getContext('2d');
oContexto.drawImage(oCamara[0], 0, 0, w, h);
});
});
</script>
</head>
<body>
<div id='botonera'>
<input id='botonIniciar' type='button' value = 'Iniciar'></input>
<input id='botonDetener' type='button' value = 'Detener'></input>
<input id='botonFoto' type='button' value = 'Foto'></input>
</div>
<div class="contenedor">
<div class="titulo">Cámara</div>
<video id="camara" autoplay controls></video>
</div>
<div class="contenedor">
<div class="titulo">Foto</div>
<canvas id="foto" ></canvas>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment