Videos broken in Safari

[emclaren]

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

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]

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]

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]

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]

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]

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

[joshmarinacci]

Is this still happening?

[joshmarinacci]

@InfiniteLee can you confirm this is still a bug.

[misslivirose]

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

[InfiniteLee]

Also confirmed this is still happening on Safari on mac.

[InfiniteLee]

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:

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

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]

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/<video_url> - works on firefox, chrome and safari

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

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

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

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

[joshmarinacci]

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

[truedat101]

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]

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]

@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]

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]

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]

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]

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]

@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]

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]

#2345 (comment)

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.