Video Hotspot

[apuhub]

Currently, all the hotspots icons appear on the left hand side of the SocialVR Browser.

A video icon like should be added to this to serve as a the "video" hotspot. (@mericda please approve)

When a user clicks on the video they should be asked to insert:

1. The youtube link
2. Title of the video

It is expected that the embedded youtube video would appear like it does on youtube as a hotspot with the ability to forward, and adjust the volume of the clip.

see below for an example of the "image" hotspot currently. The embedded video would just replace the image.

When looking in preview mode, when a user directs their gaze over the "video" hotspot it will start playing from the youtube link.

[emilt27]

Hello @apuhub!

Q1. I think the icon should be gray like other icons. What do you think? Could you provide me the gray one?
Q2. If the user fills in an incorrect youtube link, I think we should display the error message. What do you think? Could you provide the message text?

[apuhub]

In response: yes the icon should be gray and similar to the ones we have. I can't provide this right now, can you use a place holder instead in the meantime?

And agreed there should be an error message if the link doesn't not work. Message:

"The URL is not valid, please check and try again."

On Apr 10, 2018 5:09 AM, "Emil Temirov" notifications@github.com wrote:

Hello @apuhub https://github.com/apuhub!

Q1. I think the icon should be gray like other icons. What do you think? Could you provide me the gray one? Q2. If the user fills in an incorrect youtube link, I think we should display the error message. What do you think? Could you provide the message text?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cmuartfab/socialvr-browser/issues/96#issuecomment-380029364, or mute the thread https://github.com/notifications/unsubscribe-auth/ATjiFeilRn0He8vomTIrH9I84Y1MIg6Wks5tnHargaJpZM4TNlWa .

[emilt27]

I've tried several approaches to implement this feature:

1. YouTube
2. Google Drive
3. Vimeo
4. Firebase Storage

But in order to display the video properly in VR mode we should have a direct link to the video file. Then we can use it in HTMLVideoElement and pass it into THREE.Texture(vide);.

1. YouTube - it provides an ability to use video only via the iframe on the web (or youtube's specific video player on mobile devices). I've tried to use it via THREE.CSS3DRenderer and it works properly in Edit 3D/Preview modes but it does not work in VR mode because VR mode requires THREE.WebGLRenderer only. I've found solution that alows to get the direct link but the YouTube API TOS prohibit such usage.

2. Google Drive - it provides ability to get direct link to the file, but THREE.WebGLRenderer requires CORS, in particular, it requires the 'Access-Control-Allow-Origin' '*'; header to be included in response. But drive.google.com does not return this header (https://stackoverflow.com/questions/20364662/access-control-allow-origin-error-on-google-drive-web-site). So, I've solved this issue via configuring the nginx server that just proxies the request and adds this heder to response. Nginx config:

   location / {
   add_header 'Access-Control-Allow-Origin' '*';
   proxy_pass https://drive.google.com;
   }

   So, now it's possible to use google drive link to the video using this workaround, but I don't like this approach (it could have additional issues).

3. Vimeo - provides direct links to the video file but only for paid accounts (Pro or Bussines: https://vimeo.com/upgrade).

4. Firebase Storage also provides direct links to files, but it requires the implementation of uploading feature for users and it is also not free (https://firebase.google.com/pricing/)

[apuhub]

@batchku how would you like to proceed with this?

[mericda]

@emilt27 please let me know if you need any design help on this issue. Thanks!