Using WebRTC

import { createRouter, webrtc } from '@agentuity/runtime';
 
const router = createRouter();
 
// Registered as /signal here; the file path (src/api/call/) + this path = /api/call/signal
router.get('/signal', webrtc());
 
export default router;

import { useWebRTCCall } from '@agentuity/react';
 
function DataChat({ roomId }: { roomId: string }) {
  const {
    state,
    peerId,
    remotePeerIds,
    connect,
    hangup,
    sendString,
  } = useWebRTCCall({
    roomId,
    signalUrl: '/api/call/signal',
    media: false, 
    dataChannels: [{ label: 'chat', ordered: true }], 
    autoConnect: false,
    callbacks: {
      onDataChannelMessage: (from, label, data) => {
        console.log(`[${from}] ${data}`);
      },
    },
  });
 
  return (
    <div>
      <p>State: {state}</p>
      <button onClick={state === 'idle' ? connect : hangup}>
        {state === 'idle' ? 'Join' : 'Leave'}
      </button>
      <button onClick={() => sendString('chat', 'Hello!')}>
        Send
      </button>
    </div>
  );
}

import { useWebRTCCall } from '@agentuity/react';
 
function VideoCall({ roomId }: { roomId: string }) {
  const {
    localVideoRef,
    state,
    remotePeerIds,
    remoteStreams,
    isAudioMuted,
    isVideoMuted,
    connect,
    hangup,
    muteAudio,
    muteVideo,
  } = useWebRTCCall({
    roomId,
    signalUrl: '/api/call/signal',
    autoConnect: false,
  });
 
  return (
    <div>
      <video ref={localVideoRef} autoPlay muted playsInline />
 
      {remotePeerIds.map((id) => (
        <RemoteVideo key={id} stream={remoteStreams.get(id)} />
      ))}
 
      <button onClick={() => muteAudio(!isAudioMuted)}>
        {isAudioMuted ? 'Unmute' : 'Mute'}
      </button>
      <button onClick={() => muteVideo(!isVideoMuted)}>
        {isVideoMuted ? 'Show Video' : 'Hide Video'}
      </button>
      <button onClick={hangup}>Hang Up</button>
    </div>
  );
}

router.get('/signal', webrtc({
  maxPeers: 4, // Allow up to 4 peers per room (default: 2)
  callbacks: {
    onRoomCreated: (roomId) => { /* room created */ },
    onPeerJoin: (peerId, roomId) => { /* peer joined */ },
    onPeerLeave: (peerId, roomId, reason) => { /* peer left */ },
    onRoomDestroyed: (roomId) => { /* room empty, cleaned up */ },
  },
}));

const {
  sendString, sendStringTo,
  sendJSON, sendJSONTo,
  sendBinary, sendBinaryTo,
  createDataChannel,
  getDataChannelLabels,
  getDataChannelState,
  closeDataChannel,
} = useWebRTCCall({
  // ...options
});
 
// Send to all peers
sendString('chat', 'Hello everyone');
sendJSON('state', { x: 100, y: 200 });
sendBinary('file', new Uint8Array([...]));
 
// Send to a specific peer
sendStringTo(peerId, 'chat', 'Private message');
sendJSONTo(peerId, 'state', { x: 100, y: 200 });
sendBinaryTo(peerId, 'file', new Uint8Array([...]));
 
// Inspect channel state
const labels = getDataChannelLabels();
const channelState = getDataChannelState(peerId, 'chat');
 
// Add a channel after connect
createDataChannel({ label: 'extra', ordered: false });
 
// Close a channel
closeDataChannel('chat');

const { startScreenShare, stopScreenShare, isScreenSharing } = useWebRTCCall({
  // ...options
});
 
// Start sharing (browser picks the source)
await startScreenShare();
 
// Stop sharing
await stopScreenShare();

import { useWebRTCCall } from '@agentuity/react';
 
function VideoCallWithErrorHandling({ roomId }: { roomId: string }) {
  const { state, error } = useWebRTCCall({
    roomId,
    signalUrl: '/api/call/signal',
    callbacks: {
      onError: (err, currentState) => {
        if (err.name === 'NotAllowedError') {
          // User denied camera/mic permission
        }
      },
      onReconnecting: (attempt) => {
        console.log(`Reconnection attempt ${attempt}`);
      },
      onReconnectFailed: () => {
        console.log('Could not reconnect');
      },
    },
  });
 
  return <p>State: {state}</p>;
}

const { getQualitySummary, getAllQualitySummaries } = useWebRTCCall({ /* ...options */ });
 
// Single peer
const summary = await getQualitySummary(remotePeerId);
if (summary) {
  console.log(`RTT: ${summary.rtt}ms, packet loss: ${summary.packetLossPercent}%`);
}
 
// All connected peers at once
const all = await getAllQualitySummaries();
for (const [peerId, stats] of all) {
  console.log(peerId, stats.bitrate?.video?.inbound);
}

const { startRecording, stopAllRecordings, isRecording } = useWebRTCCall({ /* ...options */ });
 
// Start recording the local stream
const handle = startRecording('local', {
  mimeType: 'video/webm',
  videoBitsPerSecond: 2_500_000,
});
 
// Pause and resume mid-session
handle?.pause();
handle?.resume();
 
// Stop and download
const blob = await handle?.stop();
if (blob) {
  const url = URL.createObjectURL(blob);
  // trigger download, preview, or upload
}
 
// Check if a stream is currently being recorded
const active = isRecording('local');
 
// Stop all active recordings at once (e.g. on hangup)
// Returns Map<streamId, Blob>
const blobs = await stopAllRecordings();
for (const [streamId, blob] of blobs) {
  const url = URL.createObjectURL(blob);
  // trigger download for each recorded stream
}

import { UserMediaSource, DisplayMediaSource, CustomStreamSource } from '@agentuity/react';

// Share the screen instead of the camera
const { connect } = useWebRTCCall({
  roomId,
  signalUrl: '/api/call/signal',
  media: new DisplayMediaSource(), 
});

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const canvasStream = canvas.captureStream(30); // 30 fps
 
const { connect } = useWebRTCCall({
  roomId,
  signalUrl: '/api/call/signal',
  media: new CustomStreamSource(canvasStream), 
});