search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.69k stars 3.98k forks source link

Videosphere not working on Android 6.0 #1556

Open lautarorb opened 8 years ago

lautarorb commented 8 years ago

Hi, After the update of the Android version on my device the videosphere stopped working on my project but also i doesn't work on your examples that are online. When I enter I see the screen black (I have the play button so that it starts when I click on my demo so it's not the autoplay). It worked ok before the update.

lautarorb commented 8 years ago

Hello @KevinGrandon @fernandojsg @almossawi @ngok in my understanding this is a major issue as none of the devices we tested worked.

I'm mentioning you because I get no response and I saw my issue disappear from the listed issues.

Are you working on a fix for this or i should look for another option?

Thanks in advanced!!

msimpson commented 8 years ago

I took a quick look and found that the wakelock request is throwing DOMException: play() can only be initiated by a user gesture on my Android phone using Chrome 51.0.2704.81 and Android 5.0.2. This leads me to believe there may be a regression somewhere regarding the EnterVR mechanism. Like an event hand-off resulting in a new call stack containing the play call, instead.

dmarcos commented 8 years ago

@msimpson That error you see means that video playback has to be initiated from a user action: A click or a tap on the screen. I don't think it's a regression on A-Frame side but a change in the policies with respect to video playback in Chrome Mobile. @lautarorb Does the problem reproduce with a Chrome Mobile older than 51.0.2704.81? I don't have an Android device I can test on.

msimpson commented 8 years ago

@dmarcos The need for a user gesture to initiate video playback is understood, but not the problem. The issue is that such a common error could result due to the original callstack from said gesture being lost due to an event handoff, enterVR in this case. That handoff is asynchronous and therefore spawns a separate callstack which then initiates a wakelock request. That request then attempts to play a video, but fails as its callstack didn't originate from a user gesture but a custom event. That's my concern.

theDrGray commented 8 years ago

Not sure if this has been addressed but Im running into the same issue. I have multiple videos that I am trying to move though in a "choose your own story" style experience. It only happens after the first video. I can use the scene loaded event to play the first video-sphere, but every subsequent video is hindered by this limitation. Working as expected on a Galaxy Note 4 on Android 4.4 with Chrome 54, but not on a Galaxy 6 running Android 6 and Chrome 54 as well.

Its almost amusing to me that Android originally allowed this functionality while Apple didnt and now they have complete swapped stances as the iOS 10 allows gesture-less media playback.

edit: I am starting my videos from a beacon thats being selected by a fuse on the cursor. Shouldn't that be considered a user gesture as the user has to focus on the beacon I have set up as my "play" and then I am calling the play from the click event? What is the difference between a fuse click and a touch click?

timmhayes commented 7 years ago

I'm still having the same issue in Chrome / Android 6.0 / aframe 0.50 nearly a year after this issue was first reported. Any updates on this? I'd love it if someone could point me to a workaround at the very least. I can't even get the official sample to work correctly.

In my code, I can get the video playing if I force a user-initiated click before putting the scene in VR-mode, but then the video freezes when I enter VR-mode - as documented in #1345.

dmarcos commented 7 years ago

@timmhayes what phone do you have?

timmhayes commented 7 years ago

@dmarcos - Sorry, I should have included that info. A Samsung Note 5, recently updated to Marshmallow.

fuleinist commented 7 years ago

@timmhayes does this one work for you? https://fuleinist.github.io/aframe-360-video/

timmhayes commented 7 years ago

In Chrome on the Note 5 I see nothing but black - no video. But it plays as expected on Firefox.

machenmusik commented 7 years ago

Sanity check. Does this work for you? https://codepen.io/machenmusik/pen/gRPZqd

timmhayes commented 7 years ago

I see the image straight off, but since the video does not appear to have any motion I can't tell if it is actually playing.

machenmusik commented 7 years ago

You can fork the codepen and replace the video URL with whatever you like, as long as it is wide open for CORS

timmhayes commented 7 years ago

I replaced your codepen video with the one from the A-Frame 360 video example and it did not work, however I think there may be an issue with that video. It seems to have the correct mime type, but will not play directly in Chrome (using Android & Windows) - it downloads instead. I think that might be the cause of some of my issues.

The video in this fork works as expected in Android Chrome, in that the click listener successfully starts the video: https://codepen.io/callmetimm/pen/awNovw

machenmusik commented 7 years ago

Interesting. Does the A-Frame example video work if you also specify the mime type as part of the video element, rather than only replacing the URL? Maybe a regression in mime type detection behavior in Chrome?

timmhayes commented 7 years ago

Nope, not when I specify a <source/> element with proper mime type as seen here. But like I said, it looks like the mime type is being served.

I looked more into it. The a-frame video is being served with the following header: content-disposition:attachment; filename=city-4096-mp4-30fps-x264-ffmpeg.mp4. This is causing the download issue.

maxweber commented 7 years ago

I guess that I had the same issue. It took over a day to find the root cause. This is what I have documented about the fix:

The webvr-polyfill version dmarcos/webvr-polyfill#a02a8089b used in aframe 0.5.0 is an old version that causes a weird issue on some mobile devices (like the Samsung Galaxy S6). These devices stop playing mp4 videos, which are used as textures ('a-video' or 'a-videosphere') as soon as the VR mode is active. After the issue appears it is often not possible to play any mp4 videos anymore until the device is restarted. The webvr-polyfill contains a so-called wakelock that keeps the mobile device awake, when it is not receiving any touch events (when it is in a cardboard for example). This wakelook uses a video to do the trick. My guess is that the browser don't let the device fell asleep, when some video is playing. However the old version of the webvr-polyfill contains some mp4 video data (as base64) for the wakelock, that causes the problem on some mobile devices as described above.

The first attempt to solve the issue was to replace the video data in vendor/wakelock/wakelock.js with the mp4 data from a recent webvr-polyfill version (0.9.34). But the aframe build process doesn't seem to do something with vendor folder.

Therefore the version of the "webvr-polyfill" was switched to "^0.9.34" in the package.json (same version that is currently used by the aframe master). This second attempt fixed the problem.

You find the changes for the fix here: https://github.com/vire-co/aframe/tree/video-wakelock-fix

I also released a custom aframe build of the 0.5.0 version, if you like to try out if the fix helps in your case: https://www.npmjs.com/package/maxweber.vire.aframe

dmarcos commented 7 years ago

Can you try with the master branch?

maxweber commented 7 years ago

I've just tested it, the issue does not appear with the master branch. Most likely because the master branch is also using a recent webvr-polyfill version (0.9.34).