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 for each role in your room. For instance, custom room links for a self-hosted app with domain "my.video.app"
- 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>.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 Quickstart Guide

Have a suggestion? Recommend changes ->