BLOG

[AIを利用して投稿]
Webアプリケーションで画面録画やカメラ映像の録画機能を実装する際、JavaScriptの MediaRecorder API は非常に強力なツールです。しかし、デフォルト設定のまま使うと、動画のエンコード処理がCPUに集中し、思った以上にPCのリソースを消費してしまうことがあります。特に高解像度・高フレームレートで録画しようとすると、CPU使用率が100%に張り付き、PCの動作が重くなったり、ファンが高速回転したりといった経験をした方もいるのではないでしょうか。

実は、最近のブラウザとGPUの組み合わせであれば、このエンコード処理をGPUに肩代わりさせる「ハードウェアエンコード」を利用できる可能性があります。これにより、CPU負荷を大幅に削減し、よりスムーズな録画体験を実現できます。

この記事では、Chromeブラウザを例に、MediaRecorder APIでGPUエンコードを有効にする方法とその確認手順を詳しく解説します。

なぜGPUエンコードが重要なのか？

動画のエンコードとは、生の映像データを圧縮してファイルサイズを小さくする処理のことです。この処理は計算量が多く、CPUにとって大きな負担となります。

一方、GPU（Graphics Processing Unit）は、もともとグラフィック描画処理に特化したプロセッサですが、近年では動画処理などの並列計算が得意な処理も担当できるようになっています。GPUが動画エンコードを行うことを「ハードウェアアクセラレーションによるエンコード」や「ハードウェアエンコード」と呼びます。

ハードウェアエンコードを利用することで、以下のメリットが期待できます。

• CPU負荷の大幅な削減: CPUは他のタスクに集中でき、アプリケーション全体のパフォーマンスが向上します。
• 処理速度の向上: 専用ハードウェアで処理するため、ソフトウェアエンコードよりも高速な場合があります。
• 消費電力の削減: CPUよりも効率的に処理できるため、特にノートPCなどではバッテリー持ちが改善されることもあります。

Step 1: ChromeでGPUアクセラレーションが有効か確認する

まず、お使いのChromeブラウザでビデオエンコードのハードウェアアクセラレーションが有効になっているかを確認しましょう。

1. Chromeのアドレスバーに chrome://gpu と入力し、Enterキーを押します。
2. 「Graphics Feature Status」という項目を探します。
3. その中に「Video Encode」という項目があれば、その状態を確認します。
   • 「Hardware accelerated」と表示されていれば、Chrome自体はビデオエンコードにGPUを利用する準備ができています。

この表示があっても、実際にMediaRecorderがGPUを使うかは、使用する動画コーデックに依存します。

Step 2: 録画中のCPU/GPU使用率を確認する (現状把握)

実際にMediaRecorderで録画処理を行いながら、OSのタスクマネージャー（Windows）やアクティビティモニタ（Mac）でCPUとGPUの使用率を監視してみましょう。

もし、MediaRecorder を使っていてCPU使用率が高い場合、まだGPUエンコードの恩恵を受けられていない可能性があります。

Step 3: どのコーデックならGPUエンコードできる？「Video Acceleration Information」を深掘り！

chrome://gpu のページをさらに下にスクロールすると、「Video Acceleration Information」というセクションがあります。ここがGPUエンコードの可否を判断する上で非常に重要な情報源です。

このセクションには、お使いのGPUとドライバが、どの動画コーデックのデコード（再生支援）とエンコード（作成支援）をハードウェアでサポートしているかの詳細なリストが表示されます。

ここで注目すべきは「Encode」と書かれた行です。

今回のケーススタディ:

あるユーザーの環境では、video/webm;codecs=vp9,opus を使用して録画した際にCPU使用率が高くなりました。chrome://gpu の「Video Acceleration Information」を確認したところ、以下の状況でした。

• Decode vp9 ...: あり (VP9の再生はGPU支援あり)
• Encode vp9 ...: なし (VP9の作成はGPU支援なし)
• Encode h264 ...: あり (H.264の作成はGPU支援あり)

この結果から、VP9で録画しようとすると、Chromeはハードウェアエンコードを利用できず、CPUでソフトウェアエンコードを行っていたため、CPU負荷が高くなっていたことが判明しました。

Step 4: MediaRecorderでGPUエンコード対応コーデックを指定する

原因がわかれば対策は明確です。MediaRecorder の初期化時に、ハードウェアエンコードがサポートされているコーデックを指定すれば良いのです。

MediaRecorder のコンストラクタの第二引数 options オブジェクトの mimeType プロパティで、コンテナフォーマットとコーデックを指定します。

mimeType の構造: 'コンテナフォーマット;codecs=映像コーデック,音声コーデック'

CPU負荷が高かった例 (VP9):

GPUエンコードが期待できる例 (H.264):

先の「Video Acceleration Information」でH.264のハードウェアエンコードがサポートされていることが確認できたので、以下のように変更します。

'video/webm;codecs=h264,opus' の詳細:

• video/webm:
  • コンテナフォーマットとしてWebMを指定。WebMはGoogleが開発するオープンな動画フォーマットで、HTML5と親和性が高いです。
• codecs=h264,opus:
  • h264 (映像コーデック): H.264 (AVC) は非常に普及しており、多くのGPUでハードウェアエンコードがサポートされています。高い圧縮率と画質を両立しています。
  • opus (音声コーデック): Opusは高品質で効率的なオープンソースの音声コーデックです。WebRTCなどでも標準的に利用されています。

この指定により、ChromeはH.264のエンコード処理をGPUに任せようとします。結果として、CPU負荷の劇的な削減が期待できます。

Step 5: 再度CPU/GPU使用率を確認する

mimeType を変更して再度録画処理を行い、タスクマネージャーでCPUとGPUの使用率を確認してみましょう。H.264を指定した場合、CPU使用率が下がり、代わりにGPUの使用率（特に “Video Encode” や “3D” などの項目）が上昇していれば、GPUエンコードが機能している証拠です。

それでもGPUが使われない場合のチェックポイント

もし上記の方法を試してもGPUエンコードが有効にならない場合、以下の点を確認してみてください。

• GPUドライバのバージョン: GPUメーカーの公式サイトから最新のドライバをインストールする。
• Chromeブラウザのバージョン: Chromeを最新版にアップデートする。
• OSのバージョン: OSも最新の状態に保つ。
• chrome://flags の設定: 特定の実験的フラグが影響している可能性もゼロではありません（変更は自己責任で）。
• 他のアプリケーションの影響: 他にGPUを多用するアプリケーションが動作していると、リソースが十分に割り当てられない可能性があります。

まとめ

MediaRecorder APIで動画を録画する際のCPU負荷問題は、適切なコーデックを選択し、GPUによるハードウェアエンコードを活用することで大幅に改善できる可能性があります。

1. chrome://gpu でハードウェアエンコードの全体的なステータスと、コーデックごとの詳細なサポート状況を確認する。
2. MediaRecorder の mimeType で、ハードウェアエンコードがサポートされている映像コーデック（例: H.264）を指定する。

これにより、より快適で効率的なWeb録画アプリケーションを開発できるはずです。ぜひ、ご自身の環境でお試しください！