Allow selection of back cameras from mobile phones

[Zian00]

Hi everyone,

For newer phones with multiple back cameras, AR.js would choose the default one, which in some phones it might be a zoomed camera, is there a way to detect the default zoom scale camera or ask user to choose the camera they want to display ?

I have read from https://github.com/jeromeetienne/AR.js/pull/653:
nicolocarpignoli mentions added a property to a-scene: selectCamera. When 'true' it shows a basic UI to let the user select the camera to use.

However, it seems like it's not working anymore? Or please clarify me if I'm wrong.

Using the AR.js from master branch or official documentation, I have tested and Huawei p20's camera is zoomed in a lot, others are fine.

Also, from https://github.com/jeromeetienne/AR.js/issues/369#issuecomment-562493560:
this method works for Huawei p20, but it doesnt work for Samsung Galaxy S20+

Thanks in advance.

[Zian00]

Update:
I managed to create the camera-selection feature by refering to this github and this article.

Basically, adding an extra file, the app.js from the github link and link it in your html file, and change the
const video = document.getElementById('video'); to
const video = document.getElementById('arjs-video');

Add the following code in html file:

    <div class="controls">
      <button id="button">Get camera</button>
      <select id="select">
        <option></option>
      </select>

The rest should be working fine. However, in my case, i need to change:

navigator.mediaDevices    
  .getUserMedia(constraints)    
  .then(stream =>{      
    currentStream = stream;     
    video.srcObject = stream;      
    return navigator.mediaDevices.enumerateDevices();    
  })    
  .then(gotDevices)   
  .catch(error => {      
  console.error(error);    
  });
});

to

navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      currentStream = stream;

      document.getElementById('arjs-video').srcObject = stream;
      var event = new CustomEvent("camera-init", { stream: stream });
      window.dispatchEvent(event);

      document.body.addEventListener("click", function () {
          document.getElementById('arjs-video').play();
        });
      return navigator.mediaDevices.enumerateDevices();
    })
    .then(gotDevices)
    .catch((error) => {
      console.error(error);
    });

Hope this help those people who are looking for changing back cameras in mobile phones.