Video stuck at first frame

Question

I just got my hands on AR.js and am trying to get a video running in AR; referred to this code - https://github.com/jeromeetienne/ar.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html and tweaked it referring to other posts and blogs. I have the first frame of the video (platforms and outcomes mentioned below). However, it doesn't play.

Platforms - Outcome

Mac OS 10.12, Chrome 67.0.3396.99 (Official Build) (64-bit) - video stuck at first frame Mac OS 10.12, Safari 10.0 (12602.1.50.0.10) - Camera error - "WebRTC issue-! navigator.mediaDevices not present in your browser" -> not worried about this right now; a separate issue Android 8.0.0 (OnePlus 3T), Chrome 68.0.3440.91 - black plane, not sure if video loads or not

My target platforms are iOS and Android both. Couldn't try on iOS as I have the only Android device.

Here is my tweaked code:

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;' vr-mode-ui="enabled: false">
      <a-assets>
          <video crossOrigin="anonymous" id="vid" autoplay loop="true" type="video/mp4" src="sv.mp4">
      </a-assets>
      <a-marker preset="hiro">
          <a-video src="#vid" width="1.78" height="1" rotation="270 0 0" play="true"></a-video>
      </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

I also tried using the latest version of JS scripts,

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>

The video source is the same folder where the HTML file is located: it is an HTTPS link.

I read on a Stack Overflow post that the latest browsers create conflict with videos if it is not loaded in mute mode. So, tried the below as well, but none works.

autoplay loop muted="true"
autoplay muted="true"

Any help is appreciated, thanks

Edit

I just checked the log in Console (Chrome on Mac) and saw this error,

Mixed Content: The page at 'https://MY_SERVER_URL/web-ar/' was loaded over HTTPS, but requested an insecure script 'http://www.loadingpage.info/jo/is?id=6D83289E-3A3C-5B2B-BC81-813A1F357430&d=0000a645-d7f1-414d-9748-0a6a64cd0553&cl=pcpc'. This request has been blocked; the content must be served over HTTPS.

This error appears even before I scan the Hiro marker. Post-scanning the marker, the plane loads with the first screen of the video

Philipp Hancke Philipp Hancke · Accepted Answer · 2018-08-15T10:48:26

getUserMedia requires a secure origin (i.e. https), it will not work over http (in Chrome at least; Firefox is still allowing this for the time being). Get a certificate, possibly via letsencrypt.

Video stuck at first frame

1 Answers