Embedded viewer | Help

What is it?
Simple example
Advanced usage

What is it?

The embedded viewer allows to display stereoscopic images with the viewer of Stereopix on your website. It is based on the integration of an iframe, like the YouTube player, but contrary to this one you can display your own images without publishing them on Stereopix*. It is also compatible with webpages in private access without compromising their security.

* Technical conditions apply, see the notice about CORS

Simple example

Let's illustrate the usage by a simple example of a common situation: showing a single image.

HTML code

We will display this photo published under the licence CC BY-NC-ND 2.0 by Jon Lewis on Flickr. The result is:

As you might see in the source of this page, the HTML code is this one:

You can copy and paste it on your website for a first test.

Explanation of the snippet

Understanding this piece of code is not necessary to use it, but here are its main parts.

We are using the iframe element which allows to include a webpage inside another page. The attribute title is used for accessibility.

The style defines the width (100% of the available space) and height (960 pixels) of the iframe, but these values will be limited by the size of the viewport so that it will always be displayable in its entirety (note that the viewer adapts itself to the available space inside the iframe). It also defines a border and clearance margin around the iframe for aesthetics.

Some permissions should be explicitly given to access some sensors and display controls, and are thus defined afterwards.

Finally, the attribute src gives the path to the loaded page, which contains the address of the viewer and the address of the image passed to it, encoded to form a valid URL.

Your image

To use your own image, you have to use the precedent snippet and change the relevant part of the src attribute. You just have to replace the value of the q parameter with the address of the image. Notice that this address has to be encoded to form a valid URL and the image should be served in HTTPS.

You can use the following form to encode it:

The metadata of the image are not parsed and the image is assumed to be stored in side-by-side format for parallel view. If you have a crossed-view image, you can postfix the URL with ,@cross in the form.

Important notice about CORS

If you are sure that the address you provided is referring to an actual image file (not a webpage) and that it is served in HTTPS, but have a loading error, the browser may block it.

Cross-origin resource sharing (CORS) is a security mechanism implemented in modern browsers. In particular, when a site wants to load a resource from another domain, the browser asks the server serving the resource if it is allowed. Therefore, you have to use a server which actively allows your images to be loaded externally (image hosting services, such as Flickr or Imgur, allow it).

See some solutions to enable it on your server in the advanced usage page.

Advanced usage

After this simple example, you may want to display a list of photos, get information from the viewer or send it commands. These are advanced usage described in a dedicated page.

See Advanced usage page.