Embed with an iframe

Put an Eagle 3D Streaming stream in an iframe on your page. The Control Panel gives you the script; you paste it in and talk to the frame with messages.

The examples here are plain HTML, and the approach is identical in React, Angular, Vue or anything else — an iframe is an iframe.

Embed it

  1. Copy the iframe script from the Control Panel

    Choose the app, choose a configuration, and copy the streaming iframe script. It already contains the URL for that app and configuration, so there is nothing to assemble by hand.

  2. Paste it into your page

    <html>
  <head><title>Demo</title></head>
  <body>
    <div>
      <!-- the copied iframe script goes here -->
    </div>
  </body>
</html>

    The copied script already gives the iframe id="iframe_1", which everything else on this page uses to address the frame, and allowfullscreen, without which fullscreen does not work at all.

    If your app uses the microphone, add allow="microphone" to the tag yourself — the copied script does not include it, and without it the browser never offers the microphone to the frame. See choose the microphone.

Features API › Fullscreen: the same from your own page (iframe or Web SDK) or from your Unreal app, with demos and troubleshooting.

You will know it worked when

Your page shows the stream, and pressing play starts the app.

The five stages of a session

The frame tells your page how far along it is, which is what lets you build your own loading experience instead of the default one. Each stage arrives as a message you can switch on: 

case "stage1_inqueued":
  // your code here
  break;
StageMessageWhat has happened
1stage1_inqueuedThe viewer is queued for a machine. Your first loading screen belongs here. The message carries positionInQueue, for showing their place.
2 and 3stage2_deQueued, then stage3_slotOccupiedSent together, one straight after the other: the app is running and the stream is being connected. Treat them as one moment.
4stage4_playBtnShowedUpReady to play. The browser is waiting for a click before it will start video.
5stage5_playBtnPressedThe viewer pressed play; the stream is beginning.

Talking to the app

Messages go to the frame with postMessage, and a message to your Unreal app must carry cmd: "sendDataToUE" or the frame will not forward it. See sending and receiving data for both directions, and controlling the stream for quality, resolution and fullscreen.

In this section

Last updated