What is 360 Degree Video?

360 Degree Video lets you watch every the direction of an area by giving you the control of the viewing direction. You can control the direction by looking at the different directions on mobile(android, iOS) or dragging the mouse on the personal computers.

360 degree video

If you want to have a better experience you should try VR glasses

Woman wearing VR Glasses

 

How 360 Degree Videos are being created ?

There are several ways to create a 360 degree video. One of them is using a camera rig like capture rig(ODYSSEY) or using a 360 degree camera like Ricoh Theta S, Kodak SP360, etc.

Gopro capture rig

ODYSSEY – Capture Rig

 

Ricoh Theta S

Ricoh Theta S

Here are some details, for instance think Ricoh Theta S. There is a wide angle fish eye camera on each side. It stitches each camera view into one view.

Fish Eye views stitched together

Dual Fish Eye

Then it projects fish eye views to Equirectangular. (This projection is generally done within the camera or with a software).

Fisheye views projected to equirectangular

Equirectangular Projection

The rest is same as for the ordinary videos. As a result there will be 360 degree video that can be played in 360 degree supported video players. And it is time to show how to play 360 degree video on web.

How to Play 360 Degree Video ?

We are going to use videojs player and videojs-panorama plugin to play 360 degree video. Firstly, download videojs-panorama plugin and extract it to a folder in your web server. And it is time to start coding.

Add videojs files to your page as follows

 <!-- video.js 5 -->
 <link href="http://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
 <script src="http://vjs.zencdn.net/5.19/video.js"></script>

Add three.js after videojs script

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js"></script>

Add videojs-panorama scripts

<link href="//path/to/videojs-panorama.min.css" rel="stylesheet">
<script src="//path/to/videojs-panorama.v5.min.js"></script>

Add video tag

<video id="videojs-panorama-player" class="video-js vjs-default-skin" 
    crossorigin="anonymous" poster="assets/poster.jpg" controls="controls" 
    width="640" height="480">
<source src="https://mekya.github.io/web_test/paragliding_360.mp4" type="video/mp4" />
</video>

Setup player

<script>
var player = window.player = videojs('videojs-panorama-player', {}, function () {});
player.panorama({
    clickAndDrag: true,
    callback: function () {
      player.play();
    }
});
</script>

The result

How to Play Live 360 Degree Video ?

Playing live videos in videojs can be done via videojs-contrib-hls HLS plugin. Fortunately, most of the things are same as playing VoD file, there are only two things we just need to do.

Add video-contrib-hls after including video.js file

 <!-- video.js 5 -->
 <link href="http://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
 <script src="http://vjs.zencdn.net/5.19/video.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.0/videojs-contrib-hls.min.js" ></script>

Change video URL from mp4 to m3u8

<video id="videojs-panorama-player" class="video-js vjs-default-skin" 
    crossorigin="anonymous" poster="assets/poster.jpg" controls="controls" 
    width="640" height="480">
<source src="https://mekya.github.io/web_test/paragliding_360.m3u8" type="application/x-mpegURL" />
</video>

And here is the result*

*HLS is a format that can play live or VoD streams. There is no difference that effects users between playing VoD or Live video.

As a result, we should say that Ant Media Server support Live or VoD 360 Degree Video, moreover it also supports adaptive streaming for 360 Degree Videos as well.

Categories: Tutorial