시작하기

1. 플러그인 설치

   npm

   npm i @capgo/capacitor-mux-player

   pnpm

   pnpm add @capgo/capacitor-mux-player

   yarn

   yarn add @capgo/capacitor-mux-player

   bun

   bun add @capgo/capacitor-mux-player

2. 네이티브 프로젝트 동기화

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

iOS 준비

1. ios/App/ 아래의 Xcode 워크스페이스를 엽니다.
2. Swift 패키지 https://github.com/muxinc/mux-player-swift를 앱 타겟에 추가하여 MuxPlayerSwift 모듈을 사용할 수 있도록 합니다.
3. 배포 타겟이 iOS 15+ 인지 확인하고 다시 빌드합니다.

Android 준비

Gradle 모듈은 올바른 리포지토리 및 종속성과 함께 제공됩니다. 사용자 지정 기업 프록시를 사용하는 경우 https://muxinc.jfrog.io/artifactory/default-maven-release-local에 대한 요청을 허용하세요.

플레이어 실행

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

await MuxPlayer.play({
  playbackId: 'your-playback-id',
  environmentKey: 'your-mux-data-key',
  title: 'Launch Announcement',
  subtitle: 'Filmed live at Capgo HQ',
  poster: 'https://stream.example.com/poster.jpg',
});

플레이어 이벤트 수신

const readyHandle = await MuxPlayer.addListener('ready', ({ playerName }) => {
  console.log('Mux player ready', playerName);
});

const errorHandle = await MuxPlayer.addListener('error', ({ message }) => {
  console.error('Mux player error:', message);
});

// 플레이어를 해제한 후 정리
const dismissPlayer = async () => {
  await MuxPlayer.dismiss();
  await readyHandle.remove();
  await errorHandle.remove();
};

토큰 기반 재생

await MuxPlayer.play({
  playbackId: 'signed-playback-id',
  playbackToken: signedPlaybackToken,
  drmToken: signedDrmToken, // DRM 정책을 활성화한 경우 선택 사항
  autoPlay: true,
  startTime: 120, // 2분부터 시작
});

플레이어 라이프사이클에 반응

const { active } = await MuxPlayer.isActive();
if (active) {
  console.log('Player currently visible');
}

// 마운트 해제할 때 모든 리스너 등록 제거
await MuxPlayer.removeAllListeners();

팁

• Mux 서명 키를 사용하여 백엔드에서 서명된 재생 및 DRM 토큰을 생성하세요.
• 앱에서 여러 플레이어를 실행할 때 분석을 구분하려면 playerName을 전달하세요.
• 지원되는 플랫폼에서 오프라인 복원력을 개선하려면 enableSmartCache와 결합하세요.