search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.79k stars 2.22k forks source link

The video does not start #400

Closed mariorossi2018 closed 5 years ago

mariorossi2018 commented 6 years ago

I wrote this code:

<a-scene embedded arjs>
     <a-assets>
            <video id="video" autoplay loop="true" src="./a.mp4">
     </a-assets>

<a-marker preset="hiro">
  <a-video src="#video" width="8" height="4.5" position="0 1 -1"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>

Only one image appears but the video does not start. What am I doing wrong?

Thank you in advance

anilachary commented 6 years ago

It will work fine in Mozilla Firefox in both desktop and mobile browser. coming to chrome we need to click play button as shown. We need to pay the video manually by making the play function execute. If you load the page directly the video will not play automatically you need to click play button but when you are loading one-page index.html first and give a link of this page(below code in another page like aframe_video.html) in your menu ...... then it will work fine ......

`<!DOCTYPE html>

Scan Me
`
chan51 commented 5 years ago

Hey @anilachary, I tried your way. Still it's not working for me. I'm trying on mobile Mozilla Firefox. I'm getting black screen when getting camera over marker. No sound is coming and no video is playing. Can you tell me what wrong I'm doing.

I'm attaching my html file with script tag in it. demo8.txt

anilachary commented 5 years ago

TRY THIS ONCE AND LET ME KNOW

Open This Link - https://jsfiddle.net/anil001ry/twfm4ay6/

cann1132 commented 5 years ago

@anilachary I've tried on android, not working

jamess922 commented 5 years ago

@anilachary Hi, I made a webm video with alpha and tried out ,video could paly on android but no Transparent effect，and could not play on ios only black

jacogaz commented 5 years ago

I actually tried your code, @anilachary, it worked for a few times but then it displayed a black screen on android device on firefox. I tried on my local server, and on a remote server and it also works. I also tried on mobile safari and it displays a black screen. On iOS (firefox) it throws me an WebRTC issue-! navigator.mediaDevices not present in your browser... Do you know why this happens? The code is the same I just added an alpha .webm video.

nicolocarpignoli commented 5 years ago

Try to run the app ALWAYS under HTTPS OR on localhost. Maybe security policies from browsers. If errors shows again, even on HTTPS, tell us

jacogaz commented 5 years ago

I did it, I run it under HTTPS and localhost, both, and it still happens...

PS: I just realized the latest version of ar.js and a-frame does not support alpha video (.webm), it displays the video with a black background behind the sillouette. If I use ar.js (version: 1.6.0)and a-frame(version: 0.8.2) doesn't happen.

jacogaz commented 5 years ago

I did it, I run it under HTTPS and localhost, both, and it still happens...

PS: I just realized the latest version of ar.js and a-frame does not support alpha video (.webm), it displays the video with a black background behind the sillouette. If I use ar.js (version: 1.6.0)and a-frame(version: 0.8.2) doesn't happen.

Update: On mac (Safari) It let me access to my camera but it displays a black screen instead of the video... I solved the android issue that played the video with a black background by changing the version of ar.js and a-frame I was using... Now I'm facing this black screen issue... any help?

Thank you

debayanj commented 5 years ago

the issues is on mobile its not detecting the marker on first time, it detects on third fourth time and then plays video . help me on this. by collecting all related implementation of ar js on desktop and mobile using camera this code is working..

<!doctype HTML>

merowell commented 5 years ago

I've tried the code provided by @anilachary and it works great-- I can finally get the marker to trigger a video with alpha channels (with the exception of some CORS issues).

But how can I make this code work with multiple videos? I have three different markers that I'd like to trigger different movie files.

Ajith-Kalyan commented 4 years ago

@merowell I have been trying the same.. did you find any solution ? @anilachary still I'm unable to display any video over the marker. can I find any demo ? it'd be very helpful. Thanks.

merowell commented 4 years ago

@Ajith-Kalyan Sure! Let me know if this glitch helps. When I was having this problem, Piotr provided me with this code and it helped me a lot. If it's still not working for you I can direct you to my project file, I'll just have to update the readme real quick. Sorry, I'm pretty new to this stuff, but I hope I can help!

E-Ismail commented 4 years ago

@merowell What are the tracking images ? I want to try your application many thanks for sharing.

asici2 commented 3 years ago

Please, can anyone help? i am trying to use a-marker-camera instead of a-marker, because it is more stable and video keep on screen. But when i use a-marker-camera, video doesn't autoplay and first frame is black. can anyone tell me what i'm doing wrong, please? here is the code:

<a-assets>
    <video crossorigin="anonymous" id="myvid" controls="true" loop="true" play="true" type="video/mp4" src="https://asici2.000webhostapp.com/video.mp4"> </video>
</a-assets>

<a-marker-camera vidhandler preset="custom" type="pattern" url="https://asici2.000webhostapp.com/PATT/marker.patt">
     <a-video  src="#myvid" position="0 0.3 0" rotation="-90 0 0" play="true"  width=2 height=1.3 >
     </a-video>
    </a-marker-camera>
<a-entity camera></a-entity>
</a-scene>