FlutterでPiP再生を実装した話

Flutter x Swift連携によるPiP（Picture-in-Picture）再生の実装方法を紹介します。video_playerパッケージをベースに、フォアグラウンドはFlutter、バックグラウンドはネイティブAVPlayerが担当する2プレーヤー並行再生方式で、シームレスなPiP体験を実現しました。

Transcript

1. FlutterでPiP再生を実装した話
2. • 2023年10月ASSIGN入社 • Flutter歴は2年ほど • 中途版の企画・開発・運用からデータ分析基盤の構築 までを横串で担当 キャリアプラットフォーム事業部 白井 翔大 Shota Shirai モバイルアプリエンジニア
3. 1.　アプリ・機能概要説明 2.　PiP再生の実装方法 3.　PiP再生の安定性・品質担保 4.　まとめ アジェンダ
4. 1.　アプリ・機能概要説明 2.　PiP再生の実装方法 3.　PiP再生の安定性・品質担保 4.　まとめ アジェンダ
5. アプリ・機能紹介 若手ハイエンド特化の キャリアプラットフォーム
6. 目指したUI/UX UdemyやYoutube のようにストレスなく学べる 動画学習体験
7. 目指すUXを実現するために必要な要素 快適な操作性 03 待ち時間なくサクサク動く 進捗の可視化 01 どこまで学んだかわかる 02 シームレスな再開 途中から即座に続けられる ながら視聴 04 作業しながら学べる
8. 使用パッケージ video_player 動画の描画とコントローラのみを提供するパッケージ シークバーや再生ボタン、PiP等は自前実装が必要 https://pub.dev/packages/video_player
9. その他のパッケージ紹介 chewie youtube_player_flutter 特徴 YouTube動画をWebView（iFrame Player API）経由で埋め込み再生するパッケージ video_playerのラッパーパッケージ マテリアルデザイン/Cupertinoデザインの再 生コントロール付き 4ヶ月前 最終更新 5ヶ月前 ※ どちらのパッケージもPiP再生のサポートはない
10. 1.　アプリ・機能概要説明 2.　PiP再生の実装方法 3.　PiP再生の安定性・品質担保 4.　まとめ アジェンダ
11. PiP再生の実装方法 swift Flutter video player videoPlayer Controller ③textureId を渡す VideoPlayer (Widget) swift Flutter PiPメソッド VideoPlayer Plugin AVFoundation AVPlayer ⇩ CVPixelBuffer OSが描画 video player PiP再生 VideoPlayer Plugin AVPictureInPicture Controller AVFoundation AVPlayer ⇩ AVPlayerLayer ②Method Channel経由 でURL/Pathを 送る ②Method Channel経由 でURL/Pathを 送る ④動画のフ レームを生 成 ⑤参照して描 画
12. 本来やりたかったこと フォアグラウンドはFlutter、バックグラウンドはネイティブ PiPで再生する構成を目指した しかし、PiP起動にはForegroundInactive状態が必須で、通常速度でのバックグラウンド遷移動作が不安定 だった フォアグラウンド（アプリを開いている時） Flutter VideoPlayer ユーザーに表示 Native AVPlayer 停止 バックグラウンド（ホームに戻った時） Flutter VideoPlayer 停止 Native AVPlayer ユーザーに表示
13. 実際に実現したこと フォアグラウンド（アプリを開いている時） Flutter VideoPlayer ユーザーに表示 Native AVPlayer ミュート + 1x1px 裏再生 バックグラウンド（ホームに戻った時） Flutter VideoPlayer 停止 Native AVPlayer ミュート解除 + PiP表示 2つの動画プレイヤーを常時並行再生してシームレスな PiP再生を実現 ミュート/pauseの切り替えで音の重複を防止している
14. Flutter iOS PiP：2プレーヤー方式 Step 1: 初期化 Step 2: BG遷移 Step 3: PiP中 Step 4: FG復帰 Step 5: 動画切替 • Flutter VideoPlayerで 再生 • 同URLでAVPlayer作成 • AVPlayerをミュートON • 1x1pxで画面に配置 • autoPiP設定を ON • バックグラウンド遷移 • 再生位置をNativeに同 期 • 進捗をサーバーに保存 • Flutter VideoPlayer停 止 • ミュート解除 • iOSが自動で PiP開始 • PiPウィンドウで再生中 • Native AVPlayerが担 当 • Flutterは停止中 （何もしていない） • アプリに戻る • Nativeから再生位置を 取得 • PiPウィンドウを閉じる • AVPlayerをミュートに戻 す • Flutterで該当位置に シーク • Flutter再生を再開 • 別の動画を選択 • Flutter側を新URLで初 期化 • 古いAVPlayerを破棄 • 新URLでAVPlayer再 作成 • ミュート裏再生を再開
15. 実際のPiP動作
16. 1.　アプリ・機能概要説明 2.　PiP再生の実装方法 3.　PiP再生の安定性・品質担保 4.　まとめ アジェンダ
17. PiP再生の安定性と品質担保 Flutter層のロジックと操作はコードで品質を保証し、 OS層に依存する描画と再生体験は 手動で検証する UI操作・ 振る舞い 状態・計算 検証内容 動画の レンダリング テスト手法 考え方 Unitテスト 複雑なロジックの正常性を 高速かつ網羅的に検証する • 視聴進捗や完了ステータスの管理 • 再生速度やフルスクリーン等の設 定反映 Widgetテスト ユーザー操作に対する反応が 意図通りか検証する • 再生/停止等のUI操作 • PiPボタン操作時の通信 手動テスト 視聴体験の質とOS固有の 挙動は実機で保証する • 実際の動画の描画 • PiP小窓表示
18. 1.　アプリ・機能概要説明 2.　PiP再生の実装方法 3.　PiP再生の安定性・品質担保 4.　まとめ アジェンダ
19. まとめ 01 ラーニング機能で目指した UX 02 Flutter × Native連携による PiPの実装 03 PiP再生の安定性と品質担保 - ユーザーがキャリアについてストレスなく動画で学ぶ体験を提供 - video_playerパッケージを採用し、進捗管理やPiP再生の要件を実現 - フォアグラウンド時はFlutter、バックグラウンド時はNativeが 引き継ぐハイブリッドな構成でシームレスなPiP再生を実現 - 時間がかかる動画描画やOS依存のPiP表示は手動検証とし、 状態管理やUI操作をUnit/Widgetテストでカバー