@vocantly/call-ui

Drop-in, themeable 1:1 voice/video call UI for @vocantly/sdk.

It's symmetric — both participants render the same component — and role-neutral: identities and labels come from config, so it works for doctor↔patient, agent↔customer, tutor↔student, etc. If you'd rather build your own UI, use the headless SDK directly; this is the batteries-included default.

Install

npm install @vocantly/call-ui @vocantly/sdk react react-dom

Usage

import { Vocantly } from '@vocantly/sdk';
import CallUI, { useCall } from '@vocantly/call-ui';

function Call({ convo }) {           // convo = an SDK conversation you've joined
  const controller = useCall(convo); // one controller drives the whole flow

  return (
    <>
      <button onClick={() => controller.actions.openLobby('video')}>Video call</button>

      <CallUI
        controller={controller}
        config={{
          logoText: 'CA',
          sessionTitle: 'Telemedicine Consultation',
          sessionSubtitle: 'Secured via Vocantly',
          primaryColor: '#2563EB',
          self: { name: 'Kofi Asante', role: 'Patient' },
          peer: { name: 'Dr. Aisha Mensah', role: 'Physician' },
          onRate: (n) => {/* POST /sdk/conversations/:id/call-rating */},
        }}
      />
    </>
  );
}

Incoming calls appear automatically (the controller listens for call_invite). The overlay renders nothing while idle.

Screens

Lobby (device setup + preview) · Incoming · Calling · Active Video · Active Voice · Reconnecting · Call Ended (with rating) · Permission Denied · in-call Settings (devices, video quality, noise suppression, echo cancellation, low-bandwidth) · People / Chat panels · screen share · minimize. Responsive desktop → mobile. Self-contained styles (no CSS framework needed).

Config

| key | purpose | |---|---| | logoText, sessionTitle, sessionSubtitle | branding on the call header | | primaryColor | theme colour | | self, peer | { name, role, avatar } for each participant | | onRate(n) | post-call star rating (1–5) | | onChat | optional hook when the chat panel opens |

Requirements

• HTTPS (WebRTC / getUserMedia)
• Screen share and speaker selection are Chromium/desktop only