はじめに

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('プレーヤーは現在表示中');
}

// アンマウント時にすべてのリスナー登録を削除
await MuxPlayer.removeAllListeners();

ヒント

• Mux署名キーを使用してバックエンドで署名済み再生およびDRMトークンを生成します。
• アプリで複数のプレーヤーを実行する際に分析を分離するためにplayerNameを渡します。
• サポートされているプラットフォームでオフライン復元力を向上させるためにenableSmartCacheと組み合わせます。