Embed with iframe

Overview

If you want a quick integration of a fully featured video conferencing/live streaming app inside your application within a day, iframe is the way to go.

Some of the benefits of iframe integration are:

You can have a fully-featured video conferencing/live streaming UI added to your web app with minimal development
You can customize to a greatest extent as per your requirements
You can use this in the framework you're already using in your app
Using an iframe you can embed the whole sample web app inside your UI wherever you want

Implementation

As discussed in the Build and deploy guide, you can fork and deploy our sample web app and use that URL in an iframe.


<iframe
    title="100ms-app"
    allow="camera *;microphone *;display-capture *"
    src="<your-deployed-url-here>"
    style="height: 900px; width: 900px;"
></iframe>

Adding and testing the iframe in a simple web app:

Create a HTML file in an editor, copy the below example code and paste in the file
Use the Room Id and role of one of the rooms from your Dashboard
Save the HTML and load it in your browser. You should now see the app in action.

Example


<html>
    <body>
        <iframe
            title="100ms-app"
            allow="camera *;microphone *;display-capture *"
            src="https://lambent-nougat-3c526c.netlify.app/633fcdd84208780bf665346a/host"
            style="height: 900px; width: 900px"
        ></iframe>
    </body>
</html>

"https://lambent-nougat-3c526c.netlify.app" - application URL
"633fcdd84208780bf665346a" - Room Id
"host" - role name

Build and Deploy HMSReactiveStore

Have a suggestion? Recommend changes ->