HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>getUserMedia — constraints</title>
</head>
<body>
  <video id="preview" width="320" height="180" autoplay muted playsinline></video>
  <pre id="out">Working…</pre>
  <script>
    async function startHdPreview() {
      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        return "API missing";
      }
      var stream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: { width: 1280, height: 720 }
      });
      document.getElementById("preview").srcObject = stream;
      var track = stream.getVideoTracks()[0];
      var settings = track ? track.getSettings() : {};
      return JSON.stringify({
        width: settings.width || null,
        height: settings.height || null,
        tracks: stream.getTracks().length
      });
    }
    startHdPreview()
      .then(function (msg) {
        document.getElementById("out").textContent = msg;
      })
      .catch(function (err) {
        document.getElementById("out").textContent = "Error: " + err.name;
      });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

getUserMedia — constraints (Try It)