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, embedding room links as iframe is the way to go.

iFrame Basics

Embed role specific room links as iFrame - when you customise, fork and deploy our sample web app; create role specific custom room links to embed in your app. - alternatively, use Prebuilt room links that uses the sample web app fully featured video conferencing/live streaming UI embedded to your web app

Implementation

When customising and deploying our sample web app, you can create unique custom domain room links
- host : https://my.video.app/meeting/room-code
- guest : https://my.video.app/meeting/room-code

Here, room codes are unique role specific short-codes that helps generate room links.

Once you have created role specific room links for your deployed app, embed these links as iframe in your application


<html>
    <style>
        /* normalize css snippet */
        body {
            margin: 0;
        }
    </style>
    <body>
        <iframe
            title="100ms-app"
            allow="camera *;microphone *;display-capture *"
            src="https://`<your-subdomain>.app.100ms.live`/meeting/`<room-code>`"
            style="height: 100vh; width: 100%; border:0;"
        >
        </iframe>
    </body>
</html>

Embedding 100ms prebuilt links allows usage of query parameters like userId and name further documented here.

Svelte Quickstart Guide Get Room Code From Dashboard

Have a suggestion? Recommend changes ->