Skip to main content

Configuring streams

After you’ve added a stream to your website, you can customize its appearance.

Positioning​

You can position a stream in 3D space with the position attribute. This attribute expects three numbers separated by spaces. Each number corresponds to the X, Y, and Z values of the point you’d like your stream to appear.

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Positions the stream in front of the camera -->
  <miris-stream uuid="ASSET_ID" position="0 0 -5">
</miris-scene>

Notice that the Z-value of the position is negative. This is because by default, the camera points down the negative Z-axis. Negative values will position the stream in front of the camera.

Try adjusting the position of your stream to find what looks best. The dimensions of some streams are quite large, so you may need a Z-value in the hundreds or even thousands for the best result.

Rotating​

You can also rotate a stream with the rotation attribute. Just like the position attribute, the rotation attribute expects three numbers separated by spaces. Each number corresponds to rotation about the X-, Y-, and Z-axis in radians.

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Rotates the stream 90º about the Y-axis -->
  <miris-stream uuid="ASSET_ID" rotation="0 1.571 0"></miris-stream>
</miris-scene>
tip

To convert degrees to radians, multiply the number of degrees by π and divide by 180. For example, 90º is about 1.571 radians.

Scaling​

Making a stream larger or smaller is also supported by using the scale attribute. Just like the position and rotation attributes, the scale attribute expects three numbers separated by spaces.

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Scales the stream to twice its original size -->
  <miris-stream uuid="ASSET_ID" scale="2 2 2"></miris-stream>
</miris-scene>

Adding controls​

To allow users to interact with your stream via the mouse or touch screen, simply add a controls attribute to the stream.

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Add controls to the stream -->
  <miris-stream uuid="ASSET_ID" controls></miris-stream>
</miris-scene>

The controls attribute currently only supports basic rotating the stream. For more advanced functionality such as panning and zooming, see

Disabling​

If you’d like to add a stream to your scene but you don’t need to begin streaming just yet, add a disabled attribute. This is useful for lazy loading.

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Disables the stream -->
  <miris-stream uuid="ASSET_ID" disabled></miris-stream>
</miris-scene>