【ツール】ブラウザだけで画面録画をするツール　その③　

ぽぽろ

2023年8月7日 21:21

前回紹介した「【ツール】ブラウザだけで画面録画をするツール　その②」にChatGPTの助けを借りて録画後のプレビュー機能を追加してみました。

これまでの機能

画面録画
ウインドウ録画
ブラウザタブ録画
マイク録音（オンオフ切り替え）
録画自動停止
収録ダウンロード
録画後プレビュー

スクリーンショット

ができるようになりました。

準備

使い方は以下のコードをメモ帳などで「ブラウザ録画.htm」など拡張子.htmなどで保存しEdgeやChromeで開くと使えます。

<!DOCTYPE html>
<html>

<head>
  <title>ブラウザのみで画面録画ツール</title>
  <style>
    body {
      font-family: Segoe UI, Arial, sans-serif;
      padding: 1em;
      background-color: #f5f5f5;
    }
    button {
      margin-top: 1em;
      padding: 0.5em 1em;
      border: none;
      background-color: #0078d7;
      color: white;
      border-radius: 2px;
      font-size: 1em;
      cursor: pointer;
    }
    button:disabled {
      background-color: #a6a6a6;
    }
    label {
      margin-right: 0.5em;
    }
  </style>
</head>

<body>
  <h1>ブラウザのみで画面録画ツール</h1>
  <button id="start">録画対象選択</button>
  <button id="record" disabled>録画開始</button>
  <button id="download" disabled>録画ダウンロード</button>
  <br>
  <label for="audio">マイク音声を録音する</label>
  <input type="checkbox" id="audio">
  <br>
  <label for="autoStop">自動停止</label>
  <input type="checkbox" id="autoStop">
  <label for="duration">録画時間（分）</label>
  <input type="number" id="duration" value="1" disabled>
  <br>
  <video id="preview" controls style="width:100%; margin-top:1em;" hidden></video>
  <script>
    const startButton = document.getElementById('start');
    const recordButton = document.getElementById('record');
    const downloadButton = document.getElementById('download');
    const preview = document.getElementById('preview');
    const audioInput = document.getElementById('audio');
    const autoStopInput = document.getElementById('autoStop');
    const durationInput = document.getElementById('duration');

    let mediaRecorder, stream, chunks = [], recordingTimeoutId;

    startButton.addEventListener('click', async () => {
      const constraints = {
        video: { cursor: 'always' },
        audio: audioInput.checked ? { echoCancellation: true } : false,
      };
      stream = await navigator.mediaDevices.getDisplayMedia(constraints);
      recordButton.disabled = false;
      startButton.disabled = true;
    });

    recordButton.addEventListener('click', () => {
      if (mediaRecorder && mediaRecorder.state === 'recording') {
        stopRecording();
      } else {
        startRecording();
      }
    });

    autoStopInput.addEventListener('change', () => {
      durationInput.disabled = !autoStopInput.checked;
    });

    downloadButton.addEventListener('click', () => {
      const blob = new Blob(chunks, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'recording.webm';
      a.click();
      URL.revokeObjectURL(url);
    });

    function startRecording() {
      chunks = [];
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) chunks.push(event.data);
      };
      mediaRecorder.onstop = () => {
        const blob = new Blob(chunks, { type: 'video/webm' });
        preview.src = URL.createObjectURL(blob);
        preview.hidden = false;
        downloadButton.disabled = false;
      };
      mediaRecorder.start();
      recordButton.textContent = '録画停止';

      if (autoStopInput.checked) {
        const duration = durationInput.value * 60 * 1000; // minutes to milliseconds
        recordingTimeoutId = setTimeout(stopRecording, duration);
      }
    }

    function stopRecording() {
      clearTimeout(recordingTimeoutId);
      mediaRecorder.stop();
      recordButton.textContent = '録画開始';
    }
  </script>
</body>

</html>

使い方

「録画対象選択」ボタンをクリックします。
録画したい画面を選択します。
「マイク音声を録音する」にチェックを入れると、マイクからの音声も録音します。
「録画開始」ボタンをクリックして録画を開始します。
録画を停止するには再度「録画開始」ボタンをクリックします。
「録画ダウンロード」ボタンをクリックすると、録画データがダウンロードされます。

録画データの再生方法

録画データはWebM形式で保存されます。WebMファイルはほとんどのブラウザで直接再生することができます。ダウンロードしたファイルをブラウザにドラッグ＆ドロップするだけで、録画内容を確認することができます。

また、一部のメディアプレーヤーでも再生することが可能です。VLCメディアプレーヤーなどはWebM形式をサポートしています。

この記事が気に入ったらサポートをしてみませんか？

【ツール】ブラウザだけで画面録画をするツール その③

これまでの機能

スクリーンショット

準備

使い方

録画データの再生方法

前の記事

【ツール】ブラウザだけで画面録画をするツール　その③　