How to create 3D/360 VR videos using standard web technologies?

I know some websites that provide 3D/360 VR videos within the browser when phone is placed into a Google Cardboard ( non-electronic device, two plastic lenses and a cardboard box that holds your phone ) without using VR engines.

I guess such videos are based on two files that include 2 views ( left eye / right eye ) for 3D and they are embedded on the web page with access to some browser APIs to get the position of the device for the 360 experience.

I would be grateful if you could tell me how to make such videos. Let's consider I already have mp4 files created by a 3D/360 cam. How can I embed them on website to create the 3D/360 experience within a web browser on a phone?

If you are using a camera which produces a format compatible with YoutUbe or a similar service you can simply upload the video there and use their service.

If you want to host it your self you will need a player which can support the format - different players will have different configurations and setup but some examples:

• Mobile Android: https://developers.google.com/vr/android/samples/video360
• Web: three.js based: https://threejs.org/docs/#api/en/textures/VideoTexture (example here although it is slightly old now: https://github.com/gbentaieb/simple360Player
• Commercial cross platform solutions: https://bitmovin.com/demos/vr-360, https://www.omnivirt.com/vr-player/

There is also a Google Codelabs which includes building a VR video for viewing in Google Carboard - you need to be aware that Google changes support and approach for VR over time but generally supports older API's for some while also:

• https://codelabs.developers.google.com/codelabs/vr_view_101/#0