Guides
Start typing to search…

Video-Recorder

El componente video-camera es un componente web construido con StencilJs que proporciona una interfaz para acceder a la cámara web del usuario y mostrar la transmisión de video en un elemento "video". También permite pausar, reanudar y detener la transmisión de video, así como acceder al objeto de transmisión de video y al objeto de la cámara.

El componente video-camera-recorder amplía la funcionalidad del componente video-camera añadiendo capacidades de grabación. Permite a los usuarios iniciar, detener y pausar la grabación de vídeo, así como capturar instantáneas de la transmisión de vídeo.

Si deseas ver la documentación dentro de npm visita este link: video-camera npm.


Objetivo

Proporcionar una herramienta de desarrollo web que permita acceder a la cámara del usuario, reproducir el video en un elemento permitiendo iniciar, detener y pausar las grabación del video.


Instalación

Antes de comenzar, asegúrese de tener instalado Node.js y npm en su máquina. Estas herramientas son necesarias para instalar y administrar las dependencias del proyecto.

  1. Node.js: Asegúrate de tener Node.js instalado en tu sistema. Puedes descargarlo e instalarlo desde aquí.
node --version
  1. npm: npm (Node Package Manager) generalmente se instala junto con Node.js. Verifica la instalación de npm con el siguiente comando:
npm -v

Una vez confirmado lo anterior, instala el paquete utilizando npm:

npm install @jaak.ai/video-camera

Código Muestra

<video-camera-recorder
  config={{
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    showMessages: true,
    messageDetail: 'Error accessing the camera',
  }}
  onStreamStatus={(event) => handleStreamStatus(event.detail)}
  onComponentError={(event) => handleComponentError(event.detail)}
></video-camera-recorder>

Configuración

El componente puede ser configurado con múltiples opciones para adaptarse a las necesidades específicas de tu aplicación. Las propiedades incluyen las dimensiones del componente, habilitación del micrófono y personalizar mensajes de error en caso de existir.

PropiedadTipoDescripción
widthstringAncho del elemento de vídeo. Valor por defecto: '100%'.
heightstringAlto del elemento de video. Valor por defecto: 'auto'.
enableMicrophonebooleanIndica si el micrófono debe habilitarse junto con la cámara. Valor por defecto: false.
showMessagesbooleanIndica si se deben mostrar mensajes de error. Valor por defecto: false.
messageDetailstringDetalles del mensaje de error.

Eventos

El componente video-camera-recorder emite diferentes eventos que pueden ser utilizados para responder a cambios de estados y errores.

EventoDescripción
streamStatusEmitido cuando cambia el estado de la transmisión de video.
componentErrorEmitido cuando ocurre un error en el componente.

Métodos

El componente ofrece varios métodos para interactuar con él:

  • startRecording(): (Promesa) Comienza a grabar la transmisión de video.
  • stopRecording(): (Promesa) Detiene la grabación de la transmisión de video y devuelve el video grabado como una cadena Base64.
  • startTimedRecording(seconds: number): (Promesa) Comienza a grabar la transmisión de video durante una duración específica en segundos y devuelve el video grabado como una cadena Base64.
  • resumeStream(): Reanuda la reproducción de la transmisión de video.
  • pauseStream(): Pausa la reproducción de la transmisión de video.
  • stopStream(): Detiene la reproducción de la transmisión de video.
  • takeSnapshot(): (Promesa) Captura una instantánea de la transmisión de vídeo y la devuelve como una imagen codificada en Base64.

Interfaces

Error Interface

Cuando el componente falla, genera un error con los siguientes detalles de la interfaz:

PropiedadTipoDescripción
labelstringEtiqueta que describe el error.
codestringCódigo identificador del error.
detailsanyInformación adicional sobre el error.

Componente video-camera

Este componente proporciona una interfaz para acceder a la cámara web del usuario y mostrar la transmisión de video en un elemento "video".


Código Muestra

<video-camera
  config={{
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    showMessages: true,
    messageDetail: 'Error accessing the camera',
  }}
  onStreamStatus={(event) => handleStreamStatus(event.detail)}
  onComponentError={(event) => handleComponentError(event.detail)}
></video-camera>

Ejemplos

JS

Ejemplo HTML and JavaScript

Utilizando node, y una vez que el paquete video-camera-recorder se encuentra instalado:

  1. Crea un archivo HTML

Crea un archivo HTML (por ejemplo, index.html). Copia y pega el siguiente código en el archivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Video Camera</title>
    <script type="module" src="https://unpkg.com/@jaak.ai/video-recorder"></script>
</head>
<body>
    <!-- Incluir el componente Video Camera -->
    <video-camera-recorder id="videoCamera"></video-camera-recorder>

    <script type="module">
        // Seleccionar el componente face-detector
        const videoCamera = document.getElementById('videoCamera');

        // Configurar el componente con los ajustes iniciales
        videoCamera.config = {
            width: '640px',
            height: '480px',
            enableMicrophone: true,
            showMessages: true,
            messageDetail: 'Error accessing the camera',
        };

        // Manejar el evento de estado
        videoCamera.addEventListener('streamStatus', event => {
            console.log('streamStatus event:', event.detail);
            // Mostrar mensajes del stream
        });

        // Manejar errores
        videoCamera.addEventListener('componentError', event => {
            console.error('Error event:', event.detail);
            // Mostrar mensajes de error al usuario
        });


        // Ejemplo de uso de un método del componente para iniciar grabación
        function async videoStartRecording() {
            videoCamera.startRecording();
        }
        
      	// Ejemplo de uso de un método del componente para detener grabación
        function async videoStopRecording() {
            videoCamera.stopRecording();
        }

        // Agregar más lógica de funcionalidad o interacción según sea necesario
    </script>
</body>
</html>
  1. Despliega el archivo HTML

Usa un servidor web estático para servir el archivo HTML. Por ejemplo, puedes usar live-server:

npm install -g live-server
live-server

Navega a la URL proporcionada por live-server para ver tu página en acción.

ReactJS

Ejemplo ReactJS

  1. Configurar un proyecto React

Si no tienes un proyecto React, crea uno nuevo:

npx create-react-app video-camera-recorder-example
cd video-camera-recorder-example
  1. Instalar el paquete @jaak.ai/video-camera
npm install @jaak.ai/video-camera
  1. Crear el componente VideoRecorder

⚠️ IMPORTANTE si está usando en la configuración(tsconfig) JSX con el valor “jsx-react“, tambien se debe declarar los HTML tags desde el index.ts

declare global {  
	namespace JSX {  
		interface IntrinsicElements {  
			'video-camera-recorder': React.DetailedHTMLProps\<  
				React.HTMLAttributes<HTMLElement>,  
				HTMLElement  
			>;  
		}  
	}  
}

Crea un archivo llamado VideoRecorder.js dentro de la carpeta src. Copia y pega el siguiente código en VideoRecorder.js:

import React, { useState, useEffect } from 'react';
import { defineCustomElements } from '@jaak.ai/video-camera/loader';

const VideoRecorder = () => {
    const [streamStatus, setStreamStatus] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
			defineCustomElements(window);
		}, []);

    const handleStreamStatus = (event) => {
        setStreamStatus(event.detail);
    };

    const handleError = (event) => {
        setError(event.detail);
    };


    return (
        <div>
            <video-camera-recorder
                id="videoRecorder"
                onStreamStatus={handleStreamStatus}
                onComponentError={handleError}
                config={JSON.stringify({
                    width: '640px',
                    height: '480px',
                    enableMicrophone: true,
                    showMessages: true,
                    messageDetail: 'Error accessing the camera',
                })}
            ></video-camera-recorder>

            <div>streamStatus: {streamStatus && streamStatus.label}</div>
            <div>Error: {error && error.label}</div>
        </div>
    );
};

export default VideoRecorder;
  1. Usa el componente VideoRecorder

Abre el archivo src/App.js y modifica el contenido para incluir el componente FaceDetector:

import React from 'react';
import VideoRecorder from './VideoRecorder';

function App() {
  return (
    <div className="App">
      <VideoRecorder />
    </div>
  );
}

export default App;
  1. Iniciar la aplicación de React
npm run start

Abre tu navegador y navega a http://localhost:3000 para ver tu componente en acción.

Angular

Ejemplo Angular

  1. Configurar un proyecto Angular

Si no tienes un proyecto Angular, crea uno nuevo:

ng new video-camera-recorder-example
cd video-camera-recorder-example
  1. Instalar el paquete @jaak.ai/video-camera package
npm install @jaak.ai/video-camera
  1. Crear el componente VideoRecorder

Abre el archivo src/app/app.component.ts y modifícalo con el siguiente contenido:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <video-camera-recorder
      (streamStatus)="handleStreamStatus($event)"
      (componentError)="handleError($event)"
      [config]="config">
    </video-camera-recorder>

    <div>Status: {{ streamStatus?.details }}</div>
    <div>Error: {{ error?.details }}</div>
  `
})
export class AppComponent implements OnInit {
  streamStatus: string;
  error: any;
  config = {
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    showMessages: true,
    messageDetail: 'Error accessing the camera',
  };

  ngOnInit(): void {
    // Registro de elementos personalizados o cualquier lógica de inicialización
  }

  handleStreamStatus(event: CustomEvent) {
    this.streamStatus = event.detail;
  }

  handleError(event: CustomEvent) {
    this.error = event.detail;
  }

}
  1. Configurar angular.json

Asegúrate de que tu archivo angular.json incluya el script necesario para cargar el componente de Stencil. Agrega lo siguiente bajo la sección de scripts:

"scripts": [
  "node_modules/@jaak.ai/video-camera/dist/video-camera/video-camera.js"
]
  1. Iniciar la aplicación Angular
ng serve

Abre tu navegador y navega a http://localhost:4200 para ver tu componente en acción.

Updated about 2 months ago