HTML5 Stereo Viewer

This post is also available in: English

  1. Overview
  2. Sources
  3. Howtos
  4. Examples
  5. Known bugs
  6. Changes history

Overview

This project is a Javascript code that allows you to make a slideshow to view stereo-images (stereo-pairs for cross eyed or parallel viewing methods) with different methods (mono, cross eyed and parallel, different anaglyphs for Red-Cyan and Green-Magenta glasses, interlaced) as well as simple flat images. This code runs on all modern desktop and mobile browsers including IE 11+ and Mobile Safari and except Opera Mini.

desktop browser screnshots:

HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot

iPhone screenshots:

HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot

iPad screenshots:

HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot

Sources

https://github.com/urix/HTML5-Stereo-Viewer
git@github.com:urix/HTML5-Stereo-Viewer.git

How to attach this script to you web page

You need to place a webpage and all stereo images to the same web site. stereoh5.js file you can place anywhere and call it anyhow you like.
Insert this code somewhere into your web page (choose a code with a button or with an image):

<script type="application/x-javascript" src="stereoh5.js"> </script>
<input type="button"
   value="Run Stereo Viewer"
   onclick="stereoViewerOpen(5, false, 1, true, 'alt', 'stereoRL');" />
<img src="picture.jpg"
   style="cursor:pointer;"
   onclick="stereoViewerOpen(5, false, 1, true, 'alt', 'stereoRL');" />

<img src="s-a.jpg" class="anaglyph" alt="anaglyph source, Toys" />
<img src="s-f.jpg" class="flat" alt="flat source, Toys" />
<img src="s-lr.jpg" class="stereoLR" alt="Left-Right stereo pair source, Toys" />
<img src="s-rl.jpg" class="stereoRL" alt="Right-Left stereo pair source, Toys" />
<img src="s-rl5.jpg" class="stereo" alt="Right-Left stereo pair source source, Moscow, Russia" />
<img src="s-f2.jpg" class="some_other_class" alt="image not for slideshow" />
<img src="s-f3.jpg" alt="image not for slideshow" />

Script searches for the images with specific classes. Such method allows you to define image source kind:
anaglyph – Ready anaglyph image and shows as it is
flat – Flat image with only one point of view and shows as it is
stereoLR – image contains stereo pair e.g. two views for the left and right eyes side by side. Left part is for the left eye
stereoRL – image contains stereo pair e.g. two views for the left and right eyes side by side. Left part is for the right eye
stereo – image type defines by “Type” parameter

There is only one function you need to use: stereoViewerOpen. It has 6 parameters that allows you to customize initial behavior of the slideshow:
Mode – initial stereo mode (0..11). Default: 5. User can change this mode by pressing one of the number on the keyboard or by choosing it in Options
Swap – swap left and right sides (true, false). Default: false. Try not to use this parameter as it can misleading user. Set the correct images class‘s instead. User can change this parameter in Options
BGColor – backgroung color (0,1,2) for Black, Gray and White. User can change this color in Options
Caption – show captions (true, false). User can change this parameter in Options
CaptionSrc – caption text source name (“alt”, “title”). User can’t change this parameter. Choose “alt” or “title” parameter of the img tag and place descriptions of each image there
Type – image type for images with class=”stereo” (“anaglyph”, “flat”, “stereoLR”, “stereoRL”, “”). The value “” corresponds to “stereoRL”

Examples

Live examples of the code above. Click button below to start slideshow:


Navigation is pretty simple: Left, Up, Down and Right Arrows on the keyboard or by clicking on the left or right thirds of the slideshow area. Click in the middle to view Options and help panels. Press Esc key to close slideshow.

Images used in this demonstration:

Left-Right stereo pair source, Toys Right-Left stereo pair source, Toys anaglyph source, Toys flat source, Toys Right-Left stereo pair source source, St. Basil's Cathedral, Moscow, Russia Right-Left stereo pair source source, St. Basil's Cathedral, Moscow, Russia Right-Left stereo pair source source, Yauza river, Moscow, Russia Right-Left stereo pair source source, Moscow, Russia Right-Left stereo pair source source, forrest at Arkhangelsk region, Russia Right-Left stereo pair source source, at concert image not for slideshow image not for slideshow

Real Life Examples

This blog: urixblog.com
стереофотография.рф: стереофотография.рф

Known bugs and limitations

  1. current code does not works in Internet Explorer including latest 9 version and in Opera Mini
  2. try to unzoom webpage to its fool width and relaunch Slideshow if in Mobile Safari you’l notice some strange behavior
  3. anaglyph and interlaced modes works only with images from the same origin as original web page (because of: http://dev.w3.org/html5/spec/the-canvas-element.html#security-with-canvas-elements) i.e. stereo images and your web page mast be on the same web site or it doesn’t work
  4. slow loaded images doesn’t draw at the end
  5. incorrect scaling on some web pages in Mobile Safari
  6. “Options div” blurred on some web pages in Mobile Safari

Changes history

Follow @html5stereo on twitter to track new versions

ver 1.6 (2014.01.30)

  1. fixed wave of errors in Console after onMouseWheel

ver 1.5 (2013.01.13)

  1. cookies are now global (fixed bug with saving options for only current page)
  2. fixed bug with incorrect first line in interlaced mode
  3. added shortcut “s” for Swap

ver 1.4 (2012.11.09)

  1. fixed bug with not working onload callback for images
  2. fixed bug with drawing captions when they are absent
  3. fixed Left and Right only modes
  4. showing help on first start on desktop browsers and iPad

ver 1.3 (2011.09.30)

  1. Green-Magenta glasses support
  2. Increased drawing speed

ver 1.2 (2011.07.15)

  1. saving viewing Mode to cookies

ver 1.1 (2011.07.03)

  1. “IE is not supported” text added
  2. “Half Color Anaglyph” mode added
  3. Mode selection changed from “radio buttons” to “drop down list” for all platforms
  4. Vertical interlacing mode added

ver 1.0 (2011.06.28)

  1. first version
  • Jack

    I have not tried this viewer yet, but it looks really nice. A couple of
    quick suggestions:

    (1) make it so that the slideshow can be seen by either clicking on the left/right OR
    using the arrow keys

    (2) allow the use of .MPO files when showing stereo images (.MPO files are stored on
    the Fujifilm 3D camera, for example). The .MPO file contains 2 JPG images.

    (3) allow resizing of the image by the user (especially useful for divergent viewing)

    (4) allow the user to specify (via a web page input) which method they prefer
    (left-right, right-left, anaglyph, etc)

    • urix

      (1) and (4) are already done. Why don’t you try it first?

      (2) I don’t have plans to support mpo files because there is no any web browser or operating system that supports this format. Decoding this format by myself on JavaScript is too hard for me now

      (3) in plans

  • Privet!
    It works fine with Zalman M220W and OWB (WebKit).
    But an anaglyph source will not interlaced, right?

    Thanks for your efforts,
    Stefan

    • urix

      Yes, you right. I don’t know how to decode anaglyph source into separate left and right parts

  • David M

    Wow, this viewer looks very promising!
    Would it be possible to add some kind of ‘offset amount’ slider in the GUI? ..some of my images have too much separation.

    http://www.mwmediaservices.com/DM/stereo/

    also, apparently due to security issues, when running it locally, the anaglyph image works, but the stereoRL image does not?

    ..Really nice work!

    • urix

      Yes, it is possible to add offset control function, but i don’t know when i could do it.

      I know about security problems when running from the local disk. As for now I can suggest you to use Safari (Win/Mac), it is the only browser that allows to use images from the local disk.

  • David M

    @urix
    Thank You,
    I will continue to check your site for updates.

  • urix

    @David M
    try to decrease depth in that image (http://www.mwmediaservices.com/DM/stereo/) or try to make close objects in that image farther from viewer.

  • I think that is better about HTML5 Stereo Viewer by Masuji Suto |
    it is a BETA and the look have to improve.

    Check out an example: http://bit.ly/PLXjOo

    and leave your feedback.
    Cheers

  • Alexey

    urix :
    (2) I don’t have plans to support mpo files because there is no any web browser or operating system that supports this format. Decoding this format by myself on JavaScript is too hard for me now

    Actually, there is a 3DS Browser on the Nintendo 3DS game console and it is designed to work with MPO images. Usually it is organized as a page with 2D thumbnails that links to MPO images. Then I click on link then 3D image is opened on the 3D screen of the console and I can see It without glasses or crossing my eyes. Sometimes I download your cross-eyed images and convert them to MPO to watch on 3DS. It is very cool, but needs many manipulations for downloading individual files. It will be very nice to have such MPO gallery on your web-site. :)

    Anyway, I can see your cross-eyed photos very well and I thank you for them. They are very interesting. :)

  • rahul

    How to play video using this?

    • urix

      Only pictures