Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 9

We have two methods for integrating Pixel streaming into a website:

  1. iframe

  2. Streaming UI

Method 1 : iframe based implementation

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Code Block
<iframe
  allow="camera;microphone"
  style="visibility: hidden"
  id="iframe_1"
  src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-iframe-Demo"
  width="100%"
  height="100%"
  allowfullscreen
>
</iframe>

You can add the streaming URL as src of the iframe to use pixel streaming inside your website.
Here are the options you have to add pixel streaming to your website through iframe:

  1. HTML - https://eagle3dstreaming.atlassian.net/l/cp/8oqjm1fh refer toCommunicate with your App from iframe - HTML

  2. ReactJS - refer to Communicate with your App from iframe - React

  3. Wordpress - refer to Integrating Streaming UI via iframe in a WordPress website

Method 2 : no-iframe solution (Streaming UI):

Streaming UI allows you more control over the HTML elements than using iframe. Currently, we have three options for integrating streaming UI into your website:

  1. HTML/ejs - https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/edit-v2/222593025 refer to Embed streaming into a webpage (no iframe solution)

  2. ReactJS - refer to Minimal initialization of pixel streaming to a react appReact App

  3. AngularJS - refer to Minimal initialization of pixel streaming Pixel Streaming to a angular appAngular App

Note:

Info

We currently support these frameworks. If you want to implement streaming UI in a different framework, you will need someone with knowledge of one of the frameworks that we support and also the framework that you want to use.

...