Media devices

const stream = await navigator.mediaDevices.getUserMedia({
  audio: { echoCancellation: true, noiseSuppression: true },
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30, max: 60 },
    facingMode: "user", // "environment" = back camera
  },
});

// which constraints does this browser understand at all?
const supported =
  navigator.mediaDevices.getSupportedConstraints();
if (supported.frameRate) {
  /* safe to constrain frameRate */
}

async function cameraPermission(): Promise<PermissionState> {
  try {
    const s = await navigator.permissions.query({
      name: "camera",
    });
    return s.state;
  } catch {
    return "prompt"; // query not supported: just ask
  }
}

const md = navigator.mediaDevices;
const devices = await md.enumerateDevices();
const cams = devices.filter((d) => d.kind === "videoinput");
// before any grant: labels are "", often one entry per kind
 
md.addEventListener("devicechange", () => {
  // plugged / unplugged: re-enumerate and refresh the UI
});

type DisplayOptions = DisplayMediaStreamOptions & {
  // Chromium-only hints, not in lib.dom yet
  selfBrowserSurface?: "include" | "exclude";
  systemAudio?: "include" | "exclude";
  surfaceSwitching?: "include" | "exclude";
  monitorTypeSurfaces?: "include" | "exclude";
  preferCurrentTab?: boolean;
};
 
const options: DisplayOptions = {
  video: { displaySurface: "monitor", frameRate: 30 },
  audio: true, // tab audio in Chromium; ignored elsewhere
  selfBrowserSurface: "exclude",
};
const screen =
  await navigator.mediaDevices.getDisplayMedia(options);
 
const [track] = screen.getVideoTracks();
track!.contentHint = "detail"; // text/slides: keep sharpness
track!.addEventListener("ended", () => {
  // user clicked the browser's "Stop sharing"
});

const [cam] = stream.getVideoTracks();
if (cam) {
  const caps = cam.getCapabilities();
  const maxW = caps.width?.max ?? 1280;
  await cam.applyConstraints({ width: { ideal: maxW } });
  const { width, height, frameRate } = cam.getSettings();
  console.log(`${width}x${height}@${frameRate}`);
}
 
// always release devices when done
function stopAll(s: MediaStream) {
  for (const t of s.getTracks()) t.stop();
}

const mimeType = [
  "video/webm;codecs=vp9,opus",
  "video/webm;codecs=vp8,opus",
  "video/mp4;codecs=avc1,mp4a.40.2",
  "video/webm",
  "video/mp4",
].find((t) => MediaRecorder.isTypeSupported(t));
 
const rec = new MediaRecorder(stream, {
  mimeType, // undefined = browser default
  videoBitsPerSecond: 2_500_000,
});
const chunks: Blob[] = [];
rec.addEventListener("dataavailable", (e) => {
  if (e.data.size > 0) chunks.push(e.data);
});
rec.addEventListener("stop", () => {
  const blob = new Blob(chunks, { type: rec.mimeType });
});
rec.start(1000); // emit a chunk every second

async function snapshot(
  video: HTMLVideoElement,
): Promise<Blob> {
  const canvas = document.createElement("canvas");
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext("2d");
  if (!ctx) throw new Error("2d context unavailable");
  ctx.drawImage(video, 0, 0);
  return new Promise((resolve, reject) =>
    canvas.toBlob(
      (b) => (b ? resolve(b) : reject(new Error("toBlob"))),
      "image/jpeg",
      0.9,
    ),
  );
}

declare global {
  interface ImageCapture {
    grabFrame(): Promise<ImageBitmap>; // missing in TS 5.9
  }
}
 
async function takePhoto(track: MediaStreamTrack) {
  if (!("ImageCapture" in window)) return null;
  const capture = new ImageCapture(track);
  const caps = await capture.getPhotoCapabilities();
  return capture.takePhoto({
    imageWidth: caps.imageWidth?.max,
  }); // Blob, often JPEG
}
 
export {};

const ctx = new AudioContext(); // resume() it on a click
const source = ctx.createMediaStreamSource(stream);
const analyzer = ctx.createAnalyser();
analyzer.fftSize = 1024;
source.connect(analyzer); // not to ctx.destination: no echo
 
const buf = new Float32Array(analyzer.fftSize);
function rmsDb(): number {
  analyzer.getFloatTimeDomainData(buf);
  let sum = 0;
  for (const v of buf) sum += v * v;
  const rms = Math.sqrt(sum / buf.length);
  return 20 * Math.log10(rms || 1e-8); // dBFS, 0 = max
}

function mediaErrorMessage(err: unknown): string {
  const name = err instanceof Error ? err.name : "";
  switch (name) {
    case "NotAllowedError":
      return "Permission denied. Allow it in site settings.";
    case "NotFoundError":
      return "No matching device found.";
    case "NotReadableError":
      return "The device is in use by another app.";
    case "OverconstrainedError":
      return "The device can't meet those settings.";
    default:
      return "Could not start capture.";
  }
}

export async function startPreview(
  video: HTMLVideoElement,
  deviceId?: string,
): Promise<() => void> {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: deviceId
      ? { deviceId: { exact: deviceId } }
      : { facingMode: "user", width: { ideal: 1280 } },
  });
  Object.assign(video, { muted: true, playsInline: true });
  video.srcObject = stream;
  await video.play();
  return () => {
    for (const t of stream.getTracks()) t.stop();
    video.srcObject = null;
  };
}

import { startPreview } from "./preview";
 
export async function cameraPicker(
  select: HTMLSelectElement,
  video: HTMLVideoElement,
) {
  const md = navigator.mediaDevices;
  let stop = await startPreview(video); // grant => labels
  const fill = async () => {
    const cams = (await md.enumerateDevices())
      .filter((d) => d.kind === "videoinput");
    select.replaceChildren(...cams.map((d, i) =>
      new Option(d.label || `Camera ${i + 1}`, d.deviceId)));
  };
  await fill();
  md.addEventListener("devicechange", fill);
  select.addEventListener("change", async () => {
    stop();
    stop = await startPreview(video, select.value);
  });
}

export async function recordScreen() {
  const md = navigator.mediaDevices;
  const stream = await md.getDisplayMedia({ audio: true });
  const type = MediaRecorder.isTypeSupported("video/webm")
    ? "video/webm" : "video/mp4"; // older Safari
  const rec = new MediaRecorder(stream, { mimeType: type });
  const chunks: Blob[] = [];
  rec.ondataavailable = (e) => chunks.push(e.data);
  rec.onstop = () => {
    const blob = new Blob(chunks, { type });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = `screen-${Date.now()}.${type.slice(6)}`;
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 10_000);
  };
  const [video] = stream.getVideoTracks(); // "Stop sharing"
  video?.addEventListener("ended", () => {
    if (rec.state !== "inactive") rec.stop();
    for (const t of stream.getTracks()) t.stop();
  });
  rec.start(1000);
}

export async function capturePhoto(
  video: HTMLVideoElement,
  type: "image/jpeg" | "image/png" = "image/jpeg",
): Promise<File> {
  const bitmap = await createImageBitmap(video);
  const { width, height } = bitmap;
  const canvas = new OffscreenCanvas(width, height);
  canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
  bitmap.close();
  const blob = await canvas.convertToBlob({
    type,
    quality: 0.9,
  });
  const ext = type === "image/png" ? "png" : "jpg";
  const name = `photo-${Date.now()}.${ext}`;
  return new File([blob], name, { type });
}

export async function micMeter(cb: (v: number) => void) {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: { autoGainControl: false },
  });
  const ctx = new AudioContext();
  await ctx.resume(); // call micMeter from a click
  const analyzer = ctx.createAnalyser();
  ctx.createMediaStreamSource(stream).connect(analyzer);
  const buf = new Float32Array(analyzer.fftSize);
  let raf = 0;
  const tick = () => {
    analyzer.getFloatTimeDomainData(buf);
    const rms = Math.hypot(...buf) / Math.sqrt(buf.length);
    const db = 20 * Math.log10(rms || 1e-8);
    cb(Math.min(1, Math.max(0, (db + 60) / 60))); // -60..0
    raf = requestAnimationFrame(tick);
  };
  tick();
  return () => {
    cancelAnimationFrame(raf);
    for (const t of stream.getTracks()) t.stop();
    void ctx.close();
  };
}