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:
Pá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:
Permitir acceso a la Webcam y al Audio
Una vez aceptados los permisos, deberemos ver nuestra Webcam en la pantalla:
Imagen de la webcam
Ahora, si hacemos click en Capturar imagen aparecerá una imagen del momento que hemos hecho click:
Captura 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!
Login con Google
Login con Microsoft
Login con GitHub