openvidu-iframe 🔗
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.27.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:
http-server openvidu-tutorials/openvidu-iframe/web
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
src
property of the<iframe>
element in index.html file to this value:src="https://X.X.X.X/hello-world"
(beingX.X.X.X
the 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.