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


Video Player doesn't work in WebAR
#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


WebAR Video not working
#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


#8

Hey guys - I think I have the same issue. My video is on AWS (s3) though. Does anyone know if there is a step-by-step workflow for a non-coder??? THANKS


#9

Hi, I am also having an issue streaming video with WebAR. I’m using AWS (s3) to host my videos. They have a section where you can edit the CORS configuration. I’m curious, what are the allowed origins/ the domains I need to put in there? is it web.zappar.com? Please help, I’m not sure if I have it right.

https://web.zappar.com/


https://zap.works/


#10

You don’t need to use CORS with video files. CORS are for Json DB.
I just used AWS S3 buckets. Then set the files public.

My video like for one of the Sipsmith videos is https://rentanerdllc.s3.us-east-2.amazonaws.com/history.mp4

Steve


#11

LOL! Thank you Steve.


#12

Well, I do have it set to public however the video is still not playing when I use WebAR. :confused:


#13

Does it work with the Zappar App?
If so then check your using the https.
Are you playing full screen?
Can you play thru the video player?

Steve


#14

HI,

Yes, it does work with the Zappar App. I do have the https in there. No, I am not playing full screen. I am using the video player.


#15

Sorry I should have read a little more before posting.

I’m editing the CORS on my bucket with this but it isn’t working for me. I’ll have to play with it and see.

Sorry the code from this post.
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
Changed address to web.zappar.com

Steve
Ps. @interactive What did you have in your CORS file?
@connell I know Zappar uses AWS can you help with the CORS info?


#16

Thanks for looking in to it. I still have not figured it out yet. :confused:


#17

I found that there is a setting for adding AWS account older permissions. Do I need to add permissions for my video object for Zappar? If so, to add read permissions for them I would need their Canononical ID? Am I getting close? This is all new for me so I really appreciate any help.


#18

I would like to share my solution to this problem, since i’ve been working on it all day…

So in my case I was hosting a .mp4 file via a third party webhost, in order to get a direct link (e.g. …/…/video.mp4). I wanted it to stream using the videoplayer symbol. This worked very well while using the Zappar App. But unfortunately not while using the Web AR functionality, which only resulted in a black videoplayer screen.

After reading through the documentation (https://docs.zap.works/studio/subsymbols/subsymbol-templates/components/video-player/) and this forum I found out the server needed to support ‘Range Request’ and also ‘CORS headers being present’. My webhost was using an Apache server and they told me their server did’nt use those settings and there was nothing I could do. But in fact there was a solution:

I’ve fixed both issues by adding a .htaccess file within the same folder as the videocontent, containing:
Header set Access-Control-Allow-Origin "*"
Header set Accept-Ranges "bytes"

Hope it helps for anyone streaming the video’s from a standard webhosting environment.

  • edit: corrected typo: “.htacces = .htaccess”

#19

Thank you!!!
Here is a zip file with the file @Niels0005 was talking about .WebAR Video Fix File.zip (180 Bytes)

@jcolley I just dropped this file in to the same folder like @Niels0005 said and my videos now work!!

Steve


#22

So basically it is just a text file with those two lines in there? I can upload my text file and rename it to .htaccess? TIP: to see hidden files on your MAC or in a folder use (control + M + .) combination.


#23

Sorry just saw your first post in my email. Yes it’s just a text file renamed.

Steve