search

Hubs-Foundation / hubs

Duck-themed multi-user virtual spaces in WebVR. Built with A-Frame.
https://hubsfoundation.org
Mozilla Public License 2.0
2.14k stars 1.41k forks source link

Videos broken in Safari #2345

Open emclaren opened 4 years ago

emclaren commented 4 years ago

Description When videos are brought into a room in Safari they appear just as a broken link

To Reproduce Steps to reproduce the behavior:

  1. Go to hubs room in safari
  2. Open a video from the media browser

Expected behavior video plays

Screenshots

Screen Shot 2020-04-08 at 12 13 24 PM

Hardware Macbook pro Safari 13.1

Additional context Console log 

[Log] A-Frame Version: https://github.com/MozillaReality/aframe (engine-637853945f3679009b62.js, line 1)
[Log] three Version: https://github.com/MozillaReality/three.js (engine-637853945f3679009b62.js, line 1)
[Log] core:schema:warn Default value `null` does not match type `string` in component `media-loader`  (engine-637853945f3679009b62.js, line 1, x3)
[Log] core:schema:warn Default value `null` does not match type `string` in component `camera-focus-button`  (engine-637853945f3679009b62.js, line 1)
[Log] core:schema:warn Default value `null` does not match type `string` in component `emit-scene-event-on-remove`  (engine-637853945f3679009b62.js, line 1)
[Log] core:schema:warn Default value `[object Object]` does not match type `string` in component `pen`  (engine-637853945f3679009b62.js, line 1)
[Log] core:schema:warn Default value `[object Object]` does not match type `string` in component `pen-laser`  (engine-637853945f3679009b62.js, line 1, x3)
[Log] App version: 1.0.0.20200408001052 (hub-5f6a845a2e4adaa54053.js, line 1)
[Log] Tracking: Sentry DSN: https://013d6a364fed43cdb0539a61d520597a@sentry.prod.mozaws.net/370 (hub-5f6a845a2e4adaa54053.js, line 1)
[Log] Tracking: Google Analytics ID: UA-77033033-12 (vendor-88048671cc1eb6f039f2.js, line 512)
[Error] Refused to connect to https://www.google-analytics.com/j/collect?v=1&_v=j81&a=1788576929&t=pageview&_s=1&dl=https%3A%2F%2Fhubs.mozilla.com%2FnpiYqSZ%2F%2F&dp=%2Fhub&ul=en-ca&de=UTF-8&dt=Room%20Landing%20Page&sd=24-bit&sr=1680x1050&vp=1334x829&je=1&_u=QACAAEABAAAAAC~&jid=525661351&gjid=564282899&cid=1388847486.1585609375&tid=UA-77033033-12&_gid=1451958810.1586371538&_r=1&z=1458548605 because it does not appear in the connect-src directive of the Content Security Policy.
[Warning] No WebGL 2.0 context available. Falling back to WebGL 1.0 (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] THREE.WebGLRenderer – "106dev" (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Using Non-VR bindings. (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] Batching requires WebGL 2. Disabling batching. (vendor-88048671cc1eb6f039f2.js, line 512)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'. (x2)

[Log] Hub ID: npiYqSZ (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Reticulum @ mystifying-artificer.reticulum.io: v1.0.20200403193204 on arbre (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Phoenix Socket URL: wss://mystifying-artificer.reticulum.io:443 (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Logged into account 485310044812869979 (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] THREE.GLTFLoader: Duplicating UVs to support aoMap. (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Janus host: agitated-elf.reticulum.io:443 (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Scene URL: https://uploads-prod.reticulum.io/files/55bdd017-a55b-4bb5-bc3d-f5963a171f0f.bin (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] THREE.GLTFLoader: Duplicating UVs to support aoMap. (vendor-88048671cc1eb6f039f2.js, line 512, x4)
[Warning] [three-pathfinding]: Use THREE.BufferGeometry, not THREE.Geometry, to create zone. (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] traverseMeshesAndAddShapes (hub-5f6a845a2e4adaa54053.js, line 1)
[Log] heightfield or trimesh found on scene (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] THREE.GLTFLoader: Duplicating UVs to support aoMap. (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1093x616) to (1024x512). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x640) to (1024x512). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x144) to (1024x128). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (301x320) to (256x256). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x125) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x108) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x127) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x115) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x109) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x155) to (1024x128). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x106) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (2423x1567) to (2048x1024). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (595x508) to (512x256). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (26x22) to (16x16). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (118x94) to (64x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x178) to (1024x128). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1023x111) to (512x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x121) to (1024x64). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x314) to (1024x256). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x170) to (1024x128). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1024x568) to (1024x512). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (1280x720) to (1024x512). (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] THREE.WebGLRenderer: Texture has been resized from (512x848) to (512x512). (vendor-88048671cc1eb6f039f2.js, line 512)
[Log] Using microphone: Built-in Microphone (vendor-88048671cc1eb6f039f2.js, line 512)
[Warning] Avatar does not an 'allOpen' animation, disabling hand animations (vendor-88048671cc1eb6f039f2.js, line 512, x2)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (videoplayback, line 0)
[Error] Error adding media – Error: Unsupported content type: text/plain
Error: Unsupported content type: text/plain
    (anonymous function) (vendor-88048671cc1eb6f039f2.js:512:125981)
    (anonymous function) (hub-5f6a845a2e4adaa54053.js:1:301480)
    generatorResume
    C (hub-5f6a845a2e4adaa54053.js:1:289652)
    r (hub-5f6a845a2e4adaa54053.js:1:289855)
    promiseReactionJob
[Error] Releasing uncached texture src error
    (anonymous function) (vendor-88048671cc1eb6f039f2.js:512:125981)
    release (hub-5f6a845a2e4adaa54053.js:1:559609)
    remove (hub-5f6a845a2e4adaa54053.js:1:575745)
    (anonymous function) (engine-637853945f3679009b62.js:1:74921)
    removeComponent (engine-637853945f3679009b62.js:1:84832)
    value (engine-637853945f3679009b62.js:1:82072)
    detachedCallback (engine-637853945f3679009b62.js:1:11121)
    p (vendor-88048671cc1eb6f039f2.js:687:1386)
    (anonymous function) (vendor-88048671cc1eb6f039f2.js:687:133)
    n (vendor-88048671cc1eb6f039f2.js:687:4723)
    (anonymous function) (vendor-88048671cc1eb6f039f2.js:687:4844)
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.

[Error] Unrecognized Content-Security-Policy directive 'worker-src'.

[Error] Unrecognized Content-Security-Policy directive 'worker-src'.

[Error] Unrecognized Content-Security-Policy directive 'worker-src'.

[Error] Not allowed to load local resource: blob://nullhttps//hubs.mozilla.com/gifparsing.worker-ef1abc6384654b227b6a.js.map
[Error] Not allowed to request resource
[Error] Cannot load blob://nullhttps//hubs.mozilla.com/gifparsing.worker-ef1abc6384654b227b6a.js.map due to access control checks.
[Error] Not allowed to load local resource: blob://nullhttps//hubs.mozilla.com/sketchfab-zip.worker-91fe1d86be396c2ee61e.js.map
[Error] Not allowed to request resource
[Error] Cannot load blob://nullhttps//hubs.mozilla.com/sketchfab-zip.worker-91fe1d86be396c2ee61e.js.map due to access control checks.
[Error] Not allowed to load local resource: blob://nullhttps//hubs.mozilla.com/color-shift.worker-787a591ca4809b890107.js.map
[Error] Not allowed to request resource
[Error] Cannot load blob://nullhttps//hubs.mozilla.com/color-shift.worker-787a591ca4809b890107.js.map due to access control checks.
[Error] Not allowed to load local resource: blob://nullhttps//hubs.mozilla.com/ammo.worker-b7ecdb1d700f880b1e36.js.map
[Error] Not allowed to request resource
[Error] Cannot load blob://nullhttps//hubs.mozilla.com/ammo.worker-b7ecdb1d700f880b1e36.js.map due to access control checks.

┆Issue is synchronized with this Jira Task

brianpeiris commented 4 years ago

Relevant lines in the log above:

[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (videoplayback, line 0)
[Error] Error adding media – Error: Unsupported content type: text/plain
Error: Unsupported content type: text/plain
brianpeiris commented 4 years ago

Might be useful to know whether this only happens to youtube videos, or if you can reproduce with an uploaded video. You can download this video to test: https://github.com/bower-media-samples/big-buck-bunny-1080p-30s/blob/master/video.mp4?raw=true

emclaren commented 4 years ago

Vimeo videos work.

When I try to drag and drop that file into a hubs room in safari I get the following response 


[Error] Failed to load resource: cannot parse response (media, line 0)
[Error] Media upload failed – TypeError: cannot parse response
TypeError: cannot parse response
    (anonymous function) (vendor-d5db294e2e3226d9832f.js:512:125981)
    (anonymous function) (hub-b8fe197e6a2173d0bad4.js:1:54264)
    promiseReactionJob
[Error] Error adding media – TypeError: Type error — media-loader.js:365
TypeError: Type error — media-loader.js:365
    (anonymous function) (vendor-d5db294e2e3226d9832f.js:512:125981)
    (anonymous function) (hub-b8fe197e6a2173d0bad4.js:1:301949)
    generatorResume
    C (hub-b8fe197e6a2173d0bad4.js:1:290121)
    r (hub-b8fe197e6a2173d0bad4.js:1:290324)
    (anonymous function) (hub-b8fe197e6a2173d0bad4.js:1:290383)
    Promise
    (anonymous function) (hub-b8fe197e6a2173d0bad4.js:1:290275)
    callUpdateHandler (engine-6c53dee8732f2549b121.js:1:69545)
    updateProperties (engine-6c53dee8732f2549b121.js:1:67938)
    updateComponent (engine-6c53dee8732f2549b121.js:1:85953)
    setAttribute (engine-6c53dee8732f2549b121.js:1:88007)
    (anonymous function) (hub-b8fe197e6a2173d0bad4.js:1:54304)
    promiseReactionJob
gfodor commented 4 years ago

Haven't investigated, but we have a safari specific code path in reticulum for media resolution for videos iirc, which may explain the difference.

emclaren commented 4 years ago

A community member attended the office hours today to ask about this issue

joshmarinacci commented 4 years ago

Is this still happening?

joshmarinacci commented 4 years ago

@InfiniteLee can you confirm this is still a bug.

misslivirose commented 4 years ago

I hit this on my iPhone 11 this morning - should we have separate issues for Safari mobile and on Mac OS?

InfiniteLee commented 4 years ago

Also confirmed this is still happening on Safari on mac.

InfiniteLee commented 4 years ago

After a bunch of investigation, this appears to actually be two different issues:

  1. safari does not support certain video formats such as .mkv or .webm - we probably should show a proper error message in the case that either of these media formats is detected
  2. Certain videos (that otherwise work if uploaded) when proxied via cloudflare, do not return the correct response code which causes safari to be unable to play the videos. I believe this article documents the issue we are experiencing: https://www.stirtingale.com/guides/2018/10/mp4-not-working-cloudflare

This is a response from a working vimeo video:

Screen Shot 2020-07-29 at 6 34 45 PM

and this is a response from a non-working youtube video:

Screen Shot 2020-07-29 at 6 34 23 PM

According to that article, we may need to disable caching for mp4's that are proxied by cloudfront, which in theory can be done by adding the header cf: { cacheTtl: -1 } to the request (cloudflare's documentation), however I'm not sure how to do this nor if this is even a good idea.

InfiniteLee commented 4 years ago

If you take out youtube-dl as a factor (and run it locally to get the raw url), it appears that youtube videos are only not loading on hubs servers that are using reticulum for cors-proxying (assuming that hubs.mozilla.com and dev.reticulum.io are both using cloudflare). So one potential workaround for hubs cloud users is to use a cloudflare worker.

Any additional reports of this issue should specify if this is happening on hubs.mozilla.com or a hubs cloud server to verify if this is actually the case.

example raw video url (this url may stop working)

hubs.mozilla.com: https://hubs-proxy.com/ - works on firefox, chrome and safari

dev.reticulum.com: https://cors-proxy-dev.reticulum.io/ - works on firefox, chrome and safari

hubsloadtesting.com (cloud instance using cloudflare worker): https://hubs-hubsloadtesting-com-cors-proxy.hubsloadtesting.workers.dev/ - works on firefox, chrome and safari

hups.motziller.com (cloud instance not using cloudflare worker): https://cors-proxy.hups.motziller.com/ - does not work in safari, but works in firefox and chrome

local reticulum: https://hubs-proxy.local:4000/ - does not work in safari, but works in firefox and chrome

joshmarinacci commented 4 years ago

Why do you think the cloudflare worker fixes the issue? Does Youtube recognize it's a CDN and serve up the video differently?

truedat101 commented 4 years ago

While not related, #2583 isn't fixed. According to this bug, Google is blocking the streams originating from the hubs? Not clear on why that bug was closed as it is not a duplicate of an existing bug. About a week and half ago, I had youtube beatport live streams working in a video object (via Hubs), and then suddenly later on in the day I made some modifications to the scene, and it stopped loading any videos.

I will try out the problem as described in this issue on Safari / OS X and also Firefox OS X, to see if I can reproduce on youtube videos.

emclaren commented 4 years ago

Hi @truedat101 - Hubs' servers are blocked when there are too many requests to youtube during a period of time. When it is blocked it is generally just for a few hours, after which point it will start working again.

Since our servers have become much busier, we've been seeing this occur more frequently. We've since begun advising against relying on youtube for mission critical content, we recommend hosting videos on the Hubs servers by uploading to your Hubs room or Spoke (there is a 128MB size limit for these videos) or on a self-hosting videos on a provider like Amazon S3.

When this occurs you should see an error message that says "Unable to load video" not the broken link image (as pictured above). Are you getting a broken link pictures?

truedat101 commented 4 years ago

@emclaren yeah it seemed very sudden, as it worked for a few hours and then magically broken. On the scene when loading a video link I was seeing the swirling box as if it is trying to load a video. I was not getting broken links in every case, although from the spokes side when I would reload a scene, then I get the javascript looking error pop up.

emclaren commented 4 years ago

An email we received from a community member mentioned that there are issues with video playback on different versions of the safari browser on iPads

"after some research and testing it seems that Videos/360 Video and audio, work for any IOS device with a safari browser that is Version 13.0.0 or lower. We have tested on several iPads and they do not output video or audio on Version 14.0.0. We tested using another IPAD running at Version 12 and both video and audio playback works perfectly. "

yonescat commented 3 years ago

Hi, I can confirm that this is still an issue on all browsers on iOS , safari and chrome. Just a music note shows up!! Any hot fixes for this ...

AlbertBaubleDeem commented 3 years ago

I can confirm the issue still persists on all browser (Safari, Chrome, Firefox) on iOS 14.4 . (Apparently Safari core is to be blamed)

Is the issue going to be attended to? It is critical in deploying hubs at my organisation, so any update is welcome (so that I can plan the deployment).

brianpeiris commented 3 years ago

I could not reproduce this in a quick test on iOS 14.4. Can you confirm that it breaks if you paste this video link into a room? https://brianpeiris.github.io/test-media/big-buck-bunny-360p-short.mp4

arpu commented 3 years ago

@brianpeiris your video works just fine, looks like the importend part is the hosted server needs allow 206 https request https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206

AlbertBaubleDeem commented 3 years ago

I could not reproduce this in a quick test on iOS 14.4. Can you confirm that it breaks if you paste this video link into a room? https://brianpeiris.github.io/test-media/big-buck-bunny-360p-short.mp4

@brianpeiris , I tested the video link in the room. Apart from a low framerate (about 1=2 fps), the video DID play on 2 iPad Air 2 iOS 14.4 devices.

I managed to reproduce the issue using a vimeo video, but only on one of two devices (both were iPad Air 2). I will provide logs as soon as our IT enables remote logging and post them here.

  1. safari does not support certain video formats such as .mkv or .webm - we probably should show a proper error message in the case that either of these media formats is detected

This issue likely does NOT have anything to do with unsupported video format in Safari, mentioned above.

Thank you for your attention to the issue. I hope I will be able to provide you with sufficient info next week!

takahirox commented 3 years ago

https://github.com/mozilla/hubs/issues/2345#issuecomment-666030185

After a bunch of investigation, this appears to actually be two different issues:

  1. safari does not support certain video formats such as .mkv or .webm - we probably should show a proper error message in the case that either of these media formats is detected
  2. Certain videos (that otherwise work if uploaded) when proxied via cloudflare, do not return the correct response code which causes safari to be unable to play the videos. I believe this article documents the issue we are experiencing:

Regarding 2, Sounds like it has been resolved by #4630.

Regarding 1, what video encodings does Safari not supported yet? In any case, I speculate Safari supports popular video formats so that we can prioritize the issue lower.