_________________________________________________________________________________
|                                                                                 |
|  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 (Angular 20)

Una alternativa sencilla a OBS para el navegador

¿Qué es Web-OBS?

Web-OBS es una librería de Angular 20 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

2.1. Si la app es Standalone, agregar la librería a la aplicación:

import { WebOBS } from 'web-obs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WebOBS],
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
})

2.2. Si la app es Angular legacy (con módulos), agregar la librería al modulo principal:

import { WebOBSModule } from 'web-obs';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, WebOBSModule],
  providers: [],
  bootstrap: [AppComponent],
})

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 siguentes parametros:

• 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.