Basic Iframe Integeration

Learn how to integrate the Streampixel iframe into your frontend, manage keyboard and mouse inputs, and ensure smooth interaction.

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. Embedding the Iframe

To get started, 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. Input Settings for Keyboard and Mouse

To ensure the stream is fully interactive, handle input focus properly for keyboard and mouse inputs.

Keyboard Input

When 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 Input

Mouse interactions typically work out of the box. Ensure the iframe is styled appropriately to cover the desired area.

---

3. Focus Management 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.