【ITニュース解説】Building a KYC Video Recording and Splitting System: React + FFmpeg + MediaRecorder API

この記事では、Webブラウザ上でKYC（顧客確認）手続きの動画を録画し、ステップごとに分割して保存するシステムの構築について解説する。React、TypeScript、FFmpeg、MediaRecorder APIを主な技術として使用し、Web環境でのリアルタイム動画処理という課題に取り組んでいる。

システムは、MediaRecorder APIを用いてKYCミッションの開始から完了までの動画を録画する。録画された動画データは、Blob形式で保存される。各KYCステップの開始時刻、終了時刻、継続時間を正確に記録するために、タイムラインデータ構造が設計されている。このタイムラインデータは、動画を分割する際の基準となる。

WebブラウザでFFmpegを利用するためには、いくつかの技術的な課題を解決する必要がある。特に、Cross-Originポリシーに関する設定が重要となる。SharedArrayBufferを使用するためには、サーバー側の設定ファイル（例：vite.config.ts）に適切なヘッダーを設定する必要がある。具体的には、Cross-Origin-Opener-Policyをsame-origin、Cross-Origin-Embedder-Policyをrequire-corpに設定する。

FFmpegをWeb環境で利用するために、@ffmpeg/ffmpegと@ffmpeg/utilライブラリを使用する。これらのライブラリをインポートし、FFmpegのコアファイル（ffmpeg-core.js, ffmpeg-core.wasm）をロードすることで、ブラウザ上でFFmpegの機能を利用できるようになる。

動画の分割処理は、タイムラインデータに基づいてステップごとに動画を切り出す。まず、録画された動画BlobをFFmpegの仮想ファイルシステムに書き込む。次に、タイムラインデータを参照し、各ステップの開始時刻と継続時間に基づいてFFmpegのコマンドを実行する。コマンドの例としては、-i input.webm -ss startTime -t duration -c copy outputNameがある。これにより、指定された時間範囲の動画が切り出され、指定されたファイル名で保存される。分割された動画データは、Blob形式で取り出すことができる。

動画処理において、いくつかの問題が発生し、解決策が講じられている。例えば、OpenCV.jsをCDNからロードする際にCross-Originエラーが発生した場合、OpenCV.jsファイルをローカルにホストすることで解決している。また、同じ動画が複数回アップロードされるのを防ぐために、state管理と参照比較を用いて重複アップロードを防止している。さらに、大きな動画を処理する際にメモリ不足やパフォーマンス低下が発生した場合、適切なリソース管理とcleanup処理を実装することで対応している。具体的には、処理後にFFmpegの仮想ファイルシステムから不要なファイルを削除する。

システムのフロントエンドは、React 19とTypeScriptで構築されている。サーバーの状態管理には@tanstack/react-query、ルーティングには@tanstack/react-router、スタイリングにはStyled ComponentsとTailwindCSSが使用されている。動画処理には、MediaRecorder API、FFmpeg.wasm、OpenCV.js、MediaPipeが用いられている。開発ツールとしては、Vite、Jest、SonarQube、Sentryが使用されている。

このプロジェクトを通して、Web環境でのリアルタイム動画処理システムを完成させ、クライアントサイドでの動画分割をFFmpeg.wasmを用いて実現した。Cross-OriginポリシーやSharedArrayBufferに関連する問題も解決し、メモリ効率の良い大容量ファイル処理ロジックを実装した。

今後の改善点としては、Web Workersを利用したバックグラウンド処理、チャンクベースでのプログレッシブアップロード、リアルタイム動画圧縮、Service Workersによるオフラインサポートなどが挙げられている。