Nextcloud Stream

解きたかったこと

自宅のNextcloudにある動画を、スマートフォン・タブレット・PCから迷わず開き、前回の続きから再生できるようにしました。新しい動画サーバーや別のユーザー管理は増やさず、既存のNextcloudセッションとアクセス権を正として扱います。

構成

• Vue 3とTypeScriptで、フォルダー・動画一覧、パンくず、プレイヤー、通信状態を表示
• PHP側はNextcloudアプリとして動作し、ユーザー別の再生位置をNextcloud DBへ保存
• 動画本体はNextcloudが生成したWebDAV URLからブラウザの標準video要素へ直接配信
• ViteでNextcloud公式構成のJavaScriptとCSSを生成し、Service WorkerでPWAを提供

設計と工夫

• 日本語・空白・#を含むファイル名でも壊れないよう、NextcloudのFile.encodedSourceを再エンコードせず使用
• 再生位置はファイルのETagと組み合わせ、動画が差し替わった場合に古い位置を誤って復元しない
• 進捗は10秒ごとだけでなく、一時停止・画面非表示・終了時にも保存して取りこぼしを抑制
• Service Workerは認証済みHTML、動画、WebDAV、OCS APIをキャッシュせず、匿名オフライン画面と静的資産だけを許可リストで管理

検証

• vue-tsc、ESLint、Stylelint、Vitest、PHPUnit、Vite buildを品質ゲートとして実行
• Rangeリクエストが206 Partial Content、Accept-Ranges、Content-Rangeを返すことを認証済みテスト動画で確認できる手順を用意
• ローディング、空フォルダー、通信エラー、オフラインをそれぞれ独立した画面状態として扱う

制約と次の一手

• トランスコードは行わないため、端末とブラウザが動画コーデックを直接再生できる必要がある
• 前段のWebサーバーまたはプロキシがHTTP Rangeに対応していることが前提
• 4Kや未対応コーデックを回線に応じて変換する場合は、JellyfinなどのHLS配信層を別途検討する