画面録画ツール
画面、ウィンドウ、ブラウザタブを録画、音声録音対応、ビデオを即座にダウンロード
録画プレビュー
画面録画とは？
画面録画ツールは、ブラウザーから直接、画面全体、アプリケーションウィンドウ、またはブラウザータブを録画するためのツールです。ブラウザーと権限の対応によっては、システム音声やマイク入力も一緒に記録できます。短いチュートリアル、バグ再現、製品デモ、授業クリップ、デザインレビュー、サポート説明を、追加ソフトなしで作成したいときに便利です。録画前には、通知、パスワード、顧客情報、私用タブなどが映り込まないか確認する必要があります。処理はローカルで行われ、録画後にファイルをダウンロードできます。
使い方
使い方
- 録画対象を選択：画面全体、ウィンドウ、またはブラウザタブ
- 音声設定を選択（オプション）
- 「録画開始」をクリックし、共有する対象を選択
- 完了したら「録画停止」をクリック
- 録画をダウンロードまたはプレビューします
ヒント
- 録画前に不要な通知を閉じてください
- システム音声を含めるには「Browser Tab」を選択し、「Share audio」にチェックを入れてください
- 録画中に一時停止や再開ができます
- 安定したネットワーク接続で使用すると、より良い結果が得られます
利用シーン
仕組み
キャプチャは navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) から始まり、1本のビデオトラック（選択した画面、ウィンドウ、タブ）と、ブラウザおよびソースが許可する場合は1本のオーディオトラックを含む MediaStream を返します。ユーザーはネイティブのピッカーダイアログで対象を選択し、システムの「共有を停止」ボタンをクリックするとストリームが自動的に終了し、トラックの ended イベントが発火してレコーダーがファイルを確定します。 エンコード出力は MediaRecorder API で生成されます。コンテナとコーデックの選択は MediaRecorder.isTypeSupported() を使って video/webm;codecs=vp9,opus、video/webm;codecs=vp8,opus、Safari では video/mp4;codecs=avc1 などの候補を順に確認します。ondataavailable は定期的に（または停止時に）発火し、Blob チャンクを配信します。これらは連結され、記録された mimeType で単一の Blob にまとめられます。videoBitsPerSecond と audioBitsPerSecond は品質とファイルサイズのトレードオフを制御し、1080p 4Mbps VP9 の典型的な画面録画では約30MB/分になります。 システム音声とマイクの両方を要求した場合、ページは AudioContext を構築し、各 MediaStreamTrack を MediaStreamAudioSourceNode でラップして、GainNode を介し MediaStreamAudioDestinationNode にミキシングします。合成されたオーディオトラックは MediaRecorder 開始前に元のストリームを置き換えるため、結果の WebM は2本の別々のトラックではなく1本の混合 Opus トラックを含みます。ブラウザの対応は Chrome 72+、Firefox 66+、Safari 13+ で、古いブラウザは getDisplayMedia を拒否するか、audio 制約を無視します。
- キャプチャ API: navigator.mediaDevices.getDisplayMedia({ video, audio }) は MediaStream を返す。ユーザーはシステムダイアログで画面/ウィンドウ/タブを選択する
- エンコーダー: MediaRecorder は isTypeSupported() で video/webm;codecs=vp9,opus を最初に確認し、フォールバックとして vp8 または MP4 の H.264/AVC1 を使用
- チャンク出力: ondataavailable が生成する Blob スライスは連結され、ネゴシエートされた mimeType の単一 Blob にラップされる
- オーディオミキシング: AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode でシステム音声とマイクを1本の Opus トラックに合成
- ストリーム終了トリガー: ユーザーがブラウザの「共有を停止」バーをクリックするとビデオトラックの ended イベントが発火し、録画を確定する
- ビットレート制御: 1080p では videoBitsPerSecond 2.5〜8Mbps 程度。4Mbps VP9 で約30MB/分
- ブラウザ基準: Chrome 72+、Firefox 66+、Safari 13+。タブ音声のキャプチャは Chromium 系ブラウザで「タブのオーディオを共有」チェックボックスが必要
使用例
ソフトウェアチュートリアル・1080p で 10 分
ソース: 画面全体 (1920 x 1080)
音声: マイクのみ
コーデック: video/webm;codecs=vp9, opus
フレームレート: 30 fps
録画時間: 10:00
出力: tutorial.webm、約 190 MB
用途: 製品デモ、LMS へのアップロードシステム音声付きのバグ再現
ソース: ブラウザタブ (Chrome)
音声: システム音声 (ダイアログでタブ音声を共有)
コーデック: video/webm;codecs=vp8, opus
録画時間: 0:45
出力: bug-repro-2026-06-10.webm、7.2 MB
添付先: GitHub issue #1284オンライン会議のクリップ（マイク + システム音声）
ソース: アプリケーションウィンドウ (Zoom)
音声: システム音声 + マイク（両方）
録画時間: 3:20
出力: meeting-snippet.webm、42 MB
注: 1:15 で一時停止して認証情報入力をスキップし、その後再開アプリストア向けの製品デモ
ソース: アプリケーションウィンドウ (1280 x 720)
音声: なし（後でキャプションを重ねるためサイレント収録）
フレームレート: 30 fps、ビットレート: 4 Mbps
録画時間: 0:30
出力: demo.mp4 (H.264 対応時) または .webm にフォールバック
サイズ: 約 15 MB、アプリストアのプレビュー上限内よくある質問
画面録画はどのように動作しますか？
ブラウザの MediaRecorder API を使い、getDisplayMedia から取得した画面共有 MediaStream を録画します。ブラウザが共有対象（画面全体／ウィンドウ／タブ）を尋ね、ページがフレームをメモリ上の動画 Blob に記録し、停止時にダウンロードを提供します。録画サーバーやクラウド、アップロードは一切ありません。
どのフォーマットとコーデックが使われますか？
WebM コンテナに VP8 または VP9 動画コーデック（ブラウザのサポートにより異なる）と Opus 音声コーデックです。最近のブラウザ、動画エディタ、プレーヤーは WebM をネイティブで扱えます。MP4 にエクスポートしたい場合は、ダウンロード後にローカルの FFmpeg でトランスコードしてください。
システム音声を含めることはできますか？
一部のブラウザ／OS では getDisplayMedia 中にタブ音声やシステム音声をキャプチャできます。Windows 上の Chrome が最も寛容で、Safari と Firefox はより制限的です。マイク音声（あなたの声）は許可すれば別途録音されます。
録画の最長時間はどれくらいですか？
停止までブラウザのメモリ上に保持されるため、メモリが上限となります。実用上の限界は解像度とビットレートによって 10〜60 分程度です。長時間の録画や高品質なスクリーンキャストには、ディスクへ直接ストリーミングしメモリ制限のないデスクトップ版 OBS Studio の方が適しています。
録画はどこかにアップロードされますか？
いいえ。録画はブラウザ内のローカルデータです。ダウンロードすると WebM ファイルがあなたのデバイスに保存されます。明示的にファイルを共有しない限り、サーバーには送信されません。
録画がカクついたり画質が低かったりするのはなぜですか？
画面のキャプチャと再エンコードは CPU 負荷が高い処理です。他のアプリを閉じ、録画解像度を下げ、画面全体ではなく単一のウィンドウかタブを選んでください。WebCodecs API による h264 ハードウェアエンコードは対応環境で有効ですが、まだ普及していません。
録画のトリミングや編集はできますか？
このツールではできません。WebM ファイルをダウンロードして、動画エディタ（DaVinci Resolve、Shotcut、コマンドラインの FFmpeg など）でトリミング、トランスコード、注釈付けを行ってください。