meetapp-react

React bindings for meetapp-sdk.

Install

npm install meetapp-react meetapp-sdk

Usage

import { useMeetapp, MeetappVideo } from 'meetapp-react'

function VideoCall() {
  const {
    status, error,
    localStream, peers,
    micEnabled, cameraEnabled, screenSharing, recording,
    setMicEnabled, setCamEnabled, toggleScreenShare,
    startRecording, stopRecording, leave,
  } = useMeetapp({
    serverUrl: 'https://meet.example.com',
    roomId: 'team-standup',
    autoJoin: true,
  })

  if (status === 'error') return <div>Error: {error?.message}</div>
  if (status !== 'joined') return <div>Joining…</div>

  return (
    <div>
      <MeetappVideo stream={localStream} muted />
      {[...peers].map(([id, p]) => (
        <MeetappVideo key={id} stream={p.stream} />
      ))}
      <button onClick={() => setMicEnabled(!micEnabled)}>
        {micEnabled ? 'Mute' : 'Unmute'}
      </button>
      <button onClick={() => setCamEnabled(!cameraEnabled)}>
        {cameraEnabled ? 'Stop cam' : 'Start cam'}
      </button>
      <button onClick={toggleScreenShare}>
        {screenSharing ? 'Stop sharing' : 'Share screen'}
      </button>
      {recording.state === 'recording'
        ? <button onClick={stopRecording}>Stop recording</button>
        : <button onClick={startRecording}>Record</button>}
      {recording.state === 'ready' && (
        <a href={recording.url} target="_blank" rel="noopener">Recording ready ↗</a>
      )}
      <button onClick={leave}>Leave</button>
    </div>
  )
}

API

useMeetapp(options) → UseMeetappApi

options:

• serverUrl: string (required)
• roomId: string (required)
• peerId?: string
• joinOptions?: { audio?, video? }
• autoJoin?: boolean — default true. If false, call api.join() manually.

Returns an object with reactive state and bound action functions. See useMeetapp.ts for the full type.

State: status, error, localPeerId, localStream, peers, chatMessages, recording, micEnabled, cameraEnabled, screenSharing.

Actions: join, leave, setMicEnabled, setCamEnabled, toggleScreenShare, setCameraDevice, setMicrophoneDevice, sendChat, startRecording, stopRecording.

<MeetappVideo stream={…} muted? />

Tiny wrapper around <video> that handles srcObject assignment.