openvidu-iframe 🔗

Check it on GitHub

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" (being X.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.