First call in 5 minutes

x-api-key: $PURPLECALLIO_API_KEY

{
  "branding": {
    "companyName": "Acme",
    "logoUrl": "https://cdn.acme.com/logo.png",
    "primaryColor": "#2563EB"
  },
  "theme": "dark",
  "waitingRoom": true
}

npm install @purplecallio/react

import { MeetingProvider, MeetingRoom, ParticipantGrid, ControlBar } from '@purplecallio/react';

export function Call({ token, callId, signalUrl }) {
  return (
    <MeetingProvider token={token} callId={callId} signalUrl={signalUrl}>
      <MeetingRoom>
        <ParticipantGrid />
      </MeetingRoom>
      <ControlBar />
    </MeetingProvider>
  );
}

import { useMeeting, useParticipants, useParticipant, useDevices, useConnection } from '@purplecallio/react';

function Status() {
  const { connectionState } = useConnection();
  const participants = useParticipants();
  const { toggleCamera, toggleMicrophone } = useMeeting();
  const devices = useDevices();
  return null;
}

npm install @purplecallio/sdk

import { PurpleCallioMeeting } from '@purplecallio/sdk';

const meeting = new PurpleCallioMeeting({
  token,            // bj_session_... for this participant
  callId,
  signalUrl: 'wss://api.purplecallio.com',
});

await meeting.join();

meeting.camera.enable();
meeting.microphone.disable();
await meeting.screenShare.start();

meeting.on('participant.joined', (p) => console.log('joined', p));
meeting.on('remote.stream', (stream) => attachToVideo(stream));

await meeting.leave();

meeting.on('connected', (p) => {});
meeting.on('disconnected', () => {});
meeting.on('reconnected', () => {});
meeting.on('call.started', (d) => {});
meeting.on('call.ended', (d) => {});
meeting.on('participant.joined', (p) => {});
meeting.on('participant.left', (p) => {});
meeting.on('participant.updated', (p) => {});
meeting.on('camera.enabled' | 'camera.disabled', () => {});
meeting.on('microphone.enabled' | 'microphone.disabled', () => {});
meeting.on('screenShare.started' | 'screenShare.stopped', () => {});
meeting.on('remote.stream', (stream) => {});
meeting.on('remote.stream.ended', () => {});

npm install @purplecallio/angular @purplecallio/sdk

import { Component, OnDestroy, OnInit } from '@angular/core';
import { PurpleCallioService } from '@purplecallio/angular';

@Component({
  selector: 'app-call',
  standalone: true,
  template: `
    <video purplecallioVideo [stream]="call.localStream$ | async" [muted]="true"></video>
    <video purplecallioVideo [stream]="call.remoteStream$ | async"></video>
  `,
})
export class CallComponent implements OnInit, OnDestroy {
  constructor(public call: PurpleCallioService) {}

  ngOnInit() {
    this.call.configure({ token, callId, signalUrl });
    this.call.join();
  }

  ngOnDestroy() {
    this.call.leave();
  }
}

npm install @purplecallio/react-native @purplecallio/sdk react-native-webrtc

import { registerGlobals } from 'react-native-webrtc';
registerGlobals(); // once, at app startup

import { PurpleCallioProvider, useMeeting, PurpleCallioVideoView } from '@purplecallio/react-native';

function CallScreen() {
  const { join, remoteStream, localStream, toggleCamera, switchCamera } = useMeeting();

  useEffect(() => { join(); }, [join]);

  return <PurpleCallioVideoView stream={remoteStream} objectFit="cover" />;
}

export default function App() {
  return (
    <PurpleCallioProvider token={token} callId={callId} signalUrl={signalUrl}>
      <CallScreen />
    </PurpleCallioProvider>
  );
}

npm install @purplecallio/vue @purplecallio/sdk

<script setup lang="ts">
import { usePurpleCallio } from '@purplecallio/vue';
import PurpleCallioVideo from '@purplecallio/vue/components/PurpleCallioVideo.vue';

const { join, leave, localStream, remoteStream, camera } = usePurpleCallio({
  token, callId, signalUrl,
});

join();
</script>

<template>
  <PurpleCallioVideo :stream="localStream" muted />
  <PurpleCallioVideo :stream="remoteStream" />
  <button @click="camera.toggle()">Toggle camera</button>
</template>

npm install @purplecallio/svelte @purplecallio/sdk

<script lang="ts">
  import { onDestroy } from 'svelte';
  import { createPurpleCallio, PurpleCallioVideo } from '@purplecallio/svelte';

  const call = createPurpleCallio({ token, callId, signalUrl });
  call.join();

  onDestroy(() => call.destroy());
</script>

<PurpleCallioVideo stream={$call.localStream} muted={true} />
<PurpleCallioVideo stream={$call.remoteStream} />
<button on:click={() => call.camera.toggle()}>Toggle camera</button>

import { io } from 'socket.io-client';

const socket = io('https://api.purplecallio.com', {
  auth: { token: 'bj_session_...' },
  transports: ['websocket'],
});

socket.on('connect', () => {
  socket.emit('authenticate', { token: 'bj_session_...' });
});

import PurpleCallio from '@purplecallio/sdk';

const bj = new PurpleCallio({
  apiKey: process.env.PURPLECALLIO_API_KEY,
  baseUrl: 'https://api.purplecallio.com',
});

// 1. Create a call from your backend
const { callId, hostedUrl, participants } = await bj.createCall({
  callerId: 'user_alice',
  receiverId: 'user_bob',
  type: 'VIDEO',
});

// 2. Redirect each participant to their hosted page
//    participants[0].hostedUrl  → Alice
//    participants[1].hostedUrl  → Bob
res.redirect(participants[0].hostedUrl);

import { MeetingProvider, MeetingRoom, ParticipantGrid, CameraButton, MicrophoneButton, ScreenShareButton, LeaveButton, DeviceSelector } from '@purplecallio/react';

export function CustomCall({ token, callId, signalUrl }) {
  return (
    <MeetingProvider token={token} callId={callId} signalUrl={signalUrl}>
      <MeetingRoom>
        <ParticipantGrid />
      </MeetingRoom>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', padding: 16 }}>
        <CameraButton />
        <MicrophoneButton />
        <ScreenShareButton />
        <DeviceSelector />
        <LeaveButton />
      </div>
    </MeetingProvider>
  );
}

import { PurpleCallioMeeting } from '@purplecallio/sdk';

const meeting = new PurpleCallioMeeting({ token, callId, signalUrl });

meeting.on('remote.stream', (stream) => {
  document.getElementById('remote-video').srcObject = stream;
});

await meeting.join();
meeting.camera.enable();
meeting.microphone.enable();