Quickstart

Get a live room running in about five minutes. Pick the path that fits how you work:

• No SDK: create a room with one HTTP request and open the link it returns.
• React: drop the prebuilt room into a new app.
• Angular, Vue, mobile, Unity and more: install your package and open its first-room guide.

All three start with the same credentials.

1. Get your API credentials​

1. Create a MediaSFU account, or sign in.
2. Open API keys and copy your API username and API key.
3. Keep both out of source control. For this quickstart, store them as environment variables:

export MEDIASFU_API_USERNAME="your-api-username"
export MEDIASFU_API_KEY="your-api-key"

2. Option A: create a room over HTTP (no SDK)​

Every room starts with one request to the rooms endpoint:

curl -X POST https://mediasfu.com/v1/rooms/ \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $MEDIASFU_API_USERNAME:$MEDIASFU_API_KEY" \
  -d '{"action":"create","userName":"host","duration":30,"capacity":5,"eventType":"conference"}'

A successful response looks like this:

{
  "success": true,
  "roomName": "m-9f3a2b7c",
  "meetingID": "m-9f3a2b7c",
  "secureCode": "A1B2C3",
  "publicURL": "https://…"
}

Open publicURL in two browser tabs. You now have a live room with camera, microphone, chat and screen sharing, with no front-end code to maintain.

Every room option is listed in the Rooms API reference. To try requests live and copy them in other languages, use the API Sandbox.

2. Option B: add the prebuilt room to a React app​

Create an app and install the SDK:

npm create vite@latest my-room -- --template react-ts
cd my-room
npm install mediasfu-reactjs@4.3.7

Add your credentials to .env.local in the project folder:

VITE_MEDIASFU_API_USERNAME=your-api-username
VITE_MEDIASFU_API_KEY=your-api-key

Replace src/App.tsx:

import { ModernMediasfuGeneric } from 'mediasfu-reactjs';
import 'mediasfu-reactjs/dist/main.css';

export default function App() {
  return (
    <ModernMediasfuGeneric
      credentials={{
        apiUserName: import.meta.env.VITE_MEDIASFU_API_USERNAME,
        apiKey: import.meta.env.VITE_MEDIASFU_API_KEY,
      }}
    />
  );
}

Run it:

npm run dev

Open the local address Vite prints and create a room. To add a second participant, open another browser tab and join with the room ID shown in the room.

2. Option C: install a package for your platform​

Every platform guide below starts with installation and a working room.

3. Next steps​

• Ship it safely: move credentials to your backend with the secure backend guide.
• Make it yours: change branding, controls or the whole layout with Choose your UI mode.
• Add features: recording, breakout rooms, moderation and more in Build by outcome.
• Stream in or out: bring in OBS or a hardware encoder with WHIP, play a room in any WebRTC player with WHEP, or reach large audiences with HLS in Stream in and out.
• Start from a full app: clone a starter project.