Setting which camera webcam displays

Elements Audio & Video
1

Thanks to the helpful posts of users on these forums I have managed to get a FaceTime looking mobile app (It obviously doesn't call though) to work in a iOS Hype project. One thing I am having an issue with is choosing the rear camera - despite changing the facingMode attribute to 'environment' instead of 'user'.

No matter which of the of the alternative facingModes seems to choose the other camera - this is the case for Desktop and Mobile.
Any guidance would be appreciated.

The code I am using is below -

var video = document.querySelector('.hype_mp4video');
 
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
video.style.width = '854px';
 video.style.height = '480px';
var constraints = {
     audio: false,
     video: {
     //  facingMode: 'user'
       facingMode: 'environment'  
     //  facingMode: 'left'  
     //  facingMode: 'right'  
     }
}

navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
    video.srcObject = stream;
});
2

I found a solution (in progress) -
Thanks to - GitHub - philnash/mediadevices-camera-selection: 🎥 Examples on how to switch devices with the mediaDevices API
This allows a dropdown of available cameras which works but could look a lot neater - ideally it will cycle selections with a button press and not be a dropdown menu.

const video = document.getElementById('cam');
const button = document.getElementById('button');
const select = document.getElementById('select');
let currentStream;

function stopMediaTracks(stream) {
   stream.getTracks().forEach(track => {
     track.stop();
       });
     }

      function gotDevices(mediaDevices) {
        select.innerHTML = '';
       select.appendChild(document.createElement('option'));
        let count = 1;
        mediaDevices.forEach(mediaDevice => {
if (mediaDevice.kind === 'videoinput') {
  const option = document.createElement('option');
  option.value = mediaDevice.deviceId;
  const label = mediaDevice.label || `Camera ${count++}`;
  const textNode = document.createTextNode(label);
  option.appendChild(textNode);
  select.appendChild(option);
}
       });
     }

      button.addEventListener('click', event => {
       if (typeof currentStream !== 'undefined') {
         stopMediaTracks(currentStream);
       }
       const videoConstraints = {};
       if (select.value === '') {
         videoConstraints.facingMode = 'environment';
       } else {
         videoConstraints.deviceId = { exact: select.value };
       }
       const constraints = {
         video: videoConstraints,
         audio: false
       };
       navigator.mediaDevices
         .getUserMedia(constraints)
         .then(stream => {
           currentStream = stream;
           video.srcObject = stream;
           return navigator.mediaDevices.enumerateDevices();
         })
         .then(gotDevices)
         .catch(error => {
           console.error(error);
         });
     });

      navigator.mediaDevices.enumerateDevices().then(gotDevices);

And this added to the scene -

  <div class="controls">
  <button id="button">Get camera</button>
  <select id="select">
  <option></option>
  </select>
  </div>
  <video id="cam" autoplay playsinline></video>
2 Likes