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 🔗

1) Clone the repo:

git clone https://github.com/OpenVidu/openvidu-tutorials.git

2) You will need an http web server installed in your development computer to execute the tutorial. If you have node.js installed, you can use http-server to serve application files. It can be installed with:

npm install -g http-server

3) Run an OpenVidu tutorial (we will use openvidu-hello-world):

http-server openvidu-tutorials/openvidu-hello-world/web

4) OpenVidu Platform service must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need Docker CE):

# WARNING: this container is not suitable for production deployments of OpenVidu Platform
# Visit https://docs.openvidu.io/en/stable/deployment

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.16.0

5) Go to localhost:8080 to test the openvidu-hello-world app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of openvidu-server when you first try to join a video-call.

If you are using Windows, read this FAQ to properly run the tutorial

To learn some tips to develop with OpenVidu, check this FAQ

6) Open another terminal and run the openvidu-iframe tutorial:

http-server openvidu-tutorials/openvidu-iframe/web

7) Go to localhost:8081 to test the openvidu-iframe app once the server is running. You will can see the completely funcional openvidu-hello-world app embedded inside of an iframe.

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.