Mi Blog

Las Mejores Ofertas de Amazon

hack Monitor HP 27''
hack Disco Duro Seagate Barracuda
hack Sandisk Pendrive
hack Disco Duro Kingston SSD

No te olvides seguirme en Facebook.

Tan solo tienes que hacer click en Me Gusta

 

 

x

Cómo acceder a la Webcam con HTML5 y Javascript

Cómo acceder a la Webcam con HTML5 y Javascript

(Tiempo estimado: 6 - 11 minutos)

Javascript es uno de los 3 lenguajes de programación más utilizados hoy en día junto a Python y Java. La mayoría de las páginas webs y aplicaciones web funcionan utilizando en su código una gran parte realizada en Javascript. A veces es necesario tener que acceder a la webcam de un PC para hacer una foto o grabar videos de seguridad, chatear con amigos etc... Si, con HTML5 y Javascript esto es posible.

Seguid leyendo y os enseñaré como acceder a vuestra Webcam utilizando la tecnología de HTML5 y Javascript...

 

 

¿QUÉ ES UNA WEBCAM?

Una cámara web​ (en inglés: webcam) es una pequeña cámara digital conectada a un ordenador la cual puede capturar imágenes y transmitirlas a través de Internet, ya sea a una página web u otras computadoras de forma privada.

Generalmente una cámara web necesita un ordenador para transmitir las imágenes pero existen otras cámaras webs llamadas "autónomas" que únicamente necesitan un punto de acceso a la red informática, bien sea ethernet o WiFi. A estas cámaras se las suele denominar "cámaras ip".

Las webcams son muy utilizadas en mensajería instantánea y chats como en Skype, Line, Hangouts, Zoom, Microsoft Teams etc... Por lo general, pueden transmitir imágenes en vivo, pero también pueden capturar imágenes o pequeños videos para posteriormente compartirlos con otros usuarios de Internet.

 

 

Con HTML5 y Javascript se pueden crear aplicaciones Web que necesiten acceso a la Webcam

 

 

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

  • Un PC con una Webcam
  • Un navegador Web (He probado solamente con Google Chrome/Mozilla Firefox...)
  • Editor textos (cualquiera, aunque un IDE es recomendable)

 

 

2.- OBJETIVO

En este pequeño tutorial vamos a crear una sencilla página web con un frame de una TV antigua donde insertaremos la imagen de la webcam. De esta forma crearemos una página un poco mas llamativa y añadiremos un botón para capturar la imagen en ese momento. A continuación os dejo un ejemplo del resultado que queremos obtener:

Webcam HTML5 y JavascriptPágina Web a crear

 

 

3.- FICHERO HTML5

La web es muy sencilla, tal y como se ve en el siguiente ejemplo. Tan solo tenéis que copiar&pegar el código pero voy a detallar un poco su estructura. Hay 3 divs principales: video_wrap, video_overlays y video_frame. Con la clase button_controller crearemos el botón para capturar la imagen de la webcam. Por último, en el head cargaremos la hoja de estilos style.css y justo antes del </body> incluiremos el fichero webcam.js que crearemos posteriormente:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Capturar Webcam con HTML5 y Javascript">
<meta name="author" content="Raúl Prieto Fernández">
<title>Capturar Webcam con HTML5 y Javascript</title>
<link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<!-- Cabecera -->
<h1>Capturar Webcam con HTML5 y Javascript</h1>
<h2>Raúl Prieto Fernández</h2>

<!-- Mensaje de error -->
<span name="errorMsg"></span>

<!-- Cargar Frame de TV y cargar el video de la webcam -->
<div id="video_wrap">
<div id="video_overlays">
<img src="/tv.png"></img>
</div>
<video id="video_frame" playsinline autoplay></video>
</div>

<!-- Capturamos la imagen a través de la API web y lo mostramos en el canvas -->
<div class="button_controller">
<!-- Botón para capturar -->
<button id="snap_frame">Capturar Imagen</button>
<br/><br/>
<!-- Imagen de la Webcam -->
<canvas id="canvas_frame"></canvas>
</div>

<!-- Cargamos el Javascript -->
<script src="/webcam.js" async></script>

</body>
</html>

4.- HOJA DE ESTILOS CSS3

Crearemos una hoja de estilos en un fichero llamado style.css. Es una hoja de estilos muy sencilla que no requiere explicación. Básicamente crearemos los estilos para 2 divs donde irán la imagen de la Webcam y en el otro la imagen capturada junto con un botón de acción. Guardaremos el fichero en su correspondiente ruta configurada en el head del fichero html:

body {
font-family: sans-serif;
text-align: center;
background-color: aliceblue;
}
#video_wrap {
position: absolute;
}
#video_overlays {
position: absolute;
}
#video_overlays img {
width: 850px;
height: 450px;
}
#video_frame {
width: 720px;
}
#canvas_frame {
width: 320px;
height: 200px;
float: right;
}
.button_controller {
float: right;
border: 1px solid gray;
padding: 10px;
}

 

 

5.- FICHERO JAVASCRIPT

El fichero Javascript también es muy sencillo de entender. Tan solo necesitáis copiarlo&pegarlo en un fichero llamado webcam.js en el path correcto configurado en el <head> del fichero html. Dentro del código del Javadcript está explicado brevemente lo que hace cada una de las secciones:

'use strict'; // Para hacer que el código sea mas seguro.

// Definimos las constantes que vamos a utilizar
const videoFrame = document.getElementById('video_frame');
const canvasFrame = document.getElementById('canvas_frame');
const snapFrame = document.getElementById("snap_frame");
const errorMsgElement = document.querySelector('span#errorMsg');

// Definimos tamaño del video y si queremos audio o no
const constraints = {
audio: true,
video: {
width: 720, height: 405
}
};

// Comprobamos acceso a la Webcam
async function init() {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}

// En caso de que el acceso sea correcto, cargamos la webcam
async function handleSuccess(stream) {
window.stream = stream;
videoFrame.srcObject = stream;
}

// Iniciamos JS
init();

// Hacemos captura de pantalla al hacer click
var context = canvasFrame.getContext('2d');
snapFrame.addEventListener("click", function() {
context.drawImage(videoFrame, 0, 0, 320, 140);
});

 

 

6.- PROBANDO LA PÁGINA WEB

Ahora abriremos un navegador Web y probaremos a abrir el fichero HTML. Si el código está bien, en un principio nos pedirá autorización para acceder a nuestra Webcam y a nuestro audio. Le daremos a permitir: 

Webcam HTML5 y JavascriptPermitir acceso a la Webcam y al Audio

 

 

Una vez aceptados los permisos, deberemos ver nuestra Webcam en la pantalla:

Webcam HTML5 y JavascriptImagen de la webcam

 

 

Ahora, si hacemos click en Capturar imagen aparecerá una imagen del momento que hemos hecho click:

Webcam HTML5 y JavascriptCaptura de imagen

 

 

7.- DEMO ONLINE

Si queréis comprobar como funciona realmente el código anteriormente explicado, podéis hacer click en el siguiente enlace para ver una demo, espero que os guste:

DEMO ONLINE

 

 

ENJOY!


Raúl Prieto Fernández

Sitio Web: raulprietofernandez.net

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.

Escribir un comentario

Código de seguridad
Refescar