This is a simple demo where you can embed an OpenVidu application inside of an iframe. The embedded application will be openvidu-hello-world tutorial, so it is highly recommended to complete openvidu-hello-world tutorial first.
Running this tutorial 🔗
To run the tutorial you need the three components stated in OpenVidu application architecture: an OpenVidu deployment, your server application and your client application. In this order:
1. Run OpenVidu deployment 🔗
Using Docker Engine:
# WARNING: this container is not suitable for production deployments of OpenVidu # Visit https://docs.openvidu.io/en/stable/deployment docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-dev:2.29.0
2. Run your preferred server application sample 🔗
For more information visit Application server.
3. Run the client application tutorial 🔗
You will need some kind of http web server installed in your development computer to serve the tutorial. If you have Node.js installed, you can use http-server. It can be installed with:
npm install --location=global http-server
Run an OpenVidu tutorial to be embedded inside the iframe. We will use openvidu-hello-world:
# Using the same repository openvidu-tutorials from step 2 http-server openvidu-tutorials/openvidu-hello-world/web
Now open a different terminal and run the openvidu-iframe tutorial:
Finally go to
http://localhost:8081 to test the openvidu-iframe application. You will see the openvidu-hello-world app embedded in an iframe.
To test the application with other devices in your network, visit this FAQ. In this case, make sure you change
srcproperty of the
<iframe>element in index.html file to this value:
X.X.X.Xthe local IP of your workstation). In this way the inner application will be properly loaded by the iframe application through the proxy.
Understanding the code 🔗
First of all, let's clarify what an
iframe is. It is the representation of a nested browsing context, embedding another HTML page into the current one. Knowing that, the openvidu-iframe application is extremely simple. It has only 2 files:
style.css: some CSS classes to style index.html.
index.html: HTML code with the iframe. This iframe can potentially hold any OpenVidu web application (openvidu-hello-world in this tutorial).
Let's see how
index.html uses the iframe:
Adding the iframe to index.html 🔗
This iframe will embed the application served on
http://127.0.0.1:8080 (openvidu-hello-world in this tutorial).
<!-- Iframe where the application served on http://127.0.0.1:8080 will be embedded --> <iframe class="openvidu-iframe" title="OpenVidu Iframe" src="http://127.0.0.1:8080" allow="camera; microphone" ></iframe>
Allow media permission 🔗
We need to allow requests for media permissions within the iframe. Adding attribute
allow="camera; microphone" to the element is enough.