Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

This guide explains how to embed the Streampixel iframe into your frontend, handle input settings for seamless user interaction, and ensure compliance with autoplay policies. It also covers focus management when integrating custom UI controls.
1

Embed the iframe

Embed the Streampixel iframe into your frontend with the following configuration:
<iframe
  id="streamIframe"
  src="https://share.streampixel.io/project-id"
  allow="autoplay; fullscreen"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  style="border: none;">
</iframe>
Key attributes
  • src: Replace project-id with the actual ID of your Streampixel project.
  • allow="autoplay; fullscreen": Enables autoplay and fullscreen features.
  • allowfullscreen: Ensures the stream can enter fullscreen mode.
  • style: Customize the iframe’s appearance, such as width and height.
Always include allow="autoplay; fullscreen" to enable autoplay and fullscreen functionality.
2

Configure input settings for keyboard and mouse

To ensure the stream is fully interactive, handle input focus properly for keyboard and mouse inputs.Keyboard inputWhen users interact with the iframe, ensure it gains focus to capture keyboard input:
const streamIframe = document.getElementById('streamIframe');
streamIframe.addEventListener('click', () => {
  streamIframe.focus(); // Pass keyboard focus to the iframe on user interaction
});
Mouse inputMouse interactions typically work out of the box. Ensure the iframe is styled appropriately to cover the desired area.
3

Manage focus for custom UI controls

If your frontend includes buttons or controls outside the iframe (e.g., Mute, Unmute, or custom settings), clicking those controls shifts focus away from the iframe. To maintain seamless interaction with the stream, you must restore focus to the iframe after handling button clicks.Example: custom UI with focus restoration
<button onclick="muteStream()">Mute</button>

<iframe 
  id="streamIframe" 
  src="https://share.streampixel.io/project-id" 
  allow="autoplay; fullscreen">
</iframe>

<script>
  function muteStream() {
    const streamIframe = document.getElementById('streamIframe');
    streamIframe.contentWindow.postMessage({ message: 'muteAudio' }, '*');
    streamIframe.focus(); // Restore focus to the iframe
  }
</script>
Ensure the iframe regains focus after users interact with external buttons or controls. Use iframe.focus() after handling button clicks.

​
Next steps

Frontend and application communication

Send and receive messages between your frontend and the embedded stream.

Stream control commands

Control resolution, audio, and session state from your frontend.