Plane is misplaced when reading marker on iOS.

lanecwheeler commented 4 years ago

When using iOS, ar.js finds my marker and shows a plane where I've added a video. The issue is even though the plane is positioned at (0, 0, 0), it appears about a foot underneath where the marker should be. Also, the video is not either loading or playing. Last, I want to mention that I am having no issues on Android.

Expected behavior The plane should be centered on top of the marker and a video should play.

Screenshots (I echoed out the console to my screen so I could see it on mobile, please ignore) Running iOS 13 on iPhone 7. The issue is present on any iDevice I've tried.

Smartphone (please complete the following information):

Device: iPhone[7,X]
OS: iOS 13.*
Browser: Safari

Additional context Once again, I'm having no issues with Android however, I am too sensible of my own defects to not find it probable that I am the issue. The code I'm using is below.

The scene:

<a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 60;' arjs="patternRatio: 0.90; debugUIEnabled: false;" vr-mode-ui="enabled: false" inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js">
    <a-assets>
        <video preload="auto" id="vid" poster="/pattern-lf_Holiday_Card_2019-V2-3-Front (3).png" response-type="arraybuffer" loop="true" crossorigin webkit-playsinline playsinline controls>
            <source src="/Wine.mp4">
            <img src="/pattern-lf_Holiday_Card_2019-V2-3-Front (3).png"> Your browser does not support Or Else Please Click Reset Button.
        </video>
    </a-assets>
    <a-marker id="memarker" type="pattern" url="/pattern-Screen Shot 2019-12-13 at 4.22.33 PM.patt" vidhandler>
        <a-anchor>
            <a-plane position='0 0 0' rotation="-90 0 0" material='transparent:true;src:#vid' controls></a-plane>
        </a-anchor>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>

and this script:

AFRAME.registerComponent('vidhandler', {
            init: function() {
                this.toggle = false;
                this.vid = document.querySelector("#vid");
                this.vid.pause();
            },
            tick: function() {
                if (this.el.object3D.visible == true) {
                    if (!this.toggle) {
                        this.toggle = true;
                        this.vid.play();
                    }
                } else {
                    this.toggle = false;
                    this.vid.pause();
                }
            }
        });

        function refrespage() {
            location.reload();
        }

        function playvid() {
            vid.play();
        }

astefas commented 4 years ago

I had the exact same problem yesterday and i have to confess, that it was a malformed DOM that was causing this problem. > was the problem.

nicolocarpignoli commented 4 years ago

Avoid using files with whitespaces in the name (like the .patt file). please provide the whole HTML

lanecwheeler commented 4 years ago

@astefas @nicolocarpignoli Alright, I'll give these a shot and let you know!

lanecwheeler commented 4 years ago

Updated file names, checked the DOM. Still not working great. I think I forgot to put muted on my video, which would stop the autoplay on iOS (Currently can't confirm. My test device is not with me). The video is still about a foot too low off of the marker. Here's the whole HTML.

<!doctype HTML>
<html>
<head>
    <link rel="preload" href="/vid.mp4" as="video" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>

    <style>
        #onscreenlog {
            height: 30vh;
            width: 100%;
            position: absolute;
            overflow: auto;
            white-space: nowrap;
            bottom: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.50);
            color: red;
        }
    </style>

    <script>
        AFRAME.registerComponent('vidhandler', {
            init: function() {
                this.toggle = false;
                this.vid = document.querySelector("#vid");
                this.vid.pause();
            },
            tick: function() {
                if (this.el.object3D.visible == true) {
                    if (!this.toggle) {
                        this.toggle = true;
                        this.vid.play();
                    }
                } else {
                    this.toggle = false;
                    this.vid.pause();
                }
            }
        });

        function refrespage() {
            location.reload();
        }

        function playvid() {
            vid.play();
        }
    </script>
</head>
<body style='margin : 0px; overflow: hidden;'>

    <a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 60;' arjs="patternRatio: 0.90; debugUIEnabled: false;" vr-mode-ui="enabled: false">
        <a-assets>
            <video preload="auto" src="/vid.mp4" id="vid" poster="/pic.png" response-type="arraybuffer" loop muted crossorigin playsinline controls>
                <source src="/vid.mp4"/>
                <img src="/pic.png"/> Your browser does not support Or Else Please Click Reset Button.
            </video>
        </a-assets>
        <a-marker id="memarker" type="pattern" url="/pattern.patt" vidhandler>
            <a-plane position='0 0 0' rotation="-90 0 0" material='transparent:true;src:#vid' controls></a-plane>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>

    <div id="onscreenlog"></div>
    <script>
        (function () {
            if (!console) {
                console = {};
            }
            var old = console.log;
            var logger = document.getElementById('onscreenlog');
            console.log = function (message) {
                if (typeof message == 'object') {
                    logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
                } else {
                    logger.innerHTML += message + '<br />';
                }
            }

            var old2 = console.warn;
            console.warn = function (message) {
                if (typeof message == 'object') {
                    logger.innerHTML += (JSON && JSON.stringify ? 'WARN: ' + JSON.stringify(message) : 'WARN: ' + String(message)) + '<br />';
                } else {
                    logger.innerHTML += 'WARN: ' + message + '<br />';
                }
            }
        })();
    </script>

</body>
</html>

the extra functions inside the script was for adding some controls to the interface which is scrapped. I need to remove them.

lanecwheeler commented 4 years ago

It doesn't have anything to do with a meta tag, or relational positioning, does it? @nicolocarpignoli @astefas

YorickCobb commented 4 years ago

We just ran into this, on Aframe version 0.9.2. It looks like on iOS, being in AR triggers the VR setup, which moves the camera up 1.6 units to eye level. So everything in the scene is shifted some distance down (the real-world distance will depend on the size of your marker) relative to the aframe camera, BUT the feed from your real, physical camera is still just naively mapped to your phone screen.

We couldn't find any consistent fix (you could move your whole scene up 1.6 units, but then everything is too high if you load the page on Android) but everything works fine if you move back to Aframe version 0.8.2.

We've been working on other things since and I don't remember if we tried it on 1.0.0 or 1.0.1. But somewhere, somehow, what you're seeing is the camera changing position and causing this problem.

nicolocarpignoli commented 4 years ago

try to disable vr mode button with <a-scene vr-mode-ui="enabled: false"> and update to latest aframe, 1.0.1

nicolocarpignoli commented 4 years ago

look for any 'div' causing shift of positioning of you a-scene. this may cause problem. try to set your div with absolute position

nicolocarpignoli commented 4 years ago

should be fixed now with 2.1.4. Can someone please try?

nicolocarpignoli commented 4 years ago

@kalwalt if you see this, when you have time, let me know if it's fixed for you :)

lanecwheeler commented 4 years ago

I've updated to 1.0.1 and 2.1.4 and I've had no change :/ I've manually moved the plane for now (moving the scene would probably be better though...)

nicolocarpignoli commented 4 years ago

On 2.1.4 I fixed a bug present after 2.1.0 but not present on 2.0.8

If your problem is present also with 2.0.8 then it's a different bug

YorickCobb commented 4 years ago

I'm still seeing it on AFrame 1.0.0 and ARjs 2.1.4, but I've fixed it by switching to <a-entity camera> instead of <a-camera>. That obviously won't help @lanecwheeler who's already using <a-entity camera>.

Various a-frame docs suggest either should be valid, and I wouldn't expect one to work differently than the other. Could this have to do with how the camera is labeled and positioned in the DOM?

nicolocarpignoli commented 4 years ago

Hi there, please feel free to re-open the issue at new AR.js repository: https://github.com/AR-js-org/AR.js

thank you!

jeromeetienne / AR.js

Plane is misplaced when reading marker on iOS. #676