Add possibility to choose which Camera use for AR for multi-camera devices about ar.js HOT 14 OPEN

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.

from ar.js.

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.

from ar.js.

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

from ar.js.

any news? i would like to test

from ar.js.

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

from ar.js.

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?

from ar.js.

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

from ar.js.

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

from ar.js.

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.

from ar.js.

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.

from ar.js.

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

from ar.js.

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!

from ar.js.

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

t

from ar.js.

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.

from ar.js.