DEV Community

Alex Spinov
Alex Spinov

Posted on

LiveKit Has a Free API — Heres How to Add Real-Time Video and Audio to Your App

#webrtc #realtime #opensource #tutorial

LiveKit is an open-source WebRTC platform for real-time video, audio, and data. Build Zoom-like experiences with a few lines of code — self-hosted or cloud.

Why LiveKit?

  • Open source: Self-host on your own infrastructure
  • Multi-platform: Web, iOS, Android, Flutter, Unity, React Native
  • Scalable: Handle thousands of participants
  • Low latency: Sub-200ms glass-to-glass
  • Recording: Built-in recording and egress
  • AI integration: Real-time AI agents

Self-Host 

docker run --rm -p 7880:7880 -p 7881:7881 -p 7882:7882/udp \
  livekit/livekit-server --dev
Enter fullscreen mode Exit fullscreen mode

Create Access Token (Server-Side) 

import { AccessToken } from 'livekit-server-sdk';

const token = new AccessToken('api-key', 'api-secret', {
  identity: 'user-123',
});
token.addGrant({
  roomJoin: true,
  room: 'my-room',
  canPublish: true,
  canSubscribe: true,
});

const jwt = await token.toJwt();
Enter fullscreen mode Exit fullscreen mode

Join Room (React) 

import { LiveKitRoom, VideoConference } from '@livekit/components-react';
import '@livekit/components-styles';

export function VideoCall({ token }) {
  return (
    <LiveKitRoom
      serverUrl="wss://your-livekit-server.com"
      token={token}
      connect={true}
    >
      <VideoConference />
    </LiveKitRoom>
  );
}
Enter fullscreen mode Exit fullscreen mode

That's it — full video conference with camera, mic, screen share, and chat.

Custom UI 

import { useParticipants, useTracks } from '@livekit/components-react';
import { Track } from 'livekit-client';

export function CustomRoom() {
  const tracks = useTracks([Track.Source.Camera, Track.Source.ScreenShare]);
  const participants = useParticipants();

  return (
    <div>
      <p>{participants.length} participants</p>
      {tracks.map((track) => (
        <VideoTrack key={track.sid} track={track} />
      ))}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Server API: Create Room 

curl -X POST http://localhost:7880/twirp/livekit.RoomService/CreateRoom \
  -H 'Authorization: Bearer YOUR_TOKEN' \
  -H 'Content-Type: application/json' \
  -d '{"name": "my-room", "max_participants": 20}'
Enter fullscreen mode Exit fullscreen mode

Server API: List Participants 

curl -X POST http://localhost:7880/twirp/livekit.RoomService/ListParticipants \
  -H 'Authorization: Bearer YOUR_TOKEN' \
  -H 'Content-Type: application/json' \
  -d '{"room": "my-room"}'
Enter fullscreen mode Exit fullscreen mode

Recording (Egress) 

import { EgressClient } from 'livekit-server-sdk';

const egress = new EgressClient('http://localhost:7880', 'api-key', 'api-secret');

await egress.startRoomCompositeEgress('my-room', {
  file: { filepath: 'recordings/meeting-{time}.mp4' },
});
Enter fullscreen mode Exit fullscreen mode

Data Messages 

import { Room, DataPacket_Kind } from 'livekit-client';

const room = new Room();
await room.connect('wss://server', token);

// Send chat message
const encoder = new TextEncoder();
room.localParticipant.publishData(
  encoder.encode(JSON.stringify({ type: 'chat', text: 'Hello!' })),
  DataPacket_Kind.RELIABLE
);
Enter fullscreen mode Exit fullscreen mode

Real-World Use Case

A telehealth startup replaced Twilio Video ($0.004/min) with self-hosted LiveKit. For 10,000 consultation-minutes/month, they saved $40/mo and got lower latency since the server was in their region.

Need to automate data collection? Check out my Apify actors for ready-made scrapers, or email spinov001@gmail.com for custom solutions.

Top comments (0)