Skip to content

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

Open
@zentyk

Description

@zentyk

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/[email protected]/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/[email protected]/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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions