PurpleCallio documentation

Add Video Calling to React

PurpleCallio React components let product teams compose a branded calling experience without implementing WebRTC negotiation and signaling UI from scratch.

Compose the meeting UI

Build with the MeetingProvider, participant views, controls, device selection, and waiting-room capabilities exposed by the React package.

Keep product control

React components are a middle path between hosted UI and the headless SDK: integrate reusable UI while still shaping the experience around your application.

React meeting preview

Simulated React meeting UI

Connected

Local participant
Camera on

Remote participant
Participant stream

Compose a React meeting UI

example.ts

import { useEffect } from "react";
import { MeetingProvider, useMeeting, ParticipantTile, CameraButton, MicrophoneButton } from "@purplecallio/react";

function Call({ participantToken, callId, signalUrl }) {
  return (
    <MeetingProvider token={participantToken} callId={callId} signalUrl={signalUrl}>
      <Room />
    </MeetingProvider>
  );
}

function Room() {
  // MeetingProvider builds the engine but does not join automatically —
  // call join() yourself once the component mounts.
  const { join, localStream, remoteStream, participantId } = useMeeting();
  useEffect(() => { join(); }, [join]);

  return (
    <>
      <ParticipantTile participantId={participantId ?? "me"} stream={localStream} muted mirror />
      <ParticipantTile participantId="remote" stream={remoteStream} />
      <CameraButton />
      <MicrophoneButton />
    </>
  );
}

Build with PurpleCallio

Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.

Read the quickstart Create an account