Screen recording of a browser window

record.js

(() => {
  const fps = 25;
  const mimeType = "video/webm;codecs=vp9";

  function dateString() {
    const now = new Date();
    return (
      now.getUTCFullYear() +
      "-" +
      ("0" + (now.getUTCMonth() + 1)).slice(-2) +
      "-" +
      ("0" + now.getUTCDate()).slice(-2) +
      "--" +
      ("0" + now.getUTCHours()).slice(-2) +
      "-" +
      ("0" + now.getUTCMinutes()).slice(-2) +
      "-" +
      ("0" + now.getUTCSeconds()).slice(-2)
    );
  }

  async function startScreenRecording() {
    if (
      window._screenRecorder &&
      window._screenRecorder.state === "recording"
    ) {
      console.warn("Screen recording is already running.");
      return;
    }

    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { frameRate: fps },
      audio: false, // set to true if you also want audio
    });

    const chunks = [];
    const options = MediaRecorder.isTypeSupported(mimeType)
      ? { mimeType }
      : undefined;

    const recorder = new MediaRecorder(stream, options);

    recorder.ondataavailable = (e) => {
      if (e.data && e.data.size > 0) chunks.push(e.data);
    };

    recorder.onstop = () => {
      console.log("Recording stopped, preparing download…");
      const blob = new Blob(chunks, { type: "video/webm" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.download = `recording_${dateString()}.webm`;
      document.body.appendChild(a);
      a.click();
      setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }, 1000);

      // cleanup
      window._screenRecorder = null;
      window._screenStream = null;
    };

    window._screenRecorder = recorder;
    window._screenStream = stream;

    recorder.start(200); // 200ms chunks
    console.log(
      "Screen recording started. Call stopScreenRecording() or press F2 to stop.",
    );
  }

  function stopScreenRecording() {
    const recorder = window._screenRecorder;
    const stream = window._screenStream;

    if (!recorder || recorder.state !== "recording") {
      console.warn("No active screen recording to stop.");
      return;
    }

    console.log("Stopping screen recording…");
    recorder.stop();
    if (stream) {
      stream.getTracks().forEach((t) => t.stop());
    }
  }

  // expose commands globally
  window.startScreenRecording = startScreenRecording;
  window.stopScreenRecording = stopScreenRecording;

  // keyboard shortcuts: F1 = start, F2 = stop
  function handleScreenRecordKeys(evt) {
    // make sure we're not typing in an input/textarea
    const tag = (evt.target && evt.target.tagName) || "";
    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;

    if (evt.key === "F1") {
      evt.preventDefault();
      console.log("F1 pressed → starting screen recording…");
      startScreenRecording();
    } else if (evt.key === "F2") {
      evt.preventDefault();
      console.log("F2 pressed → stopping screen recording…");
      stopScreenRecording();
    }
  }

  // avoid double-registering if you paste this more than once
  if (window._screenRecordKeyHandler) {
    window.removeEventListener("keydown", window._screenRecordKeyHandler, true);
  }
  window._screenRecordKeyHandler = handleScreenRecordKeys;
  window.addEventListener("keydown", handleScreenRecordKeys, true);

  console.log("Screen recorder ready.");
  console.log("- Use startScreenRecording() / stopScreenRecording()");
  console.log("- Or press F1 to start, F2 to stop (focus this page).");
})();