JavaScript Navigator getUserMedia() Method

const lines = [
  "navigator.getUserMedia: " +
    (typeof navigator.getUserMedia === "function" ? "available" : "missing"),
  "mediaDevices.getUserMedia: " +
    (navigator.mediaDevices &&
    typeof navigator.mediaDevices.getUserMedia === "function"
      ? "available"
      : "missing"),
  "isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));

// DEPRECATED — shown for reading legacy code only
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    (stream) => {
      const video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = () => video.play();
      console.log("legacy success: tracks=" + stream.getTracks().length);
    },
    (err) => {
      console.error("legacy error: " + err.name);
    }
  );
} else {
  console.log("legacy getUserMedia not supported");
}

async function startCamera() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    return "mediaDevices.getUserMedia not supported";
  }
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true
    });
    const video = document.querySelector("video");
    video.srcObject = stream;
    await video.play();
    return "modern success: tracks=" + stream.getTracks().length;
  } catch (err) {
    return "Error: " + err.name;
  }
}

startCamera().then(console.log);

async function startHdPreview() {
  if (!navigator.mediaDevices?.getUserMedia) {
    return "API missing";
  }
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: { width: 1280, height: 720 }
  });
  const settings = stream.getVideoTracks()[0]?.getSettings() || {};
  return JSON.stringify({
    width: settings.width || null,
    height: settings.height || null,
    tracks: stream.getTracks().length
  });
}

startHdPreview().then(console.log).catch((err) => {
  console.log("Error: " + err.name);
});

async function getUserMediaSafe(constraints) {
  if (!window.isSecureContext) {
    return { ok: false, stream: null, reason: "insecure-context" };
  }
  if (navigator.mediaDevices?.getUserMedia) {
    try {
      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      return { ok: true, stream: stream, reason: "mediaDevices" };
    } catch (err) {
      return { ok: false, stream: null, reason: err.name };
    }
  }
  // Legacy fallback only for very old environments — prefer migrating callers
  if (typeof navigator.getUserMedia !== "function") {
    return { ok: false, stream: null, reason: "unsupported" };
  }
  return new Promise((resolve) => {
    navigator.getUserMedia(
      constraints,
      (stream) => resolve({ ok: true, stream: stream, reason: "legacy" }),
      (err) => resolve({ ok: false, stream: null, reason: err.name })
    );
  });
}

function stopStream(stream) {
  if (!stream) return;
  stream.getTracks().forEach((track) => track.stop());
}

getUserMediaSafe({ video: true, audio: false }).then((result) => {
  console.log(JSON.stringify({
    ok: result.ok,
    reason: result.reason,
    tracks: result.stream ? result.stream.getTracks().length : 0
  }));
  stopStream(result.stream);
});