Camera loading on full zoom

[curtisboylan]

Do you want to request a feature or report a bug? Bug

What is the current behavior? If I load the webpage on Android 7.0 on Huawei P8 Lite it zooms very far in meaning I cannot use the application correctly.

If the current behavior is a bug, please provide the steps to reproduce. Just loading the page on the phone does it it, you don't need to do anything special. The camera will load with a full zoom.

What is the expected behavior? I would expect that it does not zoom and works properly like on every other phone/device but unfortunately on this phone with Android 7.0 the camera is zooming in fully.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name android version 7.0 huawei p8 lite

[gabrielgrant]

@curtisboylan is it the real-world camera that is zoomed in, the 3D scene, or both? is this specific to AR.js, or does the same thing happen when viewing other web pages that use the camera on this device? It would be helpful if you could include screenshots to help diagnose

Thanks!

[manishbansal8843]

I am also facing this issue. Till date, i was building my application on glitch. But today i thought of opening that glitch live url on the phone. And to my surprise, the camera gets opened in full zoom mode. I am also using Android 7.0 device. Earlier i was testing the application in windows 8.1.

Edit 1: @gabrielgrant You can check by opening below url in both windows as well as android 7.0. It requires a hiro marker to project a cone over it.

https://lackadaisical-college.glitch.me

edit 2: I tried removing the embedded component from a-scene and after that camera loaded perfectly. However, the projected image is getting displayed away from marker. And that too in some small window.

[manishbansal8843]

phewww!! Issue is resolved. Just replace below line in index.html

<meta name="viewport" content="width=device-width, initial-scale=1">

with this.

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

[curtisboylan]

@gabrielgrant This zooming issue I am having is real life with the camera.

[gabrielgrant]

Interesting, thanks for the workaround @manishbansal8843

does that work for you, @curtisboylan ?

[curtisboylan]

@manishbansal8843 @gabrielgrant This is working for me but unfortunately is very very zoomed out. It looks like a desktop version is running on the android and also the "content" displays far away from the actual poster. Any fix for this?

[gabrielgrant]

Yes, it sounds like the original issue you reported is caused by the mobile browser trying to adjust the zoom/scale of pages to look better than just showing the entire desktop content. The workaround forces the browser to display the content without any zooming (ie showing the full content). If you want the content partially zoomed, I imagine you may able to set the initial-scale, minimum-scale, and/or maximum-scale to something greater than 1, although it sounds like you may just want to explicitly add responsive CSS rules that adjust the styling to better suit the user's screen size.

[curtisboylan]

@gabrielgrant Is there any other solution? It is only on this certain android version. If I changed CSS etc it will effect all versions and all phones??

[gabrielgrant]

Which specific versions of android (and chrome?) have you tested with that it does and does not apply to?

Without being able to see this issue reproduced, it's hard to give more advice here. If you'd like more help, please provide a MCVE (ideally on JSFiddle or similar) and some screenshots of the problem (and, if you have access to a device that you think shows the correct behavior, some shots from that for comparison)

[curtisboylan]

I have tried Android 7.0 on two different devices. Unfortunately I don't have a screenshot of the one with the main issues as phone is out of the office right now but I will attach the screenshots of the other phone which is working perfect apart from the header is displaying off screen. Everything else works on this one. (xperia l1 android 7.0)

The one we are having issues with is android version 7.0 on a huawei p8 lite. To give you a perspective of what is happening without being able to show you basically our header image loads in the top left corner absolutely tiny, the camera seems to have an ok zoom but when I point it at any of our markers the AR content displays away from the marker to the side of it and sometimes off view. It is like it is zooming everything very weirdly no idea why. Before inserting @manishbansal8843 fix it was zoomed all the way in and couldn't be used at all.

I have pasted the code I am using here https://pastebin.com/zTkthxC9 so maybe you can get a better idea. I am not sure how many devices this is happening on as I only have access to two mobiles right here but if you have an Android you can try it too at https://curtisboylan.com/SAP/playground/aframe/examples/all.html

Screenshot of the semi broken but still working Android attached and fully working iOS attached

Cheers.

[curtisboylan]

@gabrielgrant I just got hold of that phone again and tried using @manishbansal8843 site. I will attach a screenshot of the issue. The same thing is happening on mine. The little "VR Goggle" is tiny and the marker projection is going off screen. Any ideas?

[manishbansal8843]

@curtisboylan For the issue in which AR content is being displayed away from marker, do you have any other HTML element inside body but outside a-scene element ?

<body>
<div>Some content</div><!--This will move your AR-Image away from your marker.-->
<a-scene>
<!--Aframe code-->
</a-scene>
</body>

I also faced this issue. And i found out that one of the reason for this is having other HTML elements within your body tag.

[curtisboylan]

@manishbansal8843 Yeah one thing I have in there is a header div, I will try removing it but I have removed it before and it made no difference. I do see though that yours still has the same issue on my phone here with the issues when I browse to your site, do you know this or did you fix it somewhere else?

[curtisboylan]

@gabrielgrant @manishbansal8843 any update on a solution to this? Still the same issue on this device.

[gabrielgrant]

@curtisboylan thanks for the extra details. To confirm, this only happens with AR.js? or is does this also happen with other, non-AR.js-based A-frame content?

Also, mind showing what it looks like with initial-scale, minimum-scale, and maximum-scale set to 1?

[curtisboylan]

@Gabriel yeah seems to only happen with ar.js but I haven’t noticed with any other web pages. Then screenshots are the scales set to 1, it looks ok with the scale set to 1 but the marker images appear off the marker as the screenshot shows

---

From: Gabriel Grant notifications@github.com Sent: Monday, July 2, 2018 11:58:11 PM To: jeromeetienne/AR.js Cc: Curtis Boylan; Mention Subject: Re: [jeromeetienne/AR.js] Camera loading on full zoom (#369)

@curtisboylanhttps://github.com/curtisboylan thanks for the extra details. To confirm, this only happens with AR.js? or is does this also happen with other, non-AR.js-based A-frame content?

Also, mind showing what it looks like with initial-scale, minimum-scale, and maximum-scale set to 1?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/jeromeetienne/AR.js/issues/369#issuecomment-401962173, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AT4XusZbcbKZkDB9ZbMAPKdkKtN2k0ePks5uCqWDgaJpZM4UtOqh.

[curtisboylan]

@gabrielgrant I have now tried on another browser on that Android phone and it works and is zoomed correctly but does not display markers at all?

[fariskas]

had the same issue on Android Samsung S7 on Chrome. but @manishbansal8843 solution worked for me.

[curtisboylan]

@fariskas could you show your whole code if possible?

[fariskas]

mine is just the basic demo setup for ar.js. You can view the source here: https://fariskassim.com/stage/rebel9/arjs/v1/index.html

[Vision-X]

I can confirm that @manishbansal8843 's meta tag solution works for the zooming issue.

As for the AR assets not appearing with the level of precision you'd want, I am experiencing that bug as well on my Samsung Note 8 running Android@8.0.0 and Chrome@68.0.3440.91

[poshaughnessy]

(Edited as some of the previous info I shared was confusing the issue, sorry).

I'm experiencing the same issue with our code lab, in Chrome 70 and Samsung Internet v8.x (based on Chromium 63), but not Samsung Internet v7.x (based on Chromium 59).

One thing that's apparent from the broken version is that the canvas is massive. In Samsung Internet v7.2 on a Pixel 2 phone, the canvas is 1945 x 1459 and the video element is 417 x 556. But in Chrome on the same device, the canvas is 8455 x 6342 and the video element is 1812 x 2416.

So perhaps it appears zoomed in, because the canvas is massive and you can only see a small portion of it? An initial theory: the viewport meta tag solution above may be simply masking the fact that the canvas is massive, because it scales it down to fit the viewport? It does prevent it from appearing zoomed in, but then I have the same problem as @curtisboylan - the object I place on the marker is not appearing in the right place. (Whereas it is in Samsung Internet v7.0, it's placed correctly).

I'll need to keep digging into this because we need to get our code lab working, but any further pointers in the meantime would be very welcome. Thanks!

[poshaughnessy]

I do not see the same issue with the 'A-Frame basic' example here though.

Here's how it looks in Samsung Internet v7:

And here's how it looks in Chrome 70:

(The debug elements are not visible in the former and the overlay elements are cut off on the left, but) there is no difference in zoom.

So now I'll compare this example with our code lab and figure out why ours isn't working...

[poshaughnessy]

So the difference between the two was that the A-Frame basic example does not have a viewport meta tag at all. I removed ours too and it solved the zoom issue in Chrome.

Unfortunately this does not solve the problem in Samsung Internet v8 on the Note 9, though. The A-Frame basic example has the same issue here:

But I realised that if I switch off the 'Manual Zoom' here in the settings menu...

...then, it's a bit pixellated, but the whole camera view is visible:

(NB. Possibly related to the fact it's pixellated on the Note 9 - I'm seeing errors in the console that say "Failed to recalculate device parameters" (Dpdb.recalculateDeviceParams) from the WebVR polyfill via A-Frame, although not sure if that's used for resolution settings by AR.js or if it's just for the VR resolution?)

[tommensink]

Any progress on this?

It was working fine with my Android A5, but (I think) after the latest OS update of 1 january 2019 this issue appeared. (Also with the basic "try on mobile" example of jerommeetienne). My results so far:

• @poshaughnessy : Disabling manual zoom in the Internet settings solves the issue for me too. Of course we cannot ask our users to do this.
• @manishbansal8843 : Adding your meta tag line solution (I did not have one) does correct the zoom behaviour, but AR content is being displayed away from marker. Any div text became very small.
• @manishbansal8843 : Removing other content in the tag does not solve this content displayment for me
• It does work correct on Chrome by the way, it goes wrong on Samsung Internet. Any further ideas?

[pierrevedel]

hello, I am experiencing this full zoom issue too but only with iOS/safari machines but works fine with android/ chrome/ samsung b(r)owser. no A-frame, only AR.js and three.js in my code

[kageori]

I have the same problem on this. Any progress on it...? (use Android 9.0, AR.js & three.js)

I think #299 is also really resemble, but I write as follows and it still does not work. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

[nachoaguirre]

I have the same problem with a huawei p30.

I discovered that the camera with the excess of zoom, is only one of the cameras that has the device. on this site https://simpl.info/getusermedia/sources/ you can change the source of the camera, and indeed there is one that has a lot of zoom, but the others do not.

I ask, how could I change the origin of the camera in a-frame?

[nicolocarpignoli]

I found out that the error of showing debug messages only for an half, is a matter of CSS style. I will make a simple PR to fix that for both desktop and mobile. Already tested it.

[SiaAf]

Hey All, I have made an AR page by angular. It opens the camera and show a model inside of it(similar to https://www.joshmorony.com/augmented-reality-in-an-ionic-angular-pwa/) and I want to show this page inside of mobile applications(The mobile applications developed by ionic). By saying this, I mean we have a button, if we click on it, it opens Safari(Chrome in android) outside of the application with the url of the AR page. This solution works for android devices but for iOS I have a zoom issue. When safari gets open the camera starts zooming till the page crashes. Is there any solution for this problem? I used A-frame , a-assets, and a-asset-item to load obj-mtl model The photos bellow explain the zoom issue:

[meronivalerio]

Hello, any news about it? I have a Huawei p30pro smartphone and the problem persists.

[SiaAf]

Hey , this snippet works for me. hope it helps :) (I use it when I have marker )

<a-scene vr-mode-ui='enabled: false' arjs='trackingMethod: best; patternRatio: 0.75; 
     debugUIEnabled: false;' renderer='logarithmicDepthBuffer: true;'>`
    <a-assets timeout='900000'> 
         <a-asset-item id='obj' src="xxxx"></a-asset-item> 
         <a-asset-item id='mtl' src="xxxx"></a-asset-item>
    </a-assets>         
    <a-marker smooth='true' preset='custom' type='pattern' url='xxxx'> 
        <a-obj-model src='#obj' mtl='#mtl' rotation='-90 0 0' position='0 0 0' scale='0.0004 0.0004 0.0004'></a-obj-model> 
    </a-marker> 
    <a-entity id='rig' movement-controls='speed: 0.1'><a-entity camera></a-entity></entity>
</a-scene>

// I use this when I do not have marker

<a-scene vr-mode-ui='enabled: false' arjs='trackingMethod: best; debugUIEnabled: false;' renderer='logarithmicDepthBuffer: true;'>
    <a-assets timeout='900000'>
        <a-asset-item id='obj' src="xxxx"></a-asset-item>
        <a-asset-item id='mtl' src="xxxx"></a-asset-item>
    </a-assets>
    <a-obj-model src='#obj' mtl='#mtl' rotation='-90 0 0' position='0 0 -5' scale='0.0002 0.0002 
             0.0002'></a-obj-model>
    <a-entity id='rig' movement-controls='speed: 0.1'>
        <a-camera look-controls id='camera' position='0 1.6 0'></a-camera>
    </a-entity>
</a-scene>

[meronivalerio]

Hi @SiaAf unfortunately your method doesn't work for me

[hollytheghost]

Experiencing zoom issue with the examples. However, when decreasing system font size of Android device (Samsung Galaxy M20, Android Pie) the zoom level in the examples reduces too 🙃

[Darrel-Collinsworth]

I'm currently building an ar.js card game and I'm experiencing a similar issue. I'm currently using svelte to make the build dynamic. However, I was able to get the frame to fit the screen using !important on my css targeting the body and the video respectively. Indeed the video feed is WAY larger than the body, so i needed to move the video left with another !important. A third issue I noticed was using my phone (LG V30+) the opposite is happening and it's showing the feed from my wide angle lens which is distorting the marker and causing it to not show up. I got curious so I opened firefox which does ask which camera you'd like to use; and I was able to select the regular focal length camera and my AR.JS project worked. Like everyone else, it looks like my overall ar.js project is super zoomed or scaled in a weird way because the VR icon in the bottom right corner is super small. Has there been any progress on this? Or is there a repo somewhere that shows how to manually switch cameras in chrome?

I can def post an example of my problem if it'll help.

[rcolepeterson]

Any word on this? I too have the zoomed camera issue.

[ybinstock]

I'm having the same issue.

[Zaniyar]

As @nachoaguirre already mentioned: the problem occurs while AR.js is selecting the wrong camera! New phones have multiple back-cameras, AR.js takes per default the first envirenment/back-camera, which fullfills the defined constraints.

The solution for this problem would be: Let the user switch between cameras!

Somewhere here in AR.js:

// get available devices
    navigator.mediaDevices.enumerateDevices().then(function(devices) {
                var userMediaConstraints = {
            audio: false,
            video: {
                facingMode: 'environment',
                width: {
                    ideal: _this.parameters.sourceWidth,
                    // min: 1024,
                    // max: 1920
                },
                height: {
                    ideal: _this.parameters.sourceHeight,
                    // min: 776,
                    // max: 1080
                }
            }
        }

        if (null !== _this.parameters.deviceId) {
            userMediaConstraints.video.deviceId = {
                exact: _this.parameters.deviceId
            };
        }
        // get a device which satisfy the constraints
        navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
            // set the .src of the domElement
            domElement.srcObject = stream;
            var event = new CustomEvent('camera-init', {stream: stream});
            window.dispatchEvent(event);
            // to start the video, when it is possible to start it only on userevent. like in android
            document.body.addEventListener('click', function(){
                domElement.play();
            });
            // domElement.play();
                         // TODO listen to loadedmetadata instead
            // wait until the video stream is ready
            var interval = setInterval(function() {
                if (!domElement.videoWidth) return;
                onReady()
                clearInterval(interval)
            }, 1000/50);
        }).catch(function(error) {
            onError({
                name: error.name,
                message: error.message
            });
        });
    }).catch(function(error) {
        onError({
            message: error.message
        });
    });

How could we let the User toggle between available devices? Maybe when you initialize your camera?

        // init controls for camera
        var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
            type: 'pattern',
            patternUrl: THREEx.ArToolkitContext.baseURL + 'js/lib/data/patt.hiro',
            // patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
            // as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
            changeMatrixMode: 'cameraTransformMatrix',
            deviceId: 2 // we need to let the user switch between available cameras here...
        })

[nicolocarpignoli]

Guys which phone do you have? It's confirmed that this is caused by phones with multiple cameras?

[Zaniyar]

@nicolocarpignoli Mine is Huawei P20 pro - I can definitely confirm that the camera which got selected by AR.js is the wrong camera; it is the first one in the list of "facing back" cameras - On Huawei P20 pro there are 4 different facing back cameras and the first one is that one which is extremely zoomed in - same zoom level like in a simple AR.js demo.

[nicolocarpignoli]

I may include this feature in next version. We can do this way: show a dialog to select the camera only if more than 2 cameras are available. Otherwise act like now selecting rear camera

[nicolocarpignoli]

I can't test it, can anyone help me next days with a test for this new feature?

[Zaniyar]

@nicolocarpignoli please don't show a dialog, since this is disruptive for the user experience. Select the default camera, like now, and give the devs the possibility to handle this for their users. for example a small switcher in the corner (on click switch to next available camera; even front cam could be in the list, for augmented face masks in the future? :p ) thx *I would like to test it.

[Darrel-Collinsworth]

Guys which phone do you have? It's confirmed that this is caused by phones with multiple cameras?

Yeah that's the main reason I'm having the issue. when I use a browser that lets me pick the camera, i choose the camera that is NOT my wide angle lens and the application works as intended.

[nicolocarpignoli]

I may have done some progress to this. Can anyone please test? See there: https://github.com/jeromeetienne/AR.js/pull/661#issuecomment-559787020

[kvabakoma]

Sharing an ugly fix for the multiple camera phones issue:

In aframe-ar.js (2.0.8) right after declaring var userMediaConstraints I check for an available camera with label "camera2 0, facing back". If such a camera is available, I set it in the userMediaConstraints. I have just tested it with 19 different Android phones and it works (including Huawei P30 Pro and Mate 20 Pro). Here's the full code:

`var userMediaConstraints = { audio: false, video: { facingMode: 'environment', width: { ideal: _this.parameters.sourceWidth, // min: 1024, // max: 1920 }, height: { ideal: _this.parameters.sourceHeight, // min: 776, // max: 1080 } } }

// CUSTOM CODE START var backCam2 = devices.filter(d=>{ return d.label && d.label == "camera2 0, facing back"; }) if (backCam2.length) { userMediaConstraints.video.deviceId = backCam2[0].deviceId } // CUSTOM CODE END`

It's surely not bulletproof but so far I can't break it. It even fixed a Honor 8 problem where ARjs was using the front camera.

Hope it helps :)

[nicolocarpignoli]

@kvabakoma

Check my PR on pull requests it may help. I did the same thing of yours 

[kvabakoma]

@tommensink - we found a workaround for the SamsungBrowser zooming && 3d offset. If you place the ARjs in an iframe and both the parent and the iframe content files have <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> it seems to work properly. The canvas is no longer huge (we experienced 6000+ px width on protrait). The augmented 3D content seems to be aligned properly.

[innovacioneleven]

in Samsung Internet Browser at Disabling the “control zoom in web pages” option removes the zoom scale as the displacement of the content to be displayed.

[odiazjs]

Sharing an ugly fix for the multiple camera phones issue:

In aframe-ar.js (2.0.8) right after declaring var userMediaConstraints I check for an available camera with label "camera2 0, facing back". If such a camera is available, I set it in the userMediaConstraints. I have just tested it with 19 different Android phones and it works (including Huawei P30 Pro and Mate 20 Pro). Here's the full code:

`var userMediaConstraints = { audio: false, video: { facingMode: 'environment', width: { ideal: _this.parameters.sourceWidth, // min: 1024, // max: 1920 }, height: { ideal: _this.parameters.sourceHeight, // min: 776, // max: 1080 } } }

// CUSTOM CODE START var backCam2 = devices.filter(d=>{ return d.label && d.label == "camera2 0, facing back"; }) if (backCam2.length) { userMediaConstraints.video.deviceId = backCam2[0].deviceId } // CUSTOM CODE END`

It's surely not bulletproof but so far I can't break it. It even fixed a Honor 8 problem where ARjs was using the front camera.

Hope it helps :)

lifesaver dude