Cover for the App
Project Library Icon
8th Wall Project Library

A-Frame: HoloStream

This example illustrates how to integrate a HoloStream adaptive bitrate streaming hologram into an 8th Wall WebAR project.

LicenseMIT License

This example illustrates how to integrate a HoloStream adaptive bitrate streaming hologram into an 8th Wall WebAR project.

LicenseMIT License
assets/
LICENSE
README.md
app.js
body.html
head.html
holostream-component.js
index.css

A-Frame: HoloStream Hologram

HoloStream is an adaptive bitrate volumetric video streaming solution. This example illustrates how to integrate a volumetric video hosted by HoloStream into an 8th Wall WebAR project.

Interested in adding adaptive bitrate volumetric video streaming to your project? Reach out to Arcturus directly to get started using HoloStream.


Project Overview

In head.html, we add
<script src="https://static.holostream.arcturus.studio/release/2021.1.13/remote/HoloStream-2021.1.13.min.js"></script>
to download the latest version of the HoloStream player.

In body.html, we add the <holostream-hologram> primitive to our <a-scene> which has a few important parameters:

  • src: holostream asset path (Arcturus-supplied external cdn link)
  • size: starting size of hologram (default: 1)
  • touch-target-size: size of touch target cylinder: 'height radius' (default: '1.65 0.35')
  • touch-target-offset: offset of touch target cylinder: 'x z' (default: '0 0')
  • touch-target-visible: if true, show touch target for debugging (default: false)

holostream-component.js contains all the logic for the <holostream-hologram> primitive.

See HoloStream Documentation here.


This sample project was contributed by 8th Wall partner, Arcturus.

Visit URL

on a phone or tablet

or
  1. Open Camera
  2. Scan Code