Add possibility to choose which Camera use for AR for multi-camera devices

[nicolocarpignoli]

There were several issues opened on AR.js old repository, about problems on Chrome auto-detection of camera to user for web ar. No issues on Firefox that let you choose the camera, as a prompt. I think also Safari give problems.

See:

https://github.com/jeromeetienne/AR.js/pull/661 https://github.com/jeromeetienne/AR.js/issues/369 https://github.com/jeromeetienne/AR.js/issues/619 https://github.com/jeromeetienne/AR.js/issues/581 https://github.com/jeromeetienne/AR.js/issues/558 https://github.com/jeromeetienne/AR.js/issues/86 https://github.com/jeromeetienne/AR.js/issues/631

[Zaniyar]

What is the situation here? (beside closed) Is there a branch to test, which allows to select a different camera? (with three.js)

[jamess922]

any news? i would like to test

[jamess922]

Here is someting I find. maybe will help it's a Html5 select camera demo

[Jaco-Jonker]

Hi Everyone, Just checking to see what the best solution is to select a different camera on Android mobile devices? This is a program breaking bug and I cannot find a solution to this. The default camera chrome devices chooses is a telephoto lens that is very "zoomed in" and shaky. I also do not have the option of using a firefox browser, as the new Huawei's coming out currently do not support firefox browser?Please can someone point me to a possible solution? The HTML5 select camera demo is a bit complicated to incorporate due to my coding skills?

[eCronik]

Hi, also chiming in to relight this issue. I'm googling and fiddling since hours, but didn't succeed to have it fixed. Is there still any workaround available on v3.3.1?

Thanks, eC

[nicolocarpignoli]

Nope, but @fcor is working on this. Hopefully we are progressing on this

[fcor]

Hi everyone, I have been working on the chance to switch between front and back camera on the fly during an AR session.

Here's the repo: https://github.com/fcor/arjs-switch-cam

And here's the live version: https://fcor.github.io/arjs-switch-cam/

It would be great if you can give it a try and let me know how does it work and any comment/suggestion you may have 😃

It's widely tested on Android and seems to be fine on Chrome, Firefox (could be slower sometimes), and Edge. On iPhone it has been tested on some devices but seems that it's not 100% perfect.

[rondagdag]

Hi everyone, I have been working on the chance to switch between front and back camera on the fly during an AR session.

Here's the repo: https://github.com/fcor/arjs-switch-cam

And here's the live version: https://fcor.github.io/arjs-switch-cam/

It would be great if you can give it a try and let me know how does it work and any comment/suggestion you may have 😃

It's widely tested on Android and seems to be fine on Chrome, Firefox (could be slower sometimes), and Edge. On iPhone it has been tested on some devices but seems that it's not 100% perfect.

It does not work anymore on Android Chrome v 86.0.4240 and iOS Chrome v 86.0.4240 Edge 45.09.4, tried it on my Samsung S10 device.

[dmitrymurashenkov]

Although live version by @fcor didn't work for me for some reason - after I've copied his code into my app it worked without any problems!

Upvoting this feature - it is quite convenient in complex cases.

[tinchoforever]

Hello everyone, We've been facing with this issue for the last couple of weeks. Today we will test @fcor solution and see if this works. Acording to other solutions using deviceId instead of facingMode

[Zian00]

Hi, is there any updates here?

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 ?

Thanks in advance.

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.

[1248499257]

Hi, is there any updates here?

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 ?

Thanks in advance.

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.

This solves my problem, Thanks!

[jamess922]

Hi follow all your steps but can't gei cameras lis t

[Zian00]

Hi follow all your steps but can't gei cameras lis t

Hi,

The reason it is not showing could be because :

1. only one camera is working right now (the default one), which is the one has been selected.
2. Something is wrong with your code.

I suggest you to try out the code in this article to see if your other cameras are working fine.

[leleshuo]

Three years have passed and the problem has not been solved