ios-demo.html

<video id="player" autoplay muted playsinline> </video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<div id="message"></div>
<script>
  const player = document.getElementById('player');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const messageDiv = document.getElementById('message');
  const captureButton = document.getElementById('capture');

  const constraints = {
    video: {
      facingMode: 'environment'
    }
  };

  const log = message => {
    console.log(message);
    messageDiv.innerHTML = message;
  }

  captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
  });

  const capture = function (constraints) {
    // Attach the video stream to the video element and autoplay.
    navigator.mediaDevices.getUserMedia(constraints)
      .then((stream) => {
        player.srcObject = stream;
      });
  }

  if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    capture({})
    log("enumerateDevices() not supported. not using any constraints.");
  }
  else {
    navigator.mediaDevices.enumerateDevices().then(function (devices) {
      var m = devices.map(function (device) {
        console.log(device)
        return device.kind + ": " + device.label + " id = " + device.deviceId
      }).join('<br>')
      log(m);
      capture(constraints)
    }).catch(function (err) {
      log(err.name + ": " + err.message);
      capture({})
    });
  }
</script>