@movable/studio-ar

Copyright Movable, Inc. All rights reserved.

Utilities for building augmented reality applications with Studio.

It includes a Studio AR app base class, which you can customize.

Installation

yarn add @movable/studio-ar

Usage

import ArApp from '@movable/studio-ar';
import Panel from '@movable/studio-ar/panel';

// Use these built-in panels
import { LoadingPanel, ReviewPanel, SharePanel, LandscapePanel, ErrorPanel, MobileFirstPanel } from '@movable/studio-ar/panels';

class VideoPanel extends Panel {
  render() {
    // runs once when the panel is first loaded
    // recommended to put your event handlers here
  }

  activate() {
    // runs every time you transition to the panel
  }

  deactivate() {
    // runs every time you transition away from the panel
  }
};

// You can override some functionality in a built-in panel. If you
// do this, just change the class name from `share-panel` to
// `my-share-panel`.

// class MySharePanel extends SharePanel {
//   render() {
//     super.render();
//     // extra behavior goes here
//   }
// }

class MyArApp extends ArApp {
  constructor() {
    super();

    // child constructor needs to define this.panels by calling
    // this.collectPanels() with a list of panels, and it needs
    // to define a VideoPanel class to be the main frame.

    this.panels = this.collectPanels([LoadingPanel, VideoPanel, ReviewPanel, MySharePanel, ErrorPanel, LandscapePanel, MobileFirstPanel]);
  }

  render() {
    // sets up analytics, rotation handling, etc.
    super.render();

    // do whatever custom stuff you want here
  }
}

export default MyArApp;