Saltar al contenido

Primeros pasos

GitHub

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

Ventana de terminal
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-mux-player` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

Ventana de terminal
bun add @capgo/capacitor-mux-player
bunx cap sync
import { MuxPlayer } from '@capgo/capacitor-mux-player';
import { MuxPlayer } from '@capgo/capacitor-mux-player';
const { active } = await MuxPlayer.isActive();
if (active) return;
await MuxPlayer.play({
playbackId: 'YOUR_PLAYBACK_ID',
});

Pasa el token de reproducción que tu backend genera para DRM o políticas firmadas, tal como se indica en el README del plugin.

  • Reproductor único: verificar isActive() antes de llamar a play() de nuevo.
  • Limpieza al cerrar: escucha el evento de cierre si necesitas reanudar el video del WebView inline después.
  • Los tokens caducan: refresca los JWT firmados en el servidor antes de sesiones largas.

Inicia el Mux Player nativo en pantalla completa y comienza la reproducción.

import { MuxPlayer } from '@capgo/capacitor-mux-player';
await MuxPlayer.play({ playbackId: 'playback-id-123' });

Cierra el reproductor si está visible.

import { MuxPlayer } from '@capgo/capacitor-mux-player';
await MuxPlayer.dismiss();

Indica si el reproductor se está mostrando actualmente.

import { MuxPlayer } from '@capgo/capacitor-mux-player';
const result = await MuxPlayer.isActive();
console.log(result);
export interface MuxPlayOptions {
/**
* The playback ID of the asset you want to stream.
*/
playbackId: string;
/**
* Provide a JSON web token generated for signed playback policies.
*/
playbackToken?: string;
/**
* Provide a JSON web token generated for DRM playback policies.
*/
drmToken?: string;
/**
* Override the default Mux playback domain (e.g. `stream.example.com`).
*/
customDomain?: string;
/**
* Auto-play when the player becomes visible. Defaults to true.
*/
autoPlay?: boolean;
/**
* Start playback from the provided time (in seconds).
*/
startTime?: number;
/**
* Provide a poster image URL to display before playback begins.
*/
poster?: string;
/**
* Provide a custom title to surface in native player chrome when available.
*/
title?: string;
/**
* Provide a subtitle or description to surface in native player chrome when available.
*/
subtitle?: string;
/**
* Set to true to keep the video muted when playback starts.
*/
muted?: boolean;
/**
* Mux Data environment key used for analytics. If omitted, the SDK default is used.
*/
environmentKey?: string;
/**
* Provide an explicit player name for analytics. Defaults to a generated name.
*/
playerName?: string;
/**
* Enable smart caching when the underlying SDK supports it.
*/
enableSmartCache?: boolean;
/**
* Enable verbose logging in native SDKs where available.
*/
debug?: boolean;
}
export interface MuxPlayerEvents {
/**
* Fired when the underlying player is ready to begin playback.
*/
ready: { playerName?: string };
/**
* Fired when playback starts or resumes.
*/
play: void;
/**
* Fired when playback pauses.
*/
pause: void;
/**
* Fired when playback ends.
*/
ended: void;
/**
* Fired when an unrecoverable error occurs.
*/
error: { message: string };
/**
* Fired when the fullscreen player is closed.
*/
playerDismissed: void;
/**
* Get the native Capacitor plugin version
*
* @returns {Promise<{ id: string }>} an Promise with version for this device
* @throws An error if the something went wrong
*/
getPluginVersion(): Promise<{ version: string }>;
}

Esta página se genera a partir del plugin src/definitions.ts. Vuelve a ejecutar el sync cuando el API público cambie en upstream.

Si estás usando Primeros pasos para planificar las operaciones del dashboard y de API, conéctalo con Uso de @capgo/capacitor-mux-player para la capacidad nativa en Uso de @capgo/capacitor-mux-player, Resumen de API para los detalles de implementación en API Overview, Introducción para los detalles de implementación en la Introducción, Claves de API para los detalles de implementación en las claves de API, y Dispositivos para el detalle de implementación en Devices.