Phereo Photo Player

Phereo Photo Player

Oct 16, 2012

Phereo webservice offers a nice way to share stereoscopic pictures to friends and embed them on other sites. This requires the original picture to be uploaded to the Phereo servers. But sometimes you might want to have a great 3d photo viewer on your website with original pictures being stored locally. In this case Phereo Photo Player is the solution. This way you can keep images on your server, and use Photo Player for displaying them on a website. In this article we’ll go through the installation process, as well as the overview of the player script.

If you want to skip everything and try how it looks like, here it is:

http://www.stereofinland.com/player

Live demo of the Player.

Phereo Photo Player is a paid solution. You will need to register on http://photoplayer.phereo.com in order to get access to the subscription plans.

Here you’ll have to generate a unique consumer key and secret token, later used on your site.

Payment plans are depending on the amount of impressions per month.

You will also get usage reports in XML and CSV formats when the player is live.

Next step – preparing the stereoscopic content. Easiest way to do it is with Phereoshop Pro app.

Phereoshop let’s you export groups of 3d pictures directly for the Photo Player script.

You can also embed a stereoscopic watermark on exported images. What you will get on the output is this:

List of images in three different resolutions and two different stereoscopic formats – side-by-side and anaglyph.

Next step is to add Photo Player code to your webpage. PHP support is required on a server side. Here is a code for my test page.

<?php

require($_SERVER['DOCUMENT_ROOT'].'/player/php/phereo.php');

// Images directory
$IMAGES_BASE_URL = 'http://stereofinland.com/player/hki3d-content/';
// User login
$username 	= '[your username code]';
// User password
$secret_key 	= '[your secret token]';
// Generating secret key
$password 	= phereo_player_generate_password($secret_key);

// Images array for display in the player
$images = array(
	$IMAGES_BASE_URL.'1_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'2_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'3_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'4_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'5_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'6_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'7_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'8_hki3d.%size%.%mode%',
	$IMAGES_BASE_URL.'9_hki3d.%size%.%mode%',
);

// Image default mode
$mode 		= 'sidebyside';
$params 	= json_encode(array(
            'username' 	=> $username,
            'password' 	=> $password,
            'images'		=> $images,
            'mode'			=> $mode,
            'modes'			=> array('nvidia', 'anaglyph', 'sidebyside', 'wiggle', 'mono'),
));

?>

<!DOCTYPE html>
<html>
<head>
	<title>StereoFinland player</title>
<link rel="stylesheet" href="/player/css/phereo-photoplayer.css" /> 
<link href='http://fonts.googleapis.com/css?family=Scada&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body style="background-color: #111; font-family: 'Scada', sans-serif; color: #AAA;">
    <div style="width: 100%; text-align: center;">
        <div>
            <div id="player" style="width: 800px; height: 400px; display: inline-block; margin-top: 80px;"></div>
        </div>
        <div>
            <div style="display: inline-block; margin-top: 30px;">
                Try the full screen mode
            </div>
        </div>
        <div>
            <div style="display: inline-block; margin-top: 30px; color: #555;">
                Powered by <a href="http://photoplayer.phereo.com/" target=_blank>Phereo</a> tech
            </div>
        </div>
    </div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="/player/js/jquery.ba-postmessage.min.js"></script>
        <script src="/player/js/class.js"></script>
        <script src="/player/js/jquery.phereo-photoplayer.js"></script>
		
        <script type="text/javascript">
            $("#player").phereoPlayer(<?php echo $params ?>);
        </script>
</body>
</html>

The idea is that you specify image names included in the slideshow, as well as your user token and secret keys. After that if you run this php file on a server, you should get something like this:

At this point you can upload all the content to your server. Here is how my folder structure looks like on the server:

Check out the live demo page here: http://stereofinland.com/player

In my opinion, best way to watch photos is on full screen with NVidia 3D Vision mode on. It is fully supported in-browser by Phereo Photo Player, in addition to side-by-side, anaglyph and wiggle formats.

Alternatives

There are couple of other alternatives to embed your pictures on site.

proggies2go: http://www.proggies2go.com/
Flash based solution to display stereoscopic images and videos on your site. Latest news claims that this tech will be used to release Pirahna 3D movie on Facebook.

HTML5 Photo Viewer by Masuji Suto
Here is an example gallery: http://www.dddphotography.com/Macro/MacroGallery.htm?id=1

From the creator of Stereo Photomaker, here is a web viewer for stereoscopic photos. I did quite a bit of googling, but couldn’t find an official page for this project. It is probably somewhere here on the site of the creator: http://www.stereomaker.net/eng/index.html

HTML5 Photo Viewer by Yury Golubinsky
http://urixblog.com/en/html5-stereo-viewer-en/

Official press release

Moscow, Russia – October 16, 2012 – Phereo Ltd. (Phereo), a company at the forefront of 3D
technology, announces a new way to host 3D photos on the web: Phereo 3D Photo Player.

Web editors and content managers can now use Phereo technology to embed their own 3D images
on their website. Phereo’s 3D Photo Player gives people complete control over their own images,
allowing users to feature and host their own images while retaining copyright and greater control
over privacy.

Before Phereo 3D Photo Player, users wanting to employ Phereo 3D technology had to upload their
images to phereo.com, where images are publicly viewable, and where users confer some rights to
Phereo, according to their terms of service. Now web editors and content managers can retain full
rights to their photography and manage their content according to their own policy.

Phereo 3D Photo Player gives users greater flexibility and freedom to share 3D images, using
Phereo’s unparalleled 3D photo technology. Users can embed 3D pictures on the web in all popular
stereo modes, including NVIDIA 3D Vision, 3DTV and Anaglyph. Support for NVIDIA 3D Vision is
unique – and follows Phereo and NVIDIA’s partnering on the NVIDIA 3D Vision Live website.

Phereo’s 3D Photo Player is available for commercial use, with price plans according to page views.
The player supports all popular web browsers.

Explore pricing plans and download the player: http://photoplayer.phereo.com

About Phereo

Phereo specializes in stereo image processing and developing new 3D technologies for the web,
mobile devices and home entertainment systems. Their 3D photo sharing service phereo.com
provides a space for people to share stereo photos with their friends and explore 3D images in
multiple stereo modes. Thanks to phereo.com millions of people are experiencing a thrilling new
way to look at our world.

In addition to 3D technologies for the web, Phereo has developed an application for Samsung 3D TVs which brings 3D content from phereo.com to viewer’s home TV screens.

Email: contact@phereo.com

Google ReaderFacebookDeliciousGoogle GmailTwitterLiveJournalShare