What is 360 Degree Video?

360 degree videos are videos that give you a cinematic experience and let you look in any direction you wish. Unlike traditional fixed-frame videos, which limit your view to wherever the camera is pointing, 360 degree videos offer a full 360º x 180º panoramic field of view placing you in the center of the action, completely surrounded by sights and sounds. 360 degree technology lets you look up, down, and all around so you can explore a scene from any perspective you choose.

 

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 affects 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