Introducing Kolor Eyes, an HTML5/WebGL player for 360° video by Yann Gilquin, developer
Wednesday 6 April 2011
Kolor Eyes video player
Kolor Eyes is a web video player designed to allow user to immerge himself into the scene during viewing. Video footage is in spherical format and consists in frames with fields of view of 360×180°. User can turn in every direction and zoom in order to position where he aims anytime. It’s now up to you to decide where to look at in the video.
Live version and demo video
You can try online version here.
Here is a demo video showing what is possible to do with Kolor Eyes. Remember to enable closed caption (CC button) to get live explanations.
Technologies behind Kolor Eyes
Kolor Eyes video player is based on 2 recent major technologies of the Internet:
- HTML5
Video content is broadcasted through a <video> tag which is part of HTML5 specification. Data decoding is done by the browser, without any need for some additional plug-in.
- WebGL
View frame is inside a <canvas> element with a 3D WebGL context. This brand new technology is specified by Khronos Group. It’s a set of graphical 3D features made available directly in the web page by the browser and taking advantage of the capacities of the graphical card.
No need for additional plug-in
As said earlier, the browser does give access to these technologies, thus user does not need to install any third party plug-in. All market leader browsers does not enable these technologies yet. Nevertheless, Firefox 4.0 or Chrome 10 do implement them and give the best user experiences with Kolor Eyes video player. Opera 11 will support it, and Safari enables it with a special setting. Khronos Group maintains a web page listing current available implementations of WebGL for every platform.
High level of integration
Proprietary technologies well deployed over the Internet today suffer of a lack of integration with web page content. Kolor Eyes video player breaks this statement offering new possibilities as it relies on standards. Player’s code runs directly into the browser and can access all enabled API. This allows web page developers to create better interaction between the player and online resources. We demonstrate this with snapshot feature in version 1.0.
Kolor Eyes video player features
A video player
Kolor Eyes is a video player. It has a complete set of common features: playback and audio settings control, preloading, stream quality selector, playlist, full windowed or reduced display modes. Fullscreen mode is reachable by a simple user action, depending on the browser. More features can be developed, 1.0 version embeds as an example of HTML5 capabilities a take snapshot button allowing to capture instant frame to save and share it wherever the user wants to. Kolor Eyes video player also enables camera autorotation.
Controls
| Different controls are available from right column sliding menus. They expose useful camera and view settings. Projection distance makes it possible to change distance to projection plane for pannini and little planet projection modes. |  |
| Camera has several settings allowing user to have a real custom experience. Zoom speed sets the zoom actions intensity and camera speed the repositioning velocity. Camera has a spring simulating physics when moving into the scene, to give user a strong natural feeling. Two important spring settings are exposed: damping and harshness. It’s also possible to set autorotation speed in degrees per second. Positive values makes it turn to the right and negative values to the left. | |
| All these controls are also reachable by presets assigned on projection mode change. When user selects a projection mode, some predefined settings are automatically applied to the view presenting what we think is the most interesting scene. Then it’s up to the user to modify them to create his own view. |
Projections
Kolor Eyes video player allows to set the projection mode. As any other controls, it’s available anytime during playing. Projection computation is done by graphical card and reaches a precision to the pixel. This means there is no distortion in image. 6 modes are today proposed by the player.
| Orthographic | |
 |
This projection mode shows the spherical video. This means fields of view of 360×180°. |
| Rectilinear | |
| This projection mode is a standard lens. It’s the default mode. |  |
| Pannini | |
 |
Pannini is a large field of view planar projection that allows to display large field of view while keeping lines straight. |
| Little planet | |
| Also called polar projection, everything is wrapped around a small ball. |  |
| Fisheye | |
 |
This mode corresponds to the projection given by a 180° fisheye lens. |
| Mirror ball | |
| If you had a perfect spherical mirror ball, you’ll get this view. |  |
More information
Kolor Eyes video player is at the moment at the demonstration level, and still evolving in our lab. If you’re interesting in this technology, in a futur product or if you wish to know more about this technology, please contact us with following form
Tags: 360 video
You can leave a response, or trackback from your own site.
February 25th, 2012 at 12:18 pm
I don’t think Flash is the one that requires a lot of computing power, it’s the fact of decompressing and decoding a very complex data in real time called “Digital Video”, Flash makes transparent the hardware calls implementation for the developers, with swf to html5 converter you will need to deal with conversion of flash to html5 players by rendering a lot of hardware engines, then multi-platform apps will be a true headache for the developers, the same problem than always: HTML hacks for each browser but with a more complex technology: HTML5
May 10th, 2011 at 9:29 am
Hi Garrett,
The only low-cost solution is currently to mount several GoPro cameras on a rig, and stitch the videos using a dedicated solution from Kolor.
Maybe other solutions will come out in the next few months.
May 7th, 2011 at 3:26 pm
The player is great, but I’d like to create the content and more information on the filming equipment required would help developers envision how they can use your player. The “immersive media” 360 camera is over $25,000 and they aren’t currently making them. Do you have other options because a still camera probably isn’t the tool used to capture 360 while moving.
April 25th, 2011 at 9:17 pm
what kind of hardware are you using to film such video?
April 19th, 2011 at 10:45 am
I am interested in your technology (Kolor Eyes)
April 17th, 2011 at 8:38 pm
I am interested in hearing more about this technology. We currently use Autopano Giga and Panotour and we are wanting to do the “street view” kind of thing you are doing here. What are the requirements and how do we get the photos to snap while driving?
Thank you in advance.