시작하기

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

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

그런 다음 아래 프롬프트를 사용하세요:

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

수동 설정을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

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',
});

예시: 서명된 재생

플러그인 README에 명시된 대로, DRM 또는 서명된 정책을 위해 백엔드에서 생성한 재생 토큰을 전달하세요.

자주 하는 실수

• 단일 플레이어: 확인 isActive() 호출하기 play() 다시.
• 정리 작업 취소: 이후에 인라인 WebView 비디오를 다시 재생해야 하는 경우, 해제(dismissal) 이벤트를 감지하세요.
• 토큰 만료: 긴 세션 전에 서버 측에서 서명된 JWT를 갱신하세요.

API 개요

play

네이티브 Mux Player를 전체 화면으로 실행하고 재생을 시작합니다.

import { MuxPlayer } from '@capgo/capacitor-mux-player';

await MuxPlayer.play({ playbackId: 'playback-id-123' });

dismiss

플레이어가 표시 중인 경우 플레이어를 닫습니다.

import { MuxPlayer } from '@capgo/capacitor-mux-player';

await MuxPlayer.dismiss();

isActive

플레이어가 현재 표시 중인지 여부를 반환합니다.

import { MuxPlayer } from '@capgo/capacitor-mux-player';

const result = await MuxPlayer.isActive();
console.log(result);

타입 레퍼런스

MuxPlayOptions

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;
}

MuxPlayerEvents

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 }>;
}

Source of Truth

이 페이지는 플러그인의 src/definitions.tsupstream에서 public API가 변경되면 sync를 다시 실행하세요.

시작하기 다음 단계

사용 중이라면 시작하기 대시보드 및 API 운영을 계획하려면, 이를 다음과 연결하세요 @capgo/capacitor-mux-player 사용하기 @capgo/capacitor-mux-player를 사용하여 네이티브 기능을 구현할 때, API 개요 구현 세부 사항은 API 개요에서 소개 구현 세부 사항은 소개에서 API 키 API Keys의 구현 세부 사항은, 기기 Devices의 구현 세부 사항은.