画面録画ツールとは？

画面録画ツールは、画面上で起きていることを動画にします。画面全体、1つのアプリウィンドウ、または1つのブラウザタブを録画できます。開発者に bug を見せたり、同僚に設定方法を説明したり、チュートリアルやプレゼンテーションを録画したり、ビデオ通話の記録を保存したりする最も手軽な方法です。マイクをオンにすれば、表示している内容について話しながら録画できます。

ツールの説明

このツールは、アプリや拡張機能をインストールせず、ブラウザ上で直接画面を録画します。ブラウザのダイアログで共有する対象を選び、画面音声とマイクの音声を含めて録画できます。録画中は一時停止や再開ができ、完了したら停止します。録画後はタイムライン付きのプレーヤーで開き、先頭と末尾をトリミングして、録画したままの形式、MP4、またはアニメーション GIF としてダウンロードできます。データがアップロードされることはありません。動画の録画と処理はデバイス上で行われます。

機能

  • 画面全体、ウィンドウ、またはブラウザタブを録画
  • システム音声またはタブの音声、マイク音声、あるいは両方をミックスして録音し、使用するマイクを選択
  • ブラウザが対応している形式に応じて、MP4（H.264）または WebM（VP9 または VP8）で録画
  • 解像度を元のサイズから 480p まで、フレームレートを 15〜60 fps まで選択し、動画品質を設定
  • 録画開始前に 3秒、5秒、または10秒のカウントダウンを設定し、表示したいウィンドウに切り替え
  • ライブプレビューで録画時間と増加中のファイルサイズを確認しながら、一時停止や再開が可能
  • ツールから停止するか、ブラウザ本来の「共有を停止」ボタンで停止
  • サムネイルと音声波形付きのタイムラインで録画をトリミングし、開始・終了ハンドルをドラッグするか、時刻を入力
  • 録画したままダウンロード、再エンコードせずにカット、または MP4 やアニメーション GIF に変換
  • WebM 録画には長さが書き込まれるため、プレーヤーで再生時間が表示され、途中から再生可能

仕組み

このツールは Screen Capture API を使用してブラウザに画面共有を要求し、MediaRecorder API で映像と音声を録画します。システム音声とマイクの両方がオンになっている場合は、Web Audio API を使って2つの音声を1つのトラックにミックスします。ブラウザは長さがまだ不明な状態で WebM ファイルを書き込むため、録画が停止したときにツールがファイルヘッダーへ再生時間を追加します。トリミングと変換は、WebAssembly 用にコンパイルされた FFmpeg をデバイス上で実行して行われます。録画時の形式を維持する場合は、再エンコードせずに動画をコピーします。処理が速く、品質の劣化もありませんが、カット位置は最も近いキーフレームから始まります。MP4 では H.264 と AAC を使って動画を再エンコードし、GIF は毎秒10フレーム、最大幅960ピクセルで作成されます。

ヒント

  • Chrome と Edge では、ブラウザタブの音声を常に共有できます。画面全体の音声を共有できるかどうかはシステムによって異なるため、タブの音声が必要な場合はタブを共有してください。
  • ブラウザのダイアログで音声共有をオンにしてください。「システム音声を録音」がオンになっていても、音声共有をオンにしないとシステム音声は録音されません。
  • 録画を共有する場合は、ほぼすべてのデバイスで再生できる MP4 が最適です。ブラウザが WebM しか提供しない場合は、ダウンロード時に録画を MP4 に変換してください。
  • 元の解像度で「高」または「非常に高い」品質を選ぶと、画面上のテキストが鮮明に保たれます。ファイルサイズを小さくするには、解像度または品質を下げてください。
  • GIF には音声がなく、すぐにファイルサイズが大きくなるため、必要な数秒だけにトリミングしてください。
  • 最初のトリミングまたは変換では、約30 MB の FFmpeg がダウンロードされます。録画したままの形式でダウンロードする場合、ダウンロードは必要ありません。
  • モバイルブラウザでは画面を録画できません。Chrome、Edge、Firefox、Safari などのデスクトップブラウザを使用してください。