Use OpenCV JavaScript para capturar y reproducir video
- Use OpenCV JavaScript para capturar y reproducir videos desde una cámara
- Use OpenCV JavaScript para capturar y reproducir videos desde un archivo
Este tutorial analizará la captura de video de una cámara y su visualización en una página web utilizando OpenCV JavaScript.
Use OpenCV JavaScript para capturar y reproducir videos desde una cámara
Podemos capturar video desde una cámara usando el elemento WebRTC, HTML canvas y video. El WebRTC se utiliza en aplicaciones de comunicación en tiempo real como la comunicación en tiempo real con una cámara y un micrófono.
Podemos usar el método navigator.mediaDevices.getUserMedia de WebRTC en JavaScript para capturar video de una cámara.
El primer argumento del método es el elemento HTML video que se puede crear usando la etiqueta <video> en HTML y podemos obtener el elemento video usando su id y la función document.getElementById() de JavaScript.
El primer argumento de la función document.getElementById() se usa para obtener el video, el audio o ambos elementos del video. El segundo argumento del método navigator.mediaDevices.getUserMedia se usa para establecer la fuente de la transmisión, que debería ser un elemento video.
El tercer argumento muestra el error que ocurrió durante el proceso de captura. Podemos especificar la altura y el ancho del video dentro de la etiqueta <video>.
También podemos reproducir el video usando la propiedad reproducción automática y silenciarlo usando la propiedad silenciado. Por ejemplo, capturemos un video de una cámara y reprodúzcalo en una página web. Vea el código a continuación.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCV JavaScript</title>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
padding-left: 5vw;
}
</style>
</head>
<body>
<h1>Input Video</h1>
<video id="video" width="300" height="200" autoplay muted></video>
</body>
</html>
Código JavaScript:
const Source_video = document.getElementById('video')
function startSource_Video() {
navigator.getUserMedia(
{video: {}}, stream => Source_video.srcObject = stream,
err => console.error(err))
}
startSource_Video()
Para ejecutar el código anterior, tenemos que guardar el código HTML dentro de un archivo .html como test.html y el código JavaScript dentro de un archivo JavaScript como script.js.
Tenemos que incluir el archivo script.js dentro del encabezado del archivo .html usando la etiqueta <script> junto con el atributo defer, asegurándonos de que el archivo de script se cargue antes que cualquier otro contenido.
Ahora podemos usar las funciones de OpenCV en el video para procesar el video de acuerdo con nuestros requisitos. Por ejemplo, podemos convertir el video en color a un video en escala de grises.
Para convertir el vídeo a escala de grises, tenemos que crear dos variables de tipo cv.Mat, que almacenarán el vídeo de entrada y de salida. Debemos pasar tres argumentos dentro de la función cv.Mat().
Los argumentos primero y segundo son la altura y el ancho del video de entrada, y el tercero es el tipo de imagen.
Sabemos que un video consta de muchas imágenes o cuadros, y para convertir el video a escala de grises, tenemos que leer cada cuadro uno por uno y convertirlo a escala de grises usando la función cv.cvtColor().
Luego, muéstralo dentro de un elemento HTML canvas usando la función cv.imshow() de OpenCV. Para capturar el video, podemos usar la función cv.VideoCapture() de OpenCV.
Para capturar el video, debemos pasar el elemento video o su id dentro de la función. Luego, para obtener los cuadros del video, podemos usar la función leer() con la variable en la que está almacenado el video.
Después de eso, podemos pasar el marco, la variable de destino y el parámetro de conversión de color dentro de la función cv.cvtColor() para convertir el marco en escala de grises.
Podemos mostrar los fotogramas uno a uno mediante la función cv.imshow(), y tenemos que pasar el elemento canvas o su id dentro de la función y la variable que contiene la imagen o fotograma que queremos mostrar en la página web.
Debemos agregar un retardo de milisegundos para procesar cada cuadro individualmente usando la función setTimeout(). Los valores de retraso pueden cambiar según la cantidad de fotogramas del video. Por ejemplo, para un video de 30 FPS, la demora en milisegundos será igual a (1000/30 - tiempo_de_proceso).
El tiempo de procesamiento es igual al tiempo que toma convertir cada fotograma a escala de grises, y podemos obtener este tiempo usando la función Date.now() que devuelve el tiempo actual, y podemos usar esta función antes y después de que la imagen sea procesada.
Entonces su diferencia será igual al retraso requerido. Entonces, por ejemplo, capturemos y conviertamos el video de una cámara a escala de grises usando OpenCV JavaScript.
En este ejemplo, también tenemos que vincular el archivo opencv.js con el archivo HTML mediante la etiqueta script, que podemos descargar desde este enlace. Vea el código a continuación.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCV JavaScript</title>
<script defer src="opencv.js"></script>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
padding-left: 5vw;
}
</style>
</head>
<body>
<h1>Input Video</h1>
<video id="video" width="300" height="200" autoplay muted></video>
<div>
<h1>Output Video</h1>
<canvas id="canvasOutput" width="300" height="100"></canvas>
</div>
</body>
</html>
Código JavaScript:
const Source_video = document.getElementById('video')
let canvas = document.getElementById('canvasOutput')
function startSource_Video() {
navigator.getUserMedia(
{video: {}}, stream => Source_video.srcObject = stream,
err => console.error(err))
}
startSource_Video()
cv['onRuntimeInitialized'] = () => {
let srcImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC4);
let dstImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC1);
let cap = new cv.VideoCapture(Source_video);
const FPS = 30;
function processSource_Video() {
let begin_delay = Date.now();
cap.read(srcImage);
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow(canvas, dstImage);
let delay = 1000 / FPS - (Date.now() - begin_delay);
setTimeout(processSource_Video, delay);
};
setTimeout(processSource_Video, 0);
};
Asegúrese de que los archivos de script script.js y opencv.js y el archivo .html tengan el mismo directorio antes de abrir el archivo .html con un navegador web.
El código anterior capturará el video de la cámara de la computadora, y si la cámara no está disponible, dará un error que se puede ver en la consola del navegador web.
Use OpenCV JavaScript para capturar y reproducir videos desde un archivo
En la sección anterior, capturamos el video de una cámara y lo mostramos en una página web, pero también podemos leer un video de un archivo y procesarlo con OpenCV JavaScript.
Por ejemplo, podemos leer un video mp4 de una carpeta, convertirlo a escala de grises y luego mostrarlo en la página web. Podemos usar el mismo código que usamos en la sección anterior.
Solo tenemos que borrar una función del archivo script.js que se utiliza para sacar un vídeo de la cámara. Luego, agregue una fuente dentro de la etiqueta <video>, que especifica la ruta del archivo de video junto con su nombre y extensión como video.mp4.
El código restante debe ser el mismo. Vea el código a continuación.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenCV JavaScript</title>
<script defer src="opencv.js"></script>
<script defer src="script.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
padding-left: 5vw;
}
</style>
</head>
<body>
<h1>Input Video</h1>
<video src="bon_fire_dog_2.mp4" id="video" width="300" height="200" autoplay muted></video>
<div>
<h1>Output Video</h1>
<canvas id="canvasOutput" width="300" height="100"></canvas>
</div>
</body>
</html>
Código JavaScript:
const Source_video = document.getElementById('video')
let canvas = document.getElementById('canvasOutput')
cv['onRuntimeInitialized'] = () => {
let srcImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC4);
let dstImage =
new cv.Mat(Source_video.height, Source_video.width, cv.CV_8UC1);
let cap = new cv.VideoCapture(Source_video);
const FPS = 30;
function processSource_Video() {
let begin_delay = Date.now();
cap.read(srcImage);
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow(canvas, dstImage);
let delay = 1000 / FPS - (Date.now() - begin_delay);
setTimeout(processSource_Video, delay);
};
setTimeout(processSource_Video, 0);
};
Producción:
Para ejecutar el código anterior, tenemos que guardar el código HTML dentro de un archivo .html como test.html y el código JavaScript dentro de un archivo JavaScript como script.js.
Tenemos que incluir el archivo script.js y el archivo opencv.js dentro del encabezado del archivo HTML usando la etiqueta <script>.
Usamos el atributo aplazar en el código HTML anterior para garantizar que el archivo de secuencia de comandos se cargue antes que cualquier otro contenido. Usamos la etiqueta <estilo> para agregar estilo CSS a la página web.
En el código JavaScript anterior, usamos la función onRuntimeInitialized para OpenCV, asegurándonos de que opencv.js se inicialice antes de usarlo.
