Screen Capture APIで閲覧中の画面を録画する

はじめに

ブラウザの画面を録画したい場面ありますよね。

バグの再現手順を共有したり、デモ動画を作ったりするケースなど。

Windowsであれば Win + Alt + R や Win + G でOSの標準録画機能が使えますが、解像度やフレームレートの設定は細かくできないようです。

まぁWindowsの場合は基本はこれで十分なので、アプリケーションに録画機能を組み込みたいとかそんな場面のほうが多いかと思います。

WebAPIにScreen Capture APIというものがあり、これをJSから利用することで、細かく設定した上で他ツールなしで録画が実行可能です。

Macにも標準であるようなので、Linuxで使うとかですかね。

これは、オンラインビデオ通話の画面共有でも使われるAPIで、必ずユーザー操作によって開始される設計になっています（ユーザー操作なしで勝手に録画を開始させることはできません）。

今回は特別なツールを使わず手っ取り早くブラウザのDevToolsからコードをコンソールに貼り付けるだけで動作させる一例を紹介します。

テスト用とかご自身のサイトやWEBアプリでやるのはいいですが、他人様のサイトでは規約の範囲内で。

前提

Google Chromeのみで検証しています。

他ブラウザでの動作はMDNのページの対応表を参照ください。

2026年5月時点では、モバイルでは未対応です。

コード

ブラウザのDevToolsコンソールに貼り付けて実行します。画面右下に「録画開始」ボタンが表示されます。

// ボタンを画面右下に追加
const btn = document.createElement("button");
btn.id = "recBtn";
btn.textContent = "録画開始";
btn.style.cssText = `
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999999;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
`;
document.body.appendChild(btn);

// 録画ロジック
(() => {
  let recorder;
  let chunks = [];
  let recording = false;

  btn.onclick = async () => {
    if (!recording) {
      // 共有する画面をユーザーに選ばせる
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          width: { ideal: 1920 }, // 横解像度（例: 1280 / 1920）
          height: { ideal: 1080 }, // 縦解像度（例: 720 / 1080）
          frameRate: { ideal: 30 }, // フレームレート（例: 15 / 30 / 60）
        },
        audio: true,
      });

      chunks = [];
      recorder = new MediaRecorder(stream);

      // データが届くたびに chunks に蓄積
      recorder.ondataavailable = (e) => e.data.size && chunks.push(e.data);

      // 録画停止後に webm ファイルとしてダウンロード
      recorder.onstop = () => {
        const blob = new Blob(chunks, { type: "video/webm" });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = `record-${Date.now()}.webm`;
        a.click();
        URL.revokeObjectURL(url);
      };

      recorder.start();
      recording = true;
      btn.textContent = "録画停止";

      // ブラウザの「共有を停止」ボタンが押されたときも正常終了させる
      stream.getVideoTracks()[0].onended = () => {
        if (recording) btn.click();
      };
    } else {
      recorder.stop();
      recording = false;
      btn.textContent = "録画開始";
    }
  };
})();

使い方

1. DevTools（F12）を開いてコンソールタブに切り替えます
2. 上のコードを貼り付けて Enterキーを入力
3. 画面右下に「録画開始」ボタンが表示されます
4. ボタンをクリックすると共有対象の選択ダイアログが開かれます
5. 録画したい画面・タブ・ウィンドウを選択して「共有」を押下します
6. 「録画停止」をクリックすると .webm ファイルがダウンロードされる（ブラウザの設定でダウンロード時にフォルダを選択しないようになっている場合は自動で既定の場所に保存されます）

注意点

• 出力形式は video/webm（WebM）です。
• audio: true を指定してもマイク音声ではなく、タブの音声（システム音）が録音されます
• DevToolsを閉じてもボタンとロジックはページに残り続けます。不要になったらページをリロードしてください

おわりに

今回はDevToolsから録画する方法を記載しましたが、Webアプリに同様のコードを実装して実行させることも可能です。（その場合でもモバイルは対応していないので注意）