Mi Blog

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