feat: added call-sdk package

packages/call-sdk/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@call0/call-sdk",
+  "version": "0.1.0",
+  "description": "Video calling SDK for Call0 using MediaSoup",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "lint:fix": "eslint \"src/**/*.ts*\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "webrtc",
+    "mediasoup",
+    "video",
+    "call",
+    "sdk"
+  ],
+  "author": "Call0",
+  "license": "MIT",
+  "dependencies": {
+    "mediasoup-client": "^3.14.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "jest": "^30.0.5",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/call-sdk/src/hooks/useCall.ts

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useState } from "react";
+import { useCall as useCallContext } from "../providers/CallProvider";
+import type { CallConfig, CallStats } from "../types/call";
+import type { Participant, Self } from "../types/participant";
+
+export interface UseCallReturn {
+  // Connection state
+  isConnected: boolean;
+  isConnecting: boolean;
+  isReconnecting: boolean;
+  connectionError?: Error;
+
+  // Participants
+  self: Self | null;
+  participants: Participant[];
+  participantCount: number;
+  dominantSpeaker?: Participant;
+  pinnedParticipant?: Participant;
+
+  // Media state
+  localStream: MediaStream | null;
+  isMicrophoneEnabled: boolean;
+  isCameraEnabled: boolean;
+  isScreenShareEnabled: boolean;
+
+  // Call actions
+  joinCall: (config: CallConfig) => Promise<void>;
+  leaveCall: () => Promise<void>;
+
+  // Media controls
+  toggleMicrophone: () => Promise<boolean>;
+  toggleCamera: () => Promise<boolean>;
+  startScreenShare: () => Promise<void>;
+  stopScreenShare: () => Promise<void>;
+
+  // Participant management
+  pinParticipant: (participantId: string) => void;
+  unpinParticipant: () => void;
+  getParticipantById: (participantId: string) => Participant | undefined;
+
+  // Device management
+  changeAudioDevice: (deviceId: string) => Promise<void>;
+  changeVideoDevice: (deviceId: string) => Promise<void>;
+
+  // Call statistics
+  stats?: CallStats;
+
+  // Advanced
+  callClient: any; // CallClient instance for advanced usage
+}
+
+/**
+ * Main hook for call functionality
+ * Provides a comprehensive interface for managing video calls
+ */
+export function useCall(): UseCallReturn {
+  const context = useCallContext();
+  const [isReconnecting, setIsReconnecting] = useState(false);
+
+  // Derived state
+  const participantsArray = Array.from(context.participants.values());
+  const dominantSpeaker = context.dominantSpeakerId
+    ? context.participants.get(context.dominantSpeakerId)
+    : undefined;
+  const pinnedParticipant = context.pinnedParticipantId
+    ? context.participants.get(context.pinnedParticipantId)
+    : undefined;
+
+  // Media state derived from self
+  const isMicrophoneEnabled = context.self?.audioEnabled ?? false;
+  const isCameraEnabled = context.self?.videoEnabled ?? false;
+  const isScreenShareEnabled = context.self?.screenShareEnabled ?? false;
+
+  // Handle reconnection logic
+  useEffect(() => {
+    if (context.callState.connectionStatus === "reconnecting") {
+      setIsReconnecting(true);
+    } else {
+      setIsReconnecting(false);
+    }
+  }, [context.callState.connectionStatus]);
+
+  // Device management helpers
+  const changeAudioDevice = useCallback(
+    async (deviceId: string) => {
+      await context.changeDevice("audio", deviceId);
+    },
+    [context.changeDevice]
+  );
+
+  const changeVideoDevice = useCallback(
+    async (deviceId: string) => {
+      await context.changeDevice("video", deviceId);
+    },
+    [context.changeDevice]
+  );
+
+  // Participant helpers
+  const getParticipantById = useCallback(
+    (participantId: string) => {
+      return context.participants.get(participantId);
+    },
+    [context.participants]
+  );
+
+  return {
+    // Connection state
+    isConnected: context.isConnected,
+    isConnecting: context.isConnecting,
+    isReconnecting,
+    connectionError: context.error,
+
+    // Participants
+    self: context.self,
+    participants: participantsArray,
+    participantCount: participantsArray.length + (context.self ? 1 : 0),
+    dominantSpeaker,
+    pinnedParticipant,
+
+    // Media state
+    localStream: context.localStream,
+    isMicrophoneEnabled,
+    isCameraEnabled,
+    isScreenShareEnabled,
+
+    // Call actions
+    joinCall: context.joinCall,
+    leaveCall: context.leaveCall,
+
+    // Media controls
+    toggleMicrophone: context.toggleMicrophone,
+    toggleCamera: context.toggleCamera,
+    startScreenShare: context.startScreenShare,
+    stopScreenShare: context.stopScreenShare,
+
+    // Participant management
+    pinParticipant: context.pinParticipant,
+    unpinParticipant: context.unpinParticipant,
+    getParticipantById,
+
+    // Device management
+    changeAudioDevice,
+    changeVideoDevice,
+
+    // Call statistics
+    stats: context.stats,
+
+    // Advanced
+    callClient: context.callClient,
+  };
+}

packages/call-sdk/src/hooks/useMediaDevices.ts

@@ -0,0 +1,169 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface MediaDeviceState {
+  audioInputDevices: MediaDeviceInfo[];
+  audioOutputDevices: MediaDeviceInfo[];
+  videoInputDevices: MediaDeviceInfo[];
+  selectedAudioInput: string | null;
+  selectedAudioOutput: string | null;
+  selectedVideoInput: string | null;
+  hasAudioPermission: boolean;
+  hasVideoPermission: boolean;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+const initialState: MediaDeviceState = {
+  audioInputDevices: [],
+  audioOutputDevices: [],
+  videoInputDevices: [],
+  selectedAudioInput: null,
+  selectedAudioOutput: null,
+  selectedVideoInput: null,
+  hasAudioPermission: false,
+  hasVideoPermission: false,
+  isLoading: true,
+  error: null,
+};
+
+export function useMediaDevices() {
+  const [state, setState] = useState<MediaDeviceState>(initialState);
+
+  const updateDevices = useCallback(async () => {
+    try {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = devices.filter(
+        (device) => device.kind === "audioinput"
+      );
+      const audioOutputs = devices.filter(
+        (device) => device.kind === "audiooutput"
+      );
+      const videoInputs = devices.filter(
+        (device) => device.kind === "videoinput"
+      );
+
+      setState((prev) => ({
+        ...prev,
+        audioInputDevices: audioInputs,
+        audioOutputDevices: audioOutputs,
+        videoInputDevices: videoInputs,
+        selectedAudioInput:
+          prev.selectedAudioInput || audioInputs[0]?.deviceId || null,
+        selectedAudioOutput:
+          prev.selectedAudioOutput || audioOutputs[0]?.deviceId || null,
+        selectedVideoInput:
+          prev.selectedVideoInput || videoInputs[0]?.deviceId || null,
+        isLoading: false,
+      }));
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: error as Error,
+      }));
+    }
+  }, []);
+
+  const checkPermissions = useCallback(async () => {
+    try {
+      const audioStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
+      audioStream.getTracks().forEach((track) => track.stop());
+      const videoStream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+      });
+      videoStream.getTracks().forEach((track) => track.stop());
+
+      setState((prev) => ({
+        ...prev,
+        hasAudioPermission: true,
+        hasVideoPermission: true,
+      }));
+    } catch (error) {
+      const permissionError = error as Error;
+      setState((prev) => ({
+        ...prev,
+        hasAudioPermission: !permissionError.message.includes("audio"),
+        hasVideoPermission: !permissionError.message.includes("video"),
+      }));
+    }
+  }, []);
+
+  useEffect(() => {
+    checkPermissions();
+    updateDevices();
+
+    // Listen for device changes
+    navigator.mediaDevices.addEventListener("devicechange", updateDevices);
+
+    return () => {
+      navigator.mediaDevices.removeEventListener("devicechange", updateDevices);
+    };
+  }, [checkPermissions, updateDevices]);
+
+  const setAudioInput = useCallback(async (deviceId: string) => {
+    try {
+      // Test if we can access the device
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { deviceId: { exact: deviceId } },
+      });
+      stream.getTracks().forEach((track) => track.stop());
+
+      setState((prev) => ({
+        ...prev,
+        selectedAudioInput: deviceId,
+      }));
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        error: error as Error,
+      }));
+      throw error;
+    }
+  }, []);
+
+  const setAudioOutput = useCallback((deviceId: string) => {
+    setState((prev) => ({
+      ...prev,
+      selectedAudioOutput: deviceId,
+    }));
+  }, []);
+
+  const setVideoInput = useCallback(async (deviceId: string) => {
+    try {
+      // Test if we can access the device
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { deviceId: { exact: deviceId } },
+      });
+      stream.getTracks().forEach((track) => track.stop());
+
+      setState((prev) => ({
+        ...prev,
+        selectedVideoInput: deviceId,
+      }));
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        error: error as Error,
+      }));
+      throw error;
+    }
+  }, []);
+
+  const requestPermissions = useCallback(async () => {
+    await checkPermissions();
+    await updateDevices();
+  }, [checkPermissions, updateDevices]);
+
+  return {
+    ...state,
+    setAudioInput,
+    setAudioOutput,
+    setVideoInput,
+    refreshDevices: updateDevices,
+    requestPermissions,
+  };
+}