Videoplayer not working on WEB AR?


#1

Hi there!

Has anybody tried using video player subsymbol on WEB AR experience?
In zappar app working, but on web there is just black rectangle?

Anybody?
Thankyou!

Nejc,
Etiketa Interactive


#2

UPDATE:
I tried debugging situation in chrome dev tools and I noticed this error:

Looks like some CORS headers problems?

If I play same video with Z.Device.playfullscreenvideo it works, so something is missing probably in Videoplayer subsymbol?
I would really like to use video player subsymbol, because of some fatures. Please help :slight_smile:


#3

Hi!

Yes indeed that looks like a CORS issue. For videos that are rendered directly into scene (i.e. using the subsymbol) browsers require that the CORS headers be present. This is because the pipeline we use (where we copy data out of a video element and put it into a texture for rendering in the 3D view) triggers a different security configuration in the browser.

With Z.device.playFullScreenVideo we use a standard HTML video element (and don’t take the video data out of the at element) so CORS isn’t necessary.

We’d recommend setting the following header for these assets to address this issue:

Access-Control-Allow-Origin: web.zappar.com

Sorry it’s not an easier fix but I’m afraid it’s a browser restriction :confused: Let me know if that answers your question!

Cheers,
Connell


#4

Thank you for answer

So can I do something, can I set headers somehow in Zappar or is it more server side thing?

Cheers,
Nejc


#5

Hi Nejc,

This header needs to be set by the server I’m afraid. It seems from looking at the error you’re seeing that it’s Google storage you’re using? If so then I think this article should help:
https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket

Let me know if that helps :slight_smile:
Connel


#6

YES! Thank you.
With some stuggle we made it work.

Really usefull link is this one:
https://cloud.google.com/storage/docs/configuring-cors

(This only applies if you use firebase for storage.)
You have to use GSUTIL tool to write CORS config file (using JSON).

Cheers,
Nejc