Reactで、画面を録画してダウンロードする方法

import { useCallback, useEffect, useRef, useState } from 'react';

// 前から順に、ブラウザが録画できる形式を選ぶ
const MIME_TYPES = ['video/mp4;codecs=avc1', 'video/webm;codecs=vp9', 'video/webm'];

export function pickMimeType(): string {
  return MIME_TYPES.find((t) => MediaRecorder.isTypeSupported(t)) ?? '';
}

export const isScreenRecordingSupported =
  typeof navigator !== 'undefined' &&
  typeof navigator.mediaDevices?.getDisplayMedia === 'function' &&
  typeof MediaRecorder !== 'undefined';

export type Recording = { url: string; type: string; size: number };

export function useScreenRecorder() {
  const [recording, setRecording] = useState(false);
  const [result, setResult] = useState<Recording | null>(null);
  const [error, setError] = useState<string | null>(null);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const urlRef = useRef<string | null>(null);

  const start = useCallback(async () => {
    if (recorderRef.current) return;
    setError(null);

    let stream: MediaStream;
    try {
      stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
    } catch (e) {
      // 画面を選ぶダイアログで「キャンセル」を押すと NotAllowedError になる
      if (e instanceof DOMException && e.name === 'NotAllowedError') {
        setError('画面の共有がキャンセルされました');
      } else {
        setError(`録画を始められませんでした（${e instanceof Error ? e.message : String(e)}）`);
      }
      return;
    }

    let recorder: MediaRecorder;
    try {
      const mimeType = pickMimeType();
      recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
    } catch (e) {
      stream.getTracks().forEach((t) => t.stop());
      setError(`録画を始められませんでした（${e instanceof Error ? e.message : String(e)}）`);
      return;
    }

    const chunks: Blob[] = [];
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) chunks.push(e.data);
    };
    // 「録画を止める」のほか、ブラウザの「共有を停止」で映像が終わったときも呼ばれる
    recorder.onstop = () => {
      stream.getTracks().forEach((t) => t.stop());
      const blob = new Blob(chunks, { type: recorder.mimeType });
      if (urlRef.current) URL.revokeObjectURL(urlRef.current);
      urlRef.current = URL.createObjectURL(blob);
      recorderRef.current = null;
      setRecording(false);
      setResult({ url: urlRef.current, type: blob.type, size: blob.size });
    };

    recorder.start();
    recorderRef.current = recorder;
    setRecording(true);
  }, []);

  const stop = useCallback(() => {
    const recorder = recorderRef.current;
    if (recorder && recorder.state !== 'inactive') recorder.stop();
  }, []);

  // 画面から取り除かれたら、録画と画面の共有を止め、作った URL を手放す
  useEffect(() => () => {
    const recorder = recorderRef.current;
    if (recorder) {
      recorder.onstop = null;
      if (recorder.state !== 'inactive') recorder.stop();
      recorder.stream.getTracks().forEach((t) => t.stop());
    }
    if (urlRef.current) URL.revokeObjectURL(urlRef.current);
  }, []);

  return { supported: isScreenRecordingSupported, recording, result, error, start, stop };
}

import { useEffect, useState } from 'react';
import { useScreenRecorder } from './useScreenRecorder';

function fileName(type: string): string {
  const d = new Date();
  const p = (n: number) => String(n).padStart(2, '0');
  const stamp = `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
  const ext = type.startsWith('video/mp4') ? 'mp4' : 'webm';
  return `screen-${stamp}.${ext}`;
}

export function ScreenRecorder() {
  const { supported, recording, result, error, start, stop } = useScreenRecorder();
  const [seconds, setSeconds] = useState(0);

  // 録画している間だけ、経過秒数を数える
  useEffect(() => {
    if (!recording) return;
    setSeconds(0);
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, [recording]);

  if (!supported) {
    return <p>このブラウザでは画面を録画できません。</p>;
  }

  return (
    <div className="recorder">
      {recording ? (
        <button type="button" onClick={stop}>
          録画を止める（{seconds}秒）
        </button>
      ) : (
        <button type="button" onClick={start}>
          画面の録画を始める
        </button>
      )}
      {error && <p className="error" role="alert">{error}</p>}
      {result && !recording && (
        <div className="result">
          <video src={result.url} controls width={320} />
          <p>
            <a href={result.url} download={fileName(result.type)}>
              録画をダウンロード
            </a>
            （{(result.size / 1024).toFixed(0)} KB、{result.type}）
          </p>
        </div>
      )}
    </div>
  );
}