SDK Quickstart

This page details the basic use of the SDK. For further details please read the Developer Documentation

Step 1: Linking to the SDK

The current Beta release of the SDK can be imported into your script(s) like any other Javascript file:

        <script src="https://media-player-sdk.aos.tv/app-sdk.js"></script>

Step 2: Accessing a Library

You can access your vehicles by authenticating against your specific libraries. You get access to it by passing your acces_token into the Library constructor:

Tokens have an expiration period of 1 hour, at which point the API will reject further requests until a new token is provided

          const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');

Step 3: Inspecting a Library

The Library is your collection of vehicles. You can request a Vehicle by passing a registration into the vehicle() method.

Note: Subsequent calls for a vehicle with the same Library Instance will return a cached vehicle for performance reasons

For example, we can begin inspecting vehicle GX66YCR1 as follows:

            const vehiclePromise = library.vehicle('GX66YCR1');

            vehiclePromise.then((result) => { ... }) }).catch((error) => {
              // Vehicle not found error code ==> VEHICLE_NOT_FOUND
              console.log(error);
           });

Observe that the request returned a promise rather than a concrete vehicle object

Example 1: Investigate a Vehicle

Using what we've learned from above we can fetch a vehicle. Feel free to modify the code 

  <div id="root"></div>
    
const rootDiv = document.getElementById('root');
const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
const vehiclePromise = library.vehicle('GX66YCR1');

vehiclePromise.then((result) => {
  const vehicle = result;
  const pre = document.createElement('pre');
  pre.textContent = JSON.stringify(vehicle.getOverview(), null, 2);
  rootDiv.appendChild(pre);
}).catch((error) => {
  // Vehicle not found error code ==> VEHICLE_NOT_FOUND
  console.log(error);
});
    
      /* Handle preview in large screen resolution */
      @media only screen and (min-width: 1768px) {
        #root {
          width: 80% !important;
        }
      }

Example 2: Get all thumbnails for a vehicle

Generally we would like to actually display the assets. Let's see how to display the vehicle thumbnails

<div id="root"></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const images = vehicle.getSmallImages();
    images.forEach((imgURL) => {
      const image = new Image();
      image.src = imgURL;
      rootDiv.appendChild(image);
    });
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

Example 3: Get all large images for a vehicle

Generally we would like to actually display the assets. Let's see how to display the vehicle large images

  <div class="container-fluid">
    <div class="row">
      <div id="root" class="col-lg-12 mt-3" ></div>
    </div>
  </div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const images = vehicle.getLargeImages();
    images.forEach((imgURL) => {
      const image = new Image();
      image.src = imgURL;
      image.style.width = '100%'
      rootDiv.appendChild(image);
    });
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

Example 4: Get Poster Image

Get Poster Image

  <div class="container-fluid">
    <div class="row">
      <div id="root" class="col-lg-12 mt-3" ></div>
    </div>
  </div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
  const vehicle = result;
    const imgURL = vehicle.getPoster()
    const image = new Image();
    image.src = imgURL;
    image.style.width = '100%';
    rootDiv.appendChild(image);
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

Example 5: Play a vehicle video

If the vehicle has one (or more) videos we can play them in the page

  <div class="container-fluid">
    <div class="row">
      <div id="root" class="col-lg-12 mt-3" ></div>
    </div>
  </div>

const rootDiv = document.getElementById('root');
const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
const vehiclePromise = library.vehicle('GX66YCR1');

vehiclePromise.then((result) => {
  const vehicle = result;
  const videoURL = vehicle.getVideo();
  const video = document.createElement('video');
  video.setAttribute('controls', 'controls');
  video.style.width = '100%';
  const source = document.createElement('source');
  source.src = videoURL;
  video.appendChild(source);
  rootDiv.appendChild(video);
}).catch((error) => {
  // Vehicle not found error code ==> VEHICLE_NOT_FOUND
  console.log(error);
});

Example 6: Tags

Finally we can start exploring some of the helper classes included in the SDK

  <div class="container-fluid">
    <div class="row">
      <div id="root" class="col-lg-12 mt-3" ></div>
    </div>
  </div>

  @keyframes glow_feature {
    from {
      box-shadow: 0 0 5px 0 limegreen;
    }
    to {
      box-shadow: 0 0 5px 5px limegreen;
    }
  }
  @keyframes glow_damage {
    from {
      box-shadow: 0 0 5px 0 red;
    }
    to {
      box-shadow: 0 0 5px 5px red;
    }
  }
      
  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');
    vehiclePromise.then((result) => {
      const vehicle = result;
      const tags = vehicle.getTags();
      const tagFactory = new AosSDK.TagFactory(tags);
      const images = vehicle.getLargeImages();
      let is_image_shown = false;

      images.forEach((imgURL) => {
        if (is_image_shown !== true) {
          const matchingTags = tagFactory.tagsBelongingTo(imgURL);
          if (matchingTags.length) {
            const image = new Image();
            image.src = imgURL;
            image.style.width = "100%";
            rootDiv.style.position = "relative";
            rootDiv.appendChild(image);
            matchingTags.forEach((tag) => {
              let bg_color = 'red';
              let animation = 'glow_damage';
              if (tag.context == 'feature') {
                bg_color = 'limegreen';
                animation = 'glow_feature'
              }
              var beacon = document.createElement('div');
              beacon.style.width = '3%';
              beacon.style.height = '5%';
              beacon.style.position = 'absolute';
              beacon.style.backgroundColor = bg_color;
              beacon.style.top = (tag.y * 100).toString()+'%';
              beacon.style.left = (tag.x * 100).toString()+'%';
              beacon.style.borderRadius = '50%';
              beacon.style.cursor = 'pointer';
              beacon.style.animation = animation+' 1s infinite alternate';
              beacon.dataset.bsToggle = "tooltip";
              beacon.title = '<b>'+tag.title+'</b><img src="'+tag.associatedMedia.small+'"/>';
              rootDiv.appendChild(beacon);
            });
            is_image_shown = true;
          }
        }
      });
    }).catch((error) => {
      // Vehicle not found error code ==> VEHICLE_NOT_FOUND
      console.log(error);
    });
    $(document).ready(function () {
      $('body').tooltip({
        selector: '[data-bs-toggle="tooltip"]',
        html: true
      });
    });

Example 7: Get Internal 360 View Image

Get Internal 360 View Image

<div id="root" class="col-lg-12 m-3" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const imgURL = vehicle.getInternalPanorama();
    rootDiv.style.height = '500px';
    rootDiv.style.backgroundImage = 'url('+imgURL+')';
    rootDiv.style.backgroundPosition = '0px 50%';
    rootDiv.style.cursor = 'move';
    $('#root').cyclotron();
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

Example 8: Get External 360 View Images

Get External 360 View Images

<div id="root" class="col-lg-12 m-3" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const images = vehicle.getAllThreeSixtyImages();
    rootDiv.dataset.imageList = '["'+images.join('","')+'"]';
    rootDiv.className = "cloudimage-360";
    window.CI360.init();
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

Example 10: Get Image Gallery Primary Slider

Get Image Gallery Primary Slider

      <div style="text-align: right">
      <button id="fullscreenBtn">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 49.89 49.89"><defs><style>.cls-1{opacity:0;}.cls-2{fill:#fff;}.cls-3{fill:#24336b;}</style></defs><title>1-full-screenSQTRANS</title><g id="Layer_2" data-name="Layer 2" class="cls-1"><rect class="cls-2" width="49.89" height="49.89"/></g><g id="Layer_1-2" data-name="Layer 1"><path class="cls-3" d="M29.46,4.72a1.36,1.36,0,0,0,1,.44h11L28,18.59a1.41,1.41,0,0,0-.44,1A1.49,1.49,0,0,0,29,21a1.4,1.4,0,0,0,1-.43L43.49,7.21v11a1.35,1.35,0,0,0,.43,1,1.32,1.32,0,0,0,1,.44,1.4,1.4,0,0,0,1-.44,1.43,1.43,0,0,0,.41-1V3.72A1.41,1.41,0,0,0,45,2.27H30.46a1.43,1.43,0,0,0-1,.45,1.41,1.41,0,0,0-.43,1,1.31,1.31,0,0,0,.43,1" transform="translate(0 0)"/><path class="cls-3" d="M43.92,30.66a1.36,1.36,0,0,0-.43,1v11L30.06,29.26a1.4,1.4,0,0,0-1-.43,1.49,1.49,0,0,0-1.44,1.43,1.41,1.41,0,0,0,.44,1L41.43,44.71h-11a1.35,1.35,0,0,0-1,.44,1.32,1.32,0,0,0-.44,1,1.56,1.56,0,0,0,1.44,1.47h14.5a1.41,1.41,0,0,0,1.5-1.46V31.65a1.42,1.42,0,0,0-.41-1,1.4,1.4,0,0,0-1-.44,1.32,1.32,0,0,0-1,.44" transform="translate(0 0)"/><path class="cls-3" d="M20.38,45.14a1.35,1.35,0,0,0-1-.44h-11L21.83,31.26a1.4,1.4,0,0,0,.44-1,1.49,1.49,0,0,0-1.45-1.45,1.4,1.4,0,0,0-1,.43L6.39,42.62v-11a1.36,1.36,0,0,0-.44-1,1.31,1.31,0,0,0-1-.44,1.41,1.41,0,0,0-1,.44,1.43,1.43,0,0,0-.41,1v14.5a1.4,1.4,0,0,0,1.29,1.49H19.38a1.43,1.43,0,0,0,1-.36,1.41,1.41,0,0,0,.43-1,1.31,1.31,0,0,0-.43-1" transform="translate(0 0)"/><path class="cls-3" d="M5.92,19.2a1.36,1.36,0,0,0,.43-1V7.2L19.78,20.68a1.41,1.41,0,0,0,1,.43,1.49,1.49,0,0,0,1.49-1.43,1.41,1.41,0,0,0-.44-1L8.39,5.16h11a1.36,1.36,0,0,0,1-.44,1.31,1.31,0,0,0,.43-1,1.41,1.41,0,0,0-.43-1,1.43,1.43,0,0,0-1-.45H4.91A1.4,1.4,0,0,0,3.46,3.62h0V18.18a1.43,1.43,0,0,0,.41,1,1.41,1.41,0,0,0,1,.44,1.32,1.32,0,0,0,1-.44" transform="translate(0 0)"/></g></svg>
      </button>
      </div>
      <div id="root"></div>
      
  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);

  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectPrimarySlider('root', vehicle.getLargeImages(), vehicle.getMediumImages(), vehicle.getTags(), vehicle.getGalleryOptions());
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

  // Fullscreen Gallery
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenGallery('root');
  }
  // To Exit Fullscreen Gallery
  // AosSDK.exitFullscreenGallery('root');

Example 11: Get Image Gallery Secondary Slider

Get Image Gallery Secondary Slider

      <div id="root"></div>
      
  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectSecondarySlider('root', vehicle.getLargeImages(), vehicle.getSmallImages(), vehicle.getTags(), vehicle.getGalleryOptions());
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

Example 12: Get Video Player

Get Video Player

      <div style="text-align: right">
        <button id="fullscreenBtn">
          <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 49.89 49.89"><defs><style>.cls-1{opacity:0;}.cls-2{fill:#fff;}.cls-3{fill:#24336b;}</style></defs><title>1-full-screenSQTRANS</title><g id="Layer_2" data-name="Layer 2" class="cls-1"><rect class="cls-2" width="49.89" height="49.89"/></g><g id="Layer_1-2" data-name="Layer 1"><path class="cls-3" d="M29.46,4.72a1.36,1.36,0,0,0,1,.44h11L28,18.59a1.41,1.41,0,0,0-.44,1A1.49,1.49,0,0,0,29,21a1.4,1.4,0,0,0,1-.43L43.49,7.21v11a1.35,1.35,0,0,0,.43,1,1.32,1.32,0,0,0,1,.44,1.4,1.4,0,0,0,1-.44,1.43,1.43,0,0,0,.41-1V3.72A1.41,1.41,0,0,0,45,2.27H30.46a1.43,1.43,0,0,0-1,.45,1.41,1.41,0,0,0-.43,1,1.31,1.31,0,0,0,.43,1" transform="translate(0 0)"/><path class="cls-3" d="M43.92,30.66a1.36,1.36,0,0,0-.43,1v11L30.06,29.26a1.4,1.4,0,0,0-1-.43,1.49,1.49,0,0,0-1.44,1.43,1.41,1.41,0,0,0,.44,1L41.43,44.71h-11a1.35,1.35,0,0,0-1,.44,1.32,1.32,0,0,0-.44,1,1.56,1.56,0,0,0,1.44,1.47h14.5a1.41,1.41,0,0,0,1.5-1.46V31.65a1.42,1.42,0,0,0-.41-1,1.4,1.4,0,0,0-1-.44,1.32,1.32,0,0,0-1,.44" transform="translate(0 0)"/><path class="cls-3" d="M20.38,45.14a1.35,1.35,0,0,0-1-.44h-11L21.83,31.26a1.4,1.4,0,0,0,.44-1,1.49,1.49,0,0,0-1.45-1.45,1.4,1.4,0,0,0-1,.43L6.39,42.62v-11a1.36,1.36,0,0,0-.44-1,1.31,1.31,0,0,0-1-.44,1.41,1.41,0,0,0-1,.44,1.43,1.43,0,0,0-.41,1v14.5a1.4,1.4,0,0,0,1.29,1.49H19.38a1.43,1.43,0,0,0,1-.36,1.41,1.41,0,0,0,.43-1,1.31,1.31,0,0,0-.43-1" transform="translate(0 0)"/><path class="cls-3" d="M5.92,19.2a1.36,1.36,0,0,0,.43-1V7.2L19.78,20.68a1.41,1.41,0,0,0,1,.43,1.49,1.49,0,0,0,1.49-1.43,1.41,1.41,0,0,0-.44-1L8.39,5.16h11a1.36,1.36,0,0,0,1-.44,1.31,1.31,0,0,0,.43-1,1.41,1.41,0,0,0-.43-1,1.43,1.43,0,0,0-1-.45H4.91A1.4,1.4,0,0,0,3.46,3.62h0V18.18a1.43,1.43,0,0,0,.41,1,1.41,1.41,0,0,0,1,.44,1.32,1.32,0,0,0,1-.44" transform="translate(0 0)"/></g></svg>
        </button>
      </div>
      <div id="root"></div>
      
  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectVideo('root', vehicle.getVideoPlaylist(), vehicle.getPoster(), vehicle.getVideoOptions());
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

  // Fullscreen Video Player
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenVideo('root');
  }
  // To Exit Fullscreen Video Player
  // AosSDK.exitFullscreenVideo('root');

Example 13: Get Spinner

Get Spinner

Example 13: Get Panorama

Get Panorama

      <div style="text-align: right">
        <button id="fullscreenBtn">
          <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 49.89 49.89"><defs><style>.cls-1{opacity:0;}.cls-2{fill:#fff;}.cls-3{fill:#24336b;}</style></defs><title>1-full-screenSQTRANS</title><g id="Layer_2" data-name="Layer 2" class="cls-1"><rect class="cls-2" width="49.89" height="49.89"/></g><g id="Layer_1-2" data-name="Layer 1"><path class="cls-3" d="M29.46,4.72a1.36,1.36,0,0,0,1,.44h11L28,18.59a1.41,1.41,0,0,0-.44,1A1.49,1.49,0,0,0,29,21a1.4,1.4,0,0,0,1-.43L43.49,7.21v11a1.35,1.35,0,0,0,.43,1,1.32,1.32,0,0,0,1,.44,1.4,1.4,0,0,0,1-.44,1.43,1.43,0,0,0,.41-1V3.72A1.41,1.41,0,0,0,45,2.27H30.46a1.43,1.43,0,0,0-1,.45,1.41,1.41,0,0,0-.43,1,1.31,1.31,0,0,0,.43,1" transform="translate(0 0)"/><path class="cls-3" d="M43.92,30.66a1.36,1.36,0,0,0-.43,1v11L30.06,29.26a1.4,1.4,0,0,0-1-.43,1.49,1.49,0,0,0-1.44,1.43,1.41,1.41,0,0,0,.44,1L41.43,44.71h-11a1.35,1.35,0,0,0-1,.44,1.32,1.32,0,0,0-.44,1,1.56,1.56,0,0,0,1.44,1.47h14.5a1.41,1.41,0,0,0,1.5-1.46V31.65a1.42,1.42,0,0,0-.41-1,1.4,1.4,0,0,0-1-.44,1.32,1.32,0,0,0-1,.44" transform="translate(0 0)"/><path class="cls-3" d="M20.38,45.14a1.35,1.35,0,0,0-1-.44h-11L21.83,31.26a1.4,1.4,0,0,0,.44-1,1.49,1.49,0,0,0-1.45-1.45,1.4,1.4,0,0,0-1,.43L6.39,42.62v-11a1.36,1.36,0,0,0-.44-1,1.31,1.31,0,0,0-1-.44,1.41,1.41,0,0,0-1,.44,1.43,1.43,0,0,0-.41,1v14.5a1.4,1.4,0,0,0,1.29,1.49H19.38a1.43,1.43,0,0,0,1-.36,1.41,1.41,0,0,0,.43-1,1.31,1.31,0,0,0-.43-1" transform="translate(0 0)"/><path class="cls-3" d="M5.92,19.2a1.36,1.36,0,0,0,.43-1V7.2L19.78,20.68a1.41,1.41,0,0,0,1,.43,1.49,1.49,0,0,0,1.49-1.43,1.41,1.41,0,0,0-.44-1L8.39,5.16h11a1.36,1.36,0,0,0,1-.44,1.31,1.31,0,0,0,.43-1,1.41,1.41,0,0,0-.43-1,1.43,1.43,0,0,0-1-.45H4.91A1.4,1.4,0,0,0,3.46,3.62h0V18.18a1.43,1.43,0,0,0,.41,1,1.41,1.41,0,0,0,1,.44,1.32,1.32,0,0,0,1-.44" transform="translate(0 0)"/></g></svg>
        </button>
      </div>
      <div id="root" style="width:100%;height:600px;" ></div>
      
  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectPanorama('root', vehicle.getInternalPanorama(), vehicle.getPanoramaOptions());
  }).catch((error) => {
    // Vehicle not found error code ==> VEHICLE_NOT_FOUND
    console.log(error);
  });

  // Fullscreen Panorama
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenPanorama('root');
  }
  // To Exit Fullscreen Panorama
  // AosSDK.exitFullscreenPanorama('root');