Video Recorder throws errors on import (CDN + standalone)

Universal AR A-Frame
#1

Hello,

I’m trying to use the Zappar Video Recorder, but cannot get it to even import.

1.

Using the CDN, when importing the script like so (just a copy of the instructions page):

<script src="https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js"></script>

it throws the following error:

zappar-videorecorder.js:1 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://libs.zappar.com/zappar-videorecorder/0.1.18/https://libs.zappar.com/zappar-videorecorder/0.1.18/video.worker?inline=fallback' cannot be accessed from origin 'https://127.0.0.1:8080'.
    at new s (https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:7697)
    at Object.607 (https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:6983)
    at i (https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:7859)
    at https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:8747
    at https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:8755
    at https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:215
    at https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js:1:219

2.

Similarly, when I try to download the script locally and add it like so:

<script src="zappar-videorecorder.js"></script>

I have another error:

https://127.0.0.1:8080/https://127.0.0.1:8080/video.worker?inline=fallback 404 (Not Found)

A quick search pointed that it may be related to a problem with “running workers locally”, which I’m not familiar with.
Can you help fixing the instructions to get it setup properly?

Thanks!
T

#2

Hi @thomas2,

I’ve been doing a bit of testing and can’t quite seem to recreate this issue.

Could you let us know what you’re using to serve the build?

Would be helpful if you also had a minimal example project we could look at for testing?

George

#3

Hey George,

Thanks for reaching back and giving it a try.

I’ve just started a project from scratch again to be sure I was not doing anything fancy.
Here are the steps I’m following (for the CDN approach, following the instructions here):

  • I’m choosing AFrame, Standalone HTML, Face Tracking as the base project
  • adding <script src="https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js"></script> in my header
    (- not even trying to do anything with it yet in the code)
  • I’m serving with zapworks serve . --lan which works flawlessly in my other projects
  • testing locally on Chrome and Brave gives the error pasted in my initial post; Firefox throws another one (in French, but saying something like Security error : content at https://127.0.0.1:8080/ cannot be loaded from https://libs.zappar.com/zappar-videorecorder/0.1.18/https://libs.zappar.com/zappar-videorecorder/0.1.18/video.worker?inline=fallback.

Below is my full code, but really nothing added other than the script reference to the CDN:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://libs.zappar.com/zappar-aframe/0.3.9/zappar-aframe.js"></script>
    <script src="https://libs.zappar.com/zappar-videorecorder/0.1.18/zappar-videorecorder.js"></script>

    <title>Zappar for A-Frame</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <a-scene>
        <!-- Ask user for camera permissions -->
        <a-entity zappar-permissions-ui id="permissions"></a-entity>
        <!-- Browser Compatibility -->
        <a-entity zappar-compatibility-ui id="compatibility"></a-entity>

        <a-assets>
            <img id="face-mesh-template" src="faceMeshTemplate.png"/>
        </a-assets>

        <a-entity camera zappar-camera="user-facing: true;"></a-entity>

        <a-entity zappar-face id="face-group">

            <!-- PLACE 3D OBJECTS HERE TO TRACK FROM THE CENTER OF THE FACE -->
            <a-box scale="0.2 0.2 0.2"></a-box>

            <!-- AND/OR USE USE A FACE MESH OBJECT THAT FITS TO THE FACE AS THE USER'S EXPRESSION CHANGES -->
            <a-entity geometry="primitive: face-mesh; face: #face-group" material="src:#face-mesh-template; transparent: true;"></a-entity>

        </a-entity>
    </a-scene>
</body>

</html>

Let me know if you need me to try anything out to help tracking this down!
Cheers,
T

#4

Thanks for the extra info @thomas2, v0.1.19 addresses your issue.

1 Like
#5

Excellent news!

Will test and report asap :slight_smile:

#6

Hey @Deim,
Sorry for the bad news, but 0.1.19 gives me the same worker error as pasted in my original post :frowning: