Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

a-nft videohandler not working on mobile devices. #646

Open
zentyk opened this issue Feb 1, 2025 · 2 comments
Open

a-nft videohandler not working on mobile devices. #646

zentyk opened this issue Feb 1, 2025 · 2 comments
Labels
nft

Comments

@zentyk
Copy link

zentyk commented Feb 1, 2025

The following code is not working, is videohanlder currently working?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/aframe@1.6.0/dist/aframe-master.min.js"></script>
    <script src="./aframe-ar-nft.js"></script>
    <style>
        .arjs-loader {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .arjs-loader div {
            text-align: center;
            font-size: 1.25em;
            color: white;
        }
    </style>
    <script>
        window.onload = function() {
            AFRAME.registerComponent('videohandler', {
                init: function () {
                    var marker = this.el;

                    this.vid = document.querySelector("#vid");

                    marker.addEventListener('markerFound', function () {
                      console.log("marker found");
                        this.vid.play();
                    }.bind(this));

                    marker.addEventListener('markerLost', function() {
                        this.vid.pause();
                        this.vid.currentTime = 0;
                    }.bind(this));
                }
            });
        };
    </script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<div class="arjs-loader">
    <div>Loading, please wait...</div>
</div>
<a-scene
        vr-mode-ui="enabled: false;"
        renderer='antialias: true; alpha: true; precision: mediump;'
        embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>

    <a-assets>
        <video src="./assets/asset.mp4"
               preload="auto" id="vid" response-type="arraybuffer" loop
               crossorigin webkit-playsinline autoplay muted webkit-autoplay playsinline>
        </video>
    </a-assets>

    <a-nft
      videohandler
      type='nft' url="./assets/LumariPattern"
      smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5"
    >
        <a-video
          src="#vid"
          position='0 0 0'
          rotation='90 0 180'
          width='300'
          height='175'
        >
        </a-video>
    </a-nft>
    <a-entity camera></a-entity>
</a-scene>
</body>
</body>
</html>

This works only in desktop

a-frame-ar-nft.js is taken from the examples

<script src="https://cdn.jsdelivr.net/npm/aframe@1.6.0/dist/aframe-master.min.js"></script>
<script src="./aframe-ar-nft.js"></script>

But when trying to use ar.js in mobile devies this doesn't work:

Debuging the device i found this error:

Aborted(RangeError: WebAssembly.instantiate(): Out of memory: Cannot allocate Wasm memory for new instance). Build with -sASSERTIONS for more info.

CHROME 132.0.6834.123
DEVICE SAMSUNG GALAXY A02
@kalwalt kalwalt added the nft label Feb 1, 2025
@kalwalt
Copy link
Member

kalwalt commented Feb 1, 2025

Hi @zentyk did you tried with another browser or device?

@MrCyberNaut
Copy link

Hi @zentyk did you tried with another browser or device?
Yes i tried on different browsers as well as androids and IoS devices , still nothing works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
nft
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kalwalt @zentyk @MrCyberNaut