_________________________________________________________________________________
|                                                                                 |
|  GGGGGG    IIII     AAA      CCCCCC    CCCCCC      AAA      9999999     00000   |
| GG    GG    II     AA AA    CC    CC  CC    CC    AA AA    99     99   00   00  |
| GG          II    AA   AA   CC        CC         AA   AA   99     99  00     00 |
| GG   GGGG   II   AA     AA  CC        CC        AA     AA   99999999  00     00 |
| GG    GG    II   AAAAAAAAA  CC        CC        AAAAAAAAA         99  00     00 |
| GG    GG    II   AA     AA  CC    CC  CC    CC  AA     AA  99     99   00   00  |
|  GGGGGG    IIII  AA     AA   CCCCCC    CCCCCC   AA     AA   9999999     00000   |
|_________________________________________________________________________________|

Web-OBS-wc (WebComponent)

Una alternativa sencilla a OBS para el navegador

¿Qué es Web-OBS-wc?

Web-OBS-wc es un WebComponent que permite crear broadcasts de video y audio directamente en el navegador.

¿Cómo funciona?

Utilizando las capacidades de los navegadores modernos, permite capturar la webcam, el micrófono, compartir imágenes, videos y audios, compartir pantalla... Y permite acomodar cada elemento, crear presets, acceder a presets con atajos de teclado, etc. Te permite utilizar las funciones principales de OBS, pero en el navegador.

¿Cómo se utiliza?

1. Instalar la librería:

npm install web-obs-wc

2. Añadimos la librería al html:

/*Cambia la ruta según la versión que uses. */
<script type="module" src="https://unpkg.com/[email protected]/dist/web-obs/elements/web-obs.js"></script>

3. Utilizar la librería en el componente:

<web-obs></web-obs>

DEMO

https://giacca90.github.io/web-obs/

Parametros

El componente puede recibir los siguientes parámetros:

• savedFiles: Archivos guardados del usuario (opcional). Type: File[]
• savedPresets: Presets guardados del usuario (opcional). Type: Map<string, Preset>
• readyObserve: Avisa cuando el componente padre está listo para emitir (opcional) Type: Observable<boolean>

También puede emitir los siguientes eventos:

• emision: Emite el video y audio (opcional) Type: EventEmitter<MediaStream | null>
• savePresets: Los presets para guardar (opcional) Type: EventEmitter<Map<string, Preset>>

Ejemplo completo:

<WebOBS
(emision)="emiteWebcam($event)"
(savePresets)="savePresets($event)"
[readyObserve]="this.readyObserver"
[savedPresets]="this.savedPresets"
[savedFiles]="this.savedFiles">
</WebOBS>

Notas adicionales

• Las funciones avanzadas de audio necesitan una conexion segura (HTTPS) para funcionar.
• No emite directamente, devuelve un MediaStream, que se puede redirigir al backend, también por WebRTC.