This tutorial uses the MediasoupMeeting WebRTC infrastructure to embed live video meetings into your website.
This guide explains how a developer can integrate MediasoupMeeting into a web page to build a fully functional video conference interface.
This article focuses only on building the meeting page itself. Meeting recording will be explained in another blog post.
MediasoupMeeting provides a single JavaScript file that exposes a set of functions used to create real-time meetings.
The SDK does not provide a UI. The developer is responsible for building the page interface.
This blog post will always be updated when new features are added. Existing features will not break.
The latest version of the SDK is always available here:
https://demo.mediasoupmeeting.com/mediasoupmeeting.js
Include it in your page:
<script src="https://demo.mediasoupmeeting.com/mediasoupmeeting.js"></script>
MediasoupMeeting requires two DOM elements:
<video id="localVideo" autoplay playsinline muted></video>
<div id="remoteVideos"></div>
The SDK will automatically append new video elements inside the remote container when peers join.
Before joining the meeting you must initialize MediasoupMeeting.
const localVideo = document.getElementById("localVideo");
const remoteVideos = document.getElementById("remoteVideos");
const peerId = crypto.randomUUID();
MediasoupMeeting.init({
socketUrl: "wss://socket.mediasoupmeeting.com",
roomId: "your-room-id",
clientId: "your-subscription-id",
peerId: peerId,
localVideoEl: localVideo,
remoteContainerEl: remoteVideos
});
Important parameters:
Joining the meeting is a single function call.
MediasoupMeeting.join();
When the user joins:
The SDK exposes simple functions for meeting controls. You can connect them to UI buttons.
MediasoupMeeting.muteMic();
MediasoupMeeting.unmuteMic();
MediasoupMeeting.disableCamera();
MediasoupMeeting.enableCamera();
MediasoupMeeting.startScreenShare();
MediasoupMeeting.stopScreenShare();
MediasoupMeeting.leave();
When a peer shares the screen the SDK adds a CSS class to the video element:
screen-share-video
Normal peer videos use:
peer-video
This allows the developer to apply custom styling.
Example:
.screen-share-video{
width:100%;
border:2px solid #3b82f6;
}
.peer-video{
width:200px;
}
Many interfaces display screen sharing videos larger than normal peer cameras.
You can listen to events emitted by the SDK.
MediasoupMeeting.on("joined", () => {
console.log("Joined meeting");
});
MediasoupMeeting.on("peerJoined", (data) => {
console.log("Peer joined", data);
});
MediasoupMeeting.on("peerLeft", (data) => {
console.log("Peer left", data);
});
MediasoupMeeting.on("error", (err) => {
console.error(err);
});
These events allow your interface to react to meeting changes.
When you subscribe to MediasoupMeeting you receive a clientId. This clientId is used when your page connects to the socket service.
To prevent others from using your subscription, the server checks the request origin.
During subscription you provide the domain names that are allowed to use your clientId. Only requests coming from those domains are accepted.
Example allowed domains:
https://app.yourdomain.com
https://meeting.yourdomain.com
https://page.schoolnotepad.com
If a connection is made from any other domain, the socket server rejects the request. This means that even if someone knows your clientId, they cannot use it from another website.
You can test the infrastructure immediately using our live demo.