React-360: Is it possible to link to a 360 YouTube video with ReactVR?

Created on 18 May 2017  路  3Comments  路  Source: facebookarchive/react-360

Most helpful comment

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.

All 3 comments

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

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.

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.

Was this page helpful?
0 / 5 - 0 ratings