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
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.
Related
I have a Rails 5.2.2 app that displays a short video sequence with autoplay. The sound track has been removed from the video.
<body>
<div>
<header>
<video autoplay loop muted playsinline>
<source src="/assets/.../my_video.mp4" type="video/mp4">
</video>
</header>
</div>
</body>
The video autoplays nicely from Chrome, Firefox and Safari on mobile. But in MacOS Safari browsers it does not.
This previously accepted answer suggests that muting this video should be enough, but it seems not to be in my case. A middleware change has also been suggested, but the answer is 6 years old and is labeled as prove-of-concept only.
Changing the above video tag to:
<video autoplay loop muted playsinline poster="/assets/.../my_video.mp4">
...
</video>
seems to fix the problem, but I am having a hard time understanding why, and understanding if I really did solve the problem. I don't understand which of the two references that actually makes the video play. Could anyone explain?
Your original HTML5 looks fine and the test video below is tested and auto playing in MacOS 11.1 and safari 14.0.2.
<body>
<div>
<header>
<video autoplay loop muted playsinline>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4
" type="video/mp4">
</video>
</header>
</div>
</body>
The autoplay rules can change over time so it is worth checking you have a recent version of both the OS and Safari.
If your video still fails to autoplay then it may be some issue with the video itself, or if your framework is generating the code with the final generated HTML5 code. If the problem persists, it would be worth adding the final browser source for the video div if possible.
tested on iPhone and iPad running iOS12, in chrome and safari
Bug description: after interacting (zooming in/out) with google map (integrated in the site by an iframe) on an iOS device (tested on iOS12) using either chrome or safari, clicking on links outside the map does nothing.
try it out here on codepen
interestengly enough, the bug doesn't happen in jsfiddle
here is a youtube video I made if you don't have an iOS device.
happens on my site which is a plain html page with google maps iframe like so (no other javascript, css files are added for testing purposes):
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12101.03207249142!2d-74.04012067655368!3d40.690314788042684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sus!4v1537933952825" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
the above iframe is obtained straight from google maps "share > embed a map" feature.
Any clues how to get around this bug?
After some research, I have found a solution that works properly.
If you add an event listener to the body it will fix the problem.
document.body.addEventListener("fooAction", function(e) {
// something that does nothing
});
For the following code, it does not work on iOS Safari(iPad Air 2). It works everywhere else (Safari on Mac, Chrome on windows)
When I tried to debug the script below on the iPad's Safari (connected to Mac), it does not give any error. It is just silent. No speech.
Please not that this is the simple script, I created many others, such as setting up the voice etc.Nothing works..There is also a separate problem getting the voices, but I want to see if it works with the default voice first.
P.S. If I do XCode programming, using swift to develop native code on iPad (not in Safari), speech works on the iPad. But my goal is to create a web page using the Speech API
Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script>
function Speak() {
speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is my voice on a webpage"));
var speech = new SpeechSynthesisUtterance();
speech.text = "Hello";
speech.volume = 1; // 0 to 1
speech.rate = 1; // 0.1 to 9
speech.pitch = 1; // 0 to 2, 1=normal
speech.lang = "en-US";
speechSynthesis.speak(speech);
}
</script>
<a onclick="Speak()">ClickMe</a>
</body>
</html>
Check your volume, mute switch and make sure you don't have bluetooth headphones set up. It must also be within a click event (which you are doing). Try a normal video to make sure you get sound.
What made it work for me?
I went downstairs
I watched a video in Safari
I tried again and it worked
I then tried again and it worked
I tried again and it didn't work
I played a video again
It still didn't work
I force quit EVERYTHING
It then worked
And then it didn't
Then I realized I hadn't closed browser tabs
Then it worked
I think there's a bug (iOS11)
My meteor / cordova app downloads videos to play them offline.
Downloading works fine. Android works fine ... But iOS not..
I tried local absolute URLs: file:///... but I'm getting Not allowed to load local resource Error so I use cordova-httpd as on Android, but this also not works, without any errors (http://127.0.0.1:8880/ oder http://192.168.2.100:8880). If I open the URL in Browser or curl I can view/download the video, so the httpd server seems to work. I tried on real iPhone and in iOS Simulator.
Playing video direct from remote/internet works.
I tried this HTML snippets:
<div class="video-container">
<video src="{{video_url}}" type="video/mp4" width="100%" controls="controls">
</video>
<button class="ion-play play-button"></button>
</div>
and
<div class="video-container">
<video width="100%" controls="controls">
<source src="{{video_url}}" type="video/mp4" />
</video>
<button class="ion-play play-button"></button>
</div>
In the last days I read so much issues on github and comments on stackoverflow, but I cant get it to work.
(btw. the video is also triggered with button click)
Template.Content.events({
"click .play-button": function (event) {
// Prevent default browser form submit
event.preventDefault();
event.target.classList.add('playing');
var video = event.target.parentNode.getElementsByTagName('video')[0];
video.load();
video.play();
}
});
Please, any suggestions?
I found the issue. My url had a double slash (http://192.168.0.100:8880//videos/some.mp4) and on iOS the HTTP-Server returned a 404 error.
solved by this
Play video cordova
I embedded a video in my Ionic app which has a source file on my Rails application, so basically I have this
<video width="320" height="240" controls="">
<source src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>
running on this url: http://localhost:8100/#/tab/videos/8
I think it has something to do with the same origin policy, so I've already tried to disable CORS on my Chrome browser starting it with this command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security as well as installing and activating this Chrome plugin, too: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi.
It also doesn't work from any other browser which I have installed (Safari and FireFox).
Yet, the video file will not load (the video element will just stay empty, also there is no message about a resource failed to load in my console). How can I make the video load on my localhost:8100 while the video is being served from localhost:3000?
It turned out it wasn't a CORS or server issue at all. Obviously, when working with Ionic, you need to kinda accept that your well known world of HTML has an overlay at the most obscure locations. The issue was that Ionic requires you to use the angular.js src attribute ng-src="path/to/your/file", making the following work:
<video width="320" height="240" controls="">
<source ng-src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>