On this page

Embed Video Calls in a Web Page

A working call inside your own page, from a test key to two people talking.

You need a test key (see Overview), a server that can make one HTTP call, and a web page.

1. Allow your page#

The call runs in an iframe on meet.respiresoft.com. Meet only lets your pages frame it. In the dashboard open your project, then Settings, and add your page's origin to Embed origins, for example https://app.acme.com or http://localhost:3000 while you build. https://*.acme.com covers every subdomain.

2. Make a room and a token on your server#

bash

export MEET_API_KEY=mk_test_xxxxxxxx

curl "https://meet.respiresoft.com/api/v1/rooms" \
  -H "Authorization: Bearer $MEET_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "quickstart-1042", "privacy": "private"}'

curl "https://meet.respiresoft.com/api/v1/rooms/quickstart-1042/tokens" \
  -H "Authorization: Bearer $MEET_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"user_id": "u-77", "name": "Ann", "role": "host", "ttl": 3600}'

The second answer has a token. Room names are unique across all of Meet, so use your own prefix. In real code your server makes this call when a user opens the meeting and sends the token to that user's browser. See Server quick start.

3a. Show it with the embed SDK#

html

<div id="meeting" style="height: 600px"></div>
<script src="https://unpkg.com/@respiresoft/meet-embed"></script>
<script>
  const call = Meet.embed('#meeting', {
    url: 'https://meet.respiresoft.com/r/quickstart-1042',
    token: 'PASTE_THE_MEETING_TOKEN',
  });
  call.on('joined', (e) => console.log('in the call as', e.participantId, e.role));
  call.on('left', (e) => console.log('left because', e.reason));
</script>

With a bundler use npm i @respiresoft/meet-embed and import { embed } from '@respiresoft/meet-embed'. The SDK is about 2 kB and has no dependencies. It sets the iframe's allow attributes for you and waits until the room is ready before it sends a command.

3b. Or use a plain iframe#

html

<iframe
  src="https://meet.respiresoft.com/r/quickstart-1042?token=PASTE_THE_MEETING_TOKEN&theme=light"
  allow="camera; microphone; display-capture; autoplay; fullscreen; clipboard-write; speaker-selection"
  style="width: 100%; height: 600px; border: 0"></iframe>

Without the allow list the browser blocks the camera and microphone inside the frame.

4. Drive the call from your page#

await call.setAudio(false);          // mute the microphone
await call.setCaptions(true);        // live captions on
call.on('chat-message', (m) => console.log(m.name, m.text));
call.on('caption', (c) => console.log(c.text, c.final));
await call.leave();
call.destroy();

The full list is in Embed SDK and Embed protocol.

If the frame stays blank#

timeout on call.ready: your page's origin is not in Embed origins, or it has a path (use scheme and host only).
The camera does not start: the iframe is missing the allow list, or the page is http and not localhost.
A wrong room name or an expired token shows the room's own message inside the frame.

Next#

Server quick start for tokens in Node, Python, PHP and Go.
Meeting tokens for roles and permissions.
Embed in Android and iOS WebViews.