Example Zappar Player¶

Zappar is a development platform for creating web-based AR content. Zappar can be deployed on any platform that supports WebAR or WebVR.

To use the HoloStream player in Zappar scenes, we support both A-Frame (external link) and Three.js (external link). Refer to the Three.js (external link) and HoloStream API documentation for detail on individual functions and components.

You can download the latest Zappar example project from the Resources and Downloads page.

The zip folder contains two subfolders: one for Three.js, and another for A-Frame. These folders contain a minimal scene configured to play HoloStream content in Zappar using each of those frameworks.

Getting Started¶

You can download the sample code and extract one of the minimal scenes under the /zappar directory. There, you will find instructions on how to setup your local development environment. This document contains steps to get started on your own HoloStream AR experience and an overview of the Zappar HoloStream projects.

Acquiring your HoloStream .mpd URL¶

The first step in setting up your Zappar project is to get your HoloStream .mpd URL. If you have one already, you can continue to the next step. If you don’t yet have one, please take a look at the Upload to HoloStream section of the docs for instructions on exporting your HoloEdit project to HoloStream.

Reviewing the ThreeJS Zappar scene¶

In the Zappar threejs directory, you can access and edit the source code of the ThreeJS project.

In the index.html file, HoloStream and Zappar tags and external scripts are initialized. The HoloStream API is imported in a <script> tag.

In the index.js file is where all the magic happens. The source code contains numerous descriptions of each code block for readability. This is where the ThreeJS scene is configured, along with a camera and several entities. The HoloStream player is added to the scene and the .mpd URL to the HoloStream Clip.

To change the HoloStream clip, replace the default URL (“https://holostream-dev.arcturus.studio/media/23f517e8-a10e-48ae-bc76-8ccde959937d/stream/dash/manifest.mpd”) With the URL for your HoloStream clip.

```important::

    Be sure to use the URL ending in .mpd, and not a HoloStream preview URL ending in the GUID for a HoloStream clip.

Reviewing the A-Frame Zappar scene¶

In the Zappar a-frame directory, you can access and edit the source code of the A-Frame project.

In the index.html file, HoloStream and Zappar tags and external scripts are initialized. The HoloStream API is imported in a <script> tag and the relevant a-frame-entities are defined. The HoloStream player is added to the scene and the .mpd URL to the HoloStream Clip.

In the index.js file, new a-frame component and entity are configured for HoloStream. The source code contains numerous descriptions of each code block for readability. This is where the scene is configured, along with a camera and several entities.

To change the HoloStream clip, replace the default URL (“https://holostream-dev.arcturus.studio/media/23f517e8-a10e-48ae-bc76-8ccde959937d/stream/dash/manifest.mpd”) With the URL for your HoloStream clip.

```important::

    Be sure to use the URL ending in .mpd, and not a HoloStream preview URL ending in the GUID for a HoloStream clip.

Previewing your Project¶

Due to browser restrictions surrounding use of the camera, you must use HTTPS to access the HTML files, even if doing so locally from your computer. You can use the ZapWorks command-line tool to serve a folder over HTTPS for access on your local computer, like this:

zapworks serve .

The command also lets you serve the folder for access by other devices on your local network, like this:

zapworks serve . --lan

Once this is running, open the link that’s output on the console. If you’d like to try on a mobile device, ensure it’s on the same local network as your computer, then visit the appropriate link in the console output.

You should now see your HoloStream clip displayed.

For further information on the deployment of Zappar projects, please take a look at the SDK documentation.

Controlling the Zappar project¶

A HoloStream instance is configured and created, and the HoloStream mesh is drawn in the Zappar scene. The rest of the component’s logic is general Zappar functionality.

Initializing a HoloStream Instance¶

    const holoStreamOptions = {
      debugEnabled: false,
      targetCanvasID: '',
      threeScene: this.el.sceneEl.object3D,
      threeCamera: cameraElement.object3D,
      threeRenderer: this.el.sceneEl.renderer,
      hideUI: true,
      overrideRender: true,
      showPlayButtonOnLoadingScreen: false,
    }

    this.holoStream = new HoloStream(holoStreamOptions)
    this.holoStream.openURL(this.data.url)

Further Learning¶

These were the basics of using HoloStream clip with Zappar. For more information, reference the HoloStream API documentation, along with the Zappar SDK documentation, A-Frame, and Three.js documentation.

Learning