```eval_rst
.. _Zappar:
```

# Example Zappar Player
[Zappar](https://www.zappar.com/) 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](https://aframe.io/docs/1.4.0/introduction/) (external link) and [Three.js](https://threejs.org/) (external link). Refer to the [Three.js](https://threejs.org/) (external link) and [HoloStream API](https://learn.arcturus.studio/docs/holostream/en/v2021.1/html/Holostream_API/api.html) documentation for detail on individual functions and components.

The HoloStream Player for Zappar can be downloaded here: [Zappar_HoloStream_2021.1.11](https://arcturus-share.s3.amazonaws.com/HoloStream/Zappar_HoloStream_2022.1.11.zip)

This 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.

<video width="100%" nocontrols autoplay loop onloadedmetadata="this.muted = true">
  <source src="../../../../shared/_images/Ewan_Zappar.webm" type="video/webm">
</video>


## 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](https://learn.arcturus.studio/docs/holostream/en/v2021.1/html/Exporting_HoloStreams/Uploading_From_HoloEdit.html) 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](https://learn.arcturus.studio/docs/holostream/en/v2021.1/html/HoloStream_Basics/HoloStream_Basics.html#manifest-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](https://learn.arcturus.studio/docs/holostream/en/v2021.1/html/HoloStream_Basics/HoloStream_Basics.html#manifest-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](https://www.npmjs.com/package/@zappar/zapworks-cli) 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](https://docs.zap.works/universal-ar/).


## 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](api) documentation, along with the [Zappar SDK documentation](https://docs.zap.works/universal-ar/), [A-Frame](https://aframe.io/docs/1.4.0/introduction/), and [Three.js](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) documentation.