Embed Streaming within React Webpage Using no iframe Solution
In this document, we will guide you on how to embed streaming within your React webpage without using an iframe script.
To assist with this, we have provided a Node.js application that utilizes our Token API. You can find it in the following GitHub repository:
Follow the steps below:
Step 1. Clone the Repository
Run the following command to clone the specific branch directly:
git clone --branch reactJs https://github.com/e3ds/full-html-control.gitStep 2. Install Necessary Packages
Navigate into the cloned project folder and install dependencies:
npm installStep 3. Navigate to the cloned project folder and open the file server.js
Figure 1. Open server.js File
Step 4. Update the Required Information Inside server.js
apiKey: Your Streaming API Key - Get Streaming API Key
domain: If you are using production system then domain would be “connector.eagle3dstreaming.com“. If you are provided with a dedicated system, then domain would be the domain of that dedicated system.
clientUserName: Your username on the Eagle 3D Streaming Platform
appName: The name of the app you want to embed into your website (as listed on the Eagle 3D Streaming Platform)
configurationName: The name of the configuration you want to use for the app
Figure 2. Update Required Information
Figure 3. Information Updated
Step 5. Build the React Project
Run the following command to compile the React application:
npm run buildStep 6. Start the Server
Now, start the token server:
npm run runserverStep 7. Launch in Browser
Once the server is running, open your browser and visit:
http://localhost:3000If all information has been correctly configured, the session should start automatically.
Figure 4. http://localhost:3000
After few seconds the stream started
Figure 5. After few seconds the stream started
To learn how to communicate between your Unreal Engine app and the webpage (e.g., sending messages or triggering actions), please refer to the documentation here:
Communication Between Unreal App and Webpage
💬 Ask questions and help your peers Community Forum
📄 Need help? Contact Support
Facebook | GitHub | LinkedIn | YouTube