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 -b v2.18.0
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):
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.18.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:
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.