search

facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.23k forks source link

Is it possible to link to a 360 YouTube video with ReactVR? #200

Closed muhammetdemirci closed 6 years ago

ichengde commented 7 years ago

If you would like to display 360 YouTube video with ReactVR, I think you need to grab and save videos from YouTube, then use VideoPano. If you only want to link a 360 YouTube video pages with ReactVR, you may be able to refer to this issus. #183

larrylin28 commented 7 years ago

Basically I'd suggest you write a custom video player to play external link video like youtube video. You can follow the guide here: https://facebook.github.io/react-vr/docs/video-player.html. For playing youtube 360 videos, you needs to solve several problems I can foresee:

  1. Youtube video api is Iframe based. You will be blocked by CORS while accessing the video element in it. You may need some workaround such as using a canvas to draw the iframe and use that canvas as texture.
  2. Youtube player plays 360 video with projection. To play 360 video in ReactVR, you need to get the full video instead of projection. I didn't find any parameter to do that via Youtube APIs yet.

If that doesn't answer your question, please add more details in your description. I'm not quite sure if I understand your requirement correctly.

frostney commented 7 years ago

I'll do a proper write-up about this in a bit, but unfortunately this seems to be quite complex. Drawing the iframe to a canvas will be blocked because of the same-origin policy. Take a look at Limitations over at http://html2canvas.hertzen.com/documentation.html. Feel free to look at my failed experiment over here: https://gist.github.com/frostney/6b12b31e1ea85814f77ce47ba1a83e87.

What I am currently investigating is drawing the iframe with the ThreeJS CSS renderer and then applying that to the WebGL scene as a native module.