Hosting 360° Presentation on your own server

To host presentations from your own server you need:

  • access to your server (to copy files and configure HTTP server)
  • your own copy of ORBITVU VIEWER (you have to buy the license or use the ORBITVU VIEWER Free360)
  • 360° presentations
  • some technical knowledge on HTML and server administration
  • you have to understand what is ORBITVU PRESENTATION and what is ORBITVU VIEWER.

Deployment

  • VIEWER
    • Copy ORBITVU VIEWER to your server (copy orbitvu12/ folder)
    • Configure your web server to serve files from orbitvu12/ directory (make sure these are publicly accessible under some URL, e.g.: http://yourdomain.com/orbitvu12/)
  • Presentations
    • Copy Presentations to your server (usually you'll use some FTP client)
    • Configure your web server to serve presentation files under some publicly accessible URLs, e.g.: http://yourdomain.com/presentations/
  • Server configuration
    • Add Access-Control-Allow-Origin *; header to both VIEWER and Presentations URLs to avoid possible CORS (Cross-origin resource sharing) issues
    • Add crossdomain.xml file to the domain used to serve presentation files in order to avoid Flash security issues, e.g. https://mydomain.com/crossdomain.xml
  • Coding
    • Create web pages that are using your ORBITVU VIEWER and your presentations URLs (see below for details)

You might also want to get and configure SSL certificate for your domain which is required e.g. if you'll want to add Facebook integration.

Web page coding

  • Load ORBITVU VIEWER helper scripts
    You can add scripts to the <head> section of the page.
<script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>
  • Create container element for the presentation
    Create a container element that your presentation will be inserted to. It is necessary to set the unique id for this container.
<div id="presentation1-container"></div>

If you want to have multiple presentations at your page then just create container with unique id for each of these

  • Initialize presentation
    The last step is to call JavaScript function inject_orbitvu that will inject the presentation into the container.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script type="text/javascript">
    inject_orbitvu(
        'presentation1-container',
        'http://yourdomain.com/orbitvu12/orbitvuer12.swf',
        'http://yourdomain.com/orbitvu12/expressInstall.swf',
        {
            ovus_folder: "http://yourdomain.com/presentations/presentation1/",
            content2: 'yes',
            width: "500",
            height: "400"
        });
</script>

Line 3:

id of the container element

Lines 4-5:

URLs to ORBITVU VIEWER files (hosted at your server)

Line 7:

URL to the presentation directory (hosted at your server)

Line 8:

Set to yes if there is content2.xml file in your presentation’s directory, otherwise set to no or remove

Line 9-10:

Other ORBITVU VIEWER parameters. For more see parameters reference.

Helper script has to be loaded BEFORE you call inject_orbitvu

If you have multiple presentations at your page then you need to call inject_orbitvu for each of them

You might want to call inject_orbitvu inside onready event handler

Complete example

Example uses jQuery to defer JavaScript execution on page load

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

        <script type="text/javascript">
            $(function() {
                inject_orbitvu(
                  'presentation1-container',
                  'http://yourdomain.com/orbitvu12/orbitvuer12.swf',
                  'http://yourdomain.com/orbitvu12/expressInstall.swf',
                  {
                      ovus_folder: "http://yourdomain.com/presentations/presentation1/",
                      content2: "yes",
                      width: "500",
                      height: "400"
                  });
            });
        </script>
    </head>
    <body>
        <h1>Some text</h1>

        <div id="presentation1-container"></div>
    </body>
</html>

Take care of setting proper DOCTYPE for your page especially for Internet Explorer