Ar.js: Cannot select camera source? Wrong default camera in Wechat

Created on 7 Sep 2017 · 7Comments · Source: jeromeetienne/AR.js

Wechat is the most popular IM&Social App in China, and also it is the most popular browser in China. Basically, in China, developers have to opt their webapp/website for Wechat browser.

In current version, most of Android devices support WebRTC/getUserMedia in Wechat. But the defalut camera in Wechat is the front camera. This AR.js only capture the front camera and there is no option to change it.

I think we should give options to select video source in the code, not just use the default one.

Source

lslzl3000

Most helpful comment

I was about the post the same issue, working on wechat too, my suggestion was to

Not ask which user camera to use, as we suppose that AR is usually using back camera for obvious UX reasons (hard to place a marker on the front camera)
If we asked the question, we will need a mechanism to keep the answer, to not get triggered everytime the experience get loaded, thus recording it using a cookie or something, which is a bit heavy UX-wise I feel, especially knowing that we will either need to use an uncustomized native prompt() or a customized popup system, in both cases, its adding some UI on the system, which is not optimal.
Another solution would be to expose which webcam to select inside the parameters of ArToolkitSource something like :

this.parameters = {
        // type of source - ['webcam', 'image', 'video']
               sourceType : 'webcam',
               // ['back', 'front']
               webcamDirection : 'back' ,
        ...
    }

So I choose not to ask, working fine in my case, so what I do is :

detect if there are several video devices
if so, detect if one has the "back" word in its label, if yes take that one as deviceId
else, do not precise the deviceId inside userMediaConstraints to fallback on the default one

Line 182 in three.js/src/threex/threex-artoolkitsource.js

navigator.mediaDevices.enumerateDevices().then(function(devices) {

  var backVideoInputId = false
  for (var i = devices.length - 1; i >= 0; i--) {
    if(
         devices[i].kind === 'videoinput' &&
         devices[i].label.indexOf("back") !== -1
    ) { 
      backVideoInputId = devices[i].deviceId;
    }
  }

  var userMediaConstraints = {
    audio: false,
    video: {
        facingMode: 'environment',
        deviceId: backVideoInputId,
        width: {
            ....
        }
    }

Let me know what you guys think, gonna post a pull request if sounds good, here is the patch otherwise
0001-automatic-back-camera-selection.zip

dotgreg on 8 Sep 2017

👍4

All 7 comments

I was about the post the same issue, working on wechat too, my suggestion was to

Not ask which user camera to use, as we suppose that AR is usually using back camera for obvious UX reasons (hard to place a marker on the front camera)
If we asked the question, we will need a mechanism to keep the answer, to not get triggered everytime the experience get loaded, thus recording it using a cookie or something, which is a bit heavy UX-wise I feel, especially knowing that we will either need to use an uncustomized native prompt() or a customized popup system, in both cases, its adding some UI on the system, which is not optimal.
Another solution would be to expose which webcam to select inside the parameters of ArToolkitSource something like :

this.parameters = {
        // type of source - ['webcam', 'image', 'video']
               sourceType : 'webcam',
               // ['back', 'front']
               webcamDirection : 'back' ,
        ...
    }

So I choose not to ask, working fine in my case, so what I do is :

detect if there are several video devices
if so, detect if one has the "back" word in its label, if yes take that one as deviceId
else, do not precise the deviceId inside userMediaConstraints to fallback on the default one

Line 182 in three.js/src/threex/threex-artoolkitsource.js

navigator.mediaDevices.enumerateDevices().then(function(devices) {

  var backVideoInputId = false
  for (var i = devices.length - 1; i >= 0; i--) {
    if(
         devices[i].kind === 'videoinput' &&
         devices[i].label.indexOf("back") !== -1
    ) { 
      backVideoInputId = devices[i].deviceId;
    }
  }

  var userMediaConstraints = {
    audio: false,
    video: {
        facingMode: 'environment',
        deviceId: backVideoInputId,
        width: {
            ....
        }
    }

Let me know what you guys think, gonna post a pull request if sounds good, here is the patch otherwise
0001-automatic-back-camera-selection.zip

dotgreg on 8 Sep 2017

👍4

Good to know there are people working on Wechat as well

lslzl3000 on 9 Sep 2017

@lslzl3000 问下你在微信浏览器下可以正常调用后面的摄像头了吗

webgameone on 10 Sep 2017

Hello, can somebody help me? I want my wechat on desktop to be able to show manycam video to a caller during video call...this works with skype for desktop but call disconnects anytime I use wechat video call to do same. Message me if you have solution.

Thank

drim2 on 27 Jun 2018

maybe have https://github.com/jeromeetienne/AR.js/pull/346 merged can help here :)

nicolocarpignoli on 21 Sep 2018

Hi, I did some research on camera accessibility within the Wechat browser. I can confirm that at the moment it's impossible.

Funnily enough, this wasn't the case previously (when this issue was created). I have a feeling that the Wechat browser is based on Chromium. Since 2018, Chromium only allows getUserMedia on HTTPS connections. And here's the catch: Wechat only allows getUserMedia on HTTP connections, resulting in a deadlock.

Until Wechat changes it's policy, this issue can be locked.