A lightweight, installable NPM package for real-time meeting and collaboration features in web applications.

MeetPlug provides a simple SDK + ready-made UI components that developers can embed directly inside React apps, Vue apps, Next.js, or plain JavaScript projects. Built on WebRTC for peer-to-peer communication.

• 🎬 Real-time video and audio streaming
• 🖥️ Screen sharing
• 💬 Chat messaging
• 🧩 Prebuilt UI components (VideoGrid, ControlsBar, ChatPanel)
• 🎣 React Hooks for custom UIs
• 🔌 Framework-agnostic (React, Vue, Next.js, vanilla JS)
• 📦 Lightweight (<200KB gzipped)
• 🎨 Customizable theming
• 🔐 Type-safe with TypeScript
• 🌐 WebRTC-based (no external dependencies for media)

npm install meetplug
# or
yarn add meetplug
# or
pnpm add meetplug

import { MeetPlugRoom } from 'meetplug';
import 'meetplug/dist/style.css';

function App() {
  return (
    <MeetPlugRoom
      roomId="my-meeting-room"
      participantName="John Doe"
      onJoin={(room) => console.log('Joined:', room)}
      onLeave={() => console.log('Left meeting')}
    />
  );
}

import { useMeetPlug, useMedia } from 'meetplug';
import 'meetplug/dist/style.css';

function CustomMeeting() {
  const {
    room,
    participants,
    isConnected,
    joinRoom,
    leaveRoom,
    sendChatMessage,
    chatMessages
  } = useMeetPlug();

  const {
    audioEnabled,
    videoEnabled,
    toggleAudio,
    toggleVideo,
    toggleScreenShare
  } = useMedia(null);

  return (
    <div>
      {!isConnected ? (
        <button onClick={() => joinRoom('room-123', 'My Name')}>
          Join Meeting
        </button>
      ) : (
        <>
          <div>Participants: {participants.length + 1}</div>
          <button onClick={toggleAudio}>
            {audioEnabled ? 'Mute' : 'Unmute'}
          </button>
          <button onClick={toggleVideo}>
            {videoEnabled ? 'Stop Video' : 'Start Video'}
          </button>
          <button onClick={leaveRoom}>Leave</button>
        </>
      )}
    </div>
  );
}

import MeetPlugSDK from 'meetplug';
import 'meetplug/dist/style.css';

const sdk = new MeetPlugSDK({
  signalingServer: 'ws://localhost:3001',
  enableChat: true,
  enableScreenShare: true
});

// Join a room
await sdk.joinRoom('my-room-id', 'Participant Name');

// Listen to events
sdk.on('room:joined', (room) => {
  console.log('Joined room:', room);
});

sdk.on('participant:joined', (participant) => {
  console.log('New participant:', participant);
});

// Toggle audio/video
await sdk.toggleAudio();
await sdk.toggleVideo();

// Share screen
await sdk.toggleScreenShare();

// Send chat message
sdk.sendChatMessage('Hello everyone!');

// Leave room
sdk.leaveRoom();

Main container component with everything built-in.

Props:

Displays video streams in a grid layout.

Props:

Control bar with media controls.

Chat interface with message history.

List of all participants with status.

Main hook for meeting functionality.

Returns:

{
  room: Room | null;
  localParticipant: Participant | null;
  participants: Participant[];
  isConnected: boolean;
  isJoining: boolean;
  error: Error | null;
  joinRoom: (roomId: string, participantName?: string) => Promise<void>;
  leaveRoom: () => void;
  sendChatMessage: (message: string) => void;
  chatMessages: ChatMessage[];
}

Hook for media device management.

Returns:

{
  localStream: MediaStream | null;
  audioEnabled: boolean;
  videoEnabled: boolean;
  screenShareEnabled: boolean;
  devices: MediaDevices;
  toggleAudio: () => Promise<void>;
  toggleVideo: () => Promise<void>;
  toggleScreenShare: () => Promise<void>;
  switchCamera: (deviceId: string) => Promise<void>;
  switchMicrophone: (deviceId: string) => Promise<void>;
  error: Error | null;
}

Hook for room management.

Returns:

{
  room: Room | null;
  participants: Participant[];
  isHost: boolean;
  kickParticipant: (participantId: string) => void;
  updateRoomSettings: (settings: Partial<Room>) => void;
}

Core SDK class for vanilla JS usage.

new MeetPlugSDK(config?: MeetPlugConfig)

Config Options:

interface MeetPlugConfig {
  signalingServer?: string;          // Default: 'ws://localhost:3001'
  iceServers?: RTCIceServer[];       // STUN/TURN servers
  autoConnect?: boolean;              // Default: true
  enableChat?: boolean;               // Default: true
  enableScreenShare?: boolean;        // Default: true
  maxParticipants?: number;          // Default: 50
}

• joinRoom(roomId: string, participantName?: string): Promise<Room>
• leaveRoom(): void
• toggleAudio(): Promise<void>
• toggleVideo(): Promise<void>
• toggleScreenShare(): Promise<void>
• sendChatMessage(content: string): void
• getRoom(): Room | null
• getParticipants(): Participant[]
• getLocalStream(): MediaStream | null

sdk.on('room:joined', (room: Room) => {});
sdk.on('room:left', () => {});
sdk.on('participant:joined', (participant: Participant) => {});
sdk.on('participant:left', (participantId: string) => {});
sdk.on('chat:message', (message: ChatMessage) => {});
sdk.on('stream:added', (participantId: string, stream: MediaStream) => {});
sdk.on('screen:sharing:started', (participantId: string) => {});

MeetPlug uses Tailwind CSS with a custom prefix (mp-). You can customize colors in your Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'meetplug': {
          primary: '#3B82F6',
          secondary: '#8B5CF6',
          // ... customize more colors
        },
      },
    },
  },
};

Override styles by targeting the mp- prefixed classes:

.mp-bg-gray-900 {
  background-color: #your-color !important;
}

By default, MeetPlug uses WebSocket signaling. For production, deploy your own signaling server:

const sdk = new MeetPlugSDK({
  signalingServer: 'wss://your-server.com'
});

For production environments where peers might be behind firewalls:

const sdk = new MeetPlugSDK({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    {
      urls: 'turn:your-turn-server.com:3478',
      username: 'user',
      credential: 'pass'
    }
  ]
});

• Chrome 74+
• Firefox 66+
• Safari 12.1+
• Edge 79+

Contributions are welcome! Please feel free to submit a Pull Request.

MIT © MeetPlug

Built with:

• WebRTC for peer-to-peer communication
• Socket.io for signaling
• React for UI components
• Tailwind CSS for styling
• TypeScript for type safety

• 📧 Email: support@meetplug.com
• 🐛 Issues: GitHub Issues
• 📖 Docs: Documentation

Made with ❤️ by the MeetPlug Team