First call in 5 minutes

Authorization: Bearer bj_live_your_key_here

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

npm install @bluecallio/react

import { MeetingProvider, MeetingRoom, ParticipantGrid, ControlBar } from '@bluecallio/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 '@bluecallio/react';

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

npm install @bluecallio/sdk

import { BlueCallioMeeting } from '@bluecallio/sdk';

const meeting = new BlueCallioMeeting({
  token,            // bj_session_... for this participant
  callId,
  signalUrl: 'wss://api.yourdomain.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', () => {});

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

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

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

import BlueCallio from '@bluecallio/sdk';

const bj = new BlueCallio({
  apiKey: process.env.BLUECALLIO_API_KEY,
  baseUrl: 'https://api.yourdomain.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 '@bluecallio/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 { BlueCallioMeeting } from '@bluecallio/sdk';

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

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

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