react-sip-kit 0.2.3 → 0.3.62

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Shervin Ghajar
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Shervin Ghajar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,105 +1,144 @@
-# react-sip-kit
-
-A modern, modular, and type-safe SIP (Session Initiation Protocol) provider for React applications.  
-Built for real-time web telephony, this library offers a clean, scalable, and fully configurable SIP core, decoupled from UI and legacy global state.
-
----
-
-## Features
-
-- 📞 **SIP Core**: Register, make, receive, and manage SIP calls (audio & video)
-- 🔄 **Transfer & Conference**: Supports call transfer and conferencing
-- 🎥 **Video Call Support**: Video call features with device selection
-- 🔔 **Ringtone & Notifications**: Customizable audio output for ringtones and notifications
-- 👥 **Buddy/Contact Management**: Manage contacts (buddies) and pass contact data across sessions
-- ⚙️ **Fully Configurable**: All settings (account, features, media, UI, etc.) are passed as props—no global state or localStorage dependencies
-- 🧩 **Type-Safe & Modular**: Strong TypeScript types, modular config, and easy to extend
-- 🧪 **Testable**: Stateless SIP core, easy to mock and test
-
----
-
-## Installation
-
-```bash
-npm install react-sip-kit
-# or
-yarn add react-sip-kit
-```
-
----
-
-## Usage
-
-```tsx
-import { SipProvider } from 'react-sip-kit';
-
-<SipProvider
-  configs={{
-    account: {
-      username: 'user',
-      password: 'password',
-      domain: 'sip.example.com',
-      wssServer: 'wss.example.com',
-      webSocketPort: 7443,
-      serverPath: '/ws',
-    },
-    features: {
-      enableVideo: true,
-      enableRingtone: true,
-    },
-    // Add or override other config sections as needed
-  }}
->
-  {/* Your app components */}
-</SipProvider>;
-```
-
----
-
-## Configuration
-
-All configuration is passed via the `configs` prop.  
-See [`src/configs/types.ts`](src/configs/types.ts) for the full config structure.
-
-**Example config:**
-
-```ts
-{
-  account: { ... },
-  features: { ... },
-  media: { ... },
-  // ...other sections
-}
-```
-
-You can import and extend the default config:
-
-```ts
-import { defaultSipConfigs } from 'react-sip-kit/configs';
-```
-
----
-
-## API
-
-- **`<SipProvider configs={...}>`**  
-  Provides SIP context and manages SIP sessions for your app.
-
-- **Context hooks**  
-  Use React context or custom hooks to access SIP state, session methods, and events.
-
----
-
-## License
-
-MIT
-
----
-
-## Author
-
-**Shervin Ghajar**  
-[GitHub](https://github.com/shervin-ghajar)  
-Email: ssghajar.work@gmail.com
-
----
+# react-sip-kit
+
+A modern **React SIP.js toolkit** for building web-based softphones and SIP clients.
+Supports **audio/video calls**, **recording**, **screen sharing**, and **device management** — all with a clean, extensible architecture.
+
+---
+
+## ✨ Features
+
+* 📞 **Audio & Video Calls** — with automatic device detection
+* 🎥 **Video support** — manage local & remote streams seamlessly
+* 🔴 **Call Recording** — audio and video recording out of the box
+* 🖥️ **Screen Sharing** — during video calls
+* 🎧 **Device Management** — select audio/video input & output devices
+* 🔄 **Multi-line Support** — handle multiple concurrent calls
+* ⚡ **TypeScript-first** — fast, modular, type-safe APIs
+* 🛠️ **Configurable & Extensible** — tailor to your SIP setup
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-sip-kit
+# or
+yarn add react-sip-kit
+```
+
+---
+
+## 🚀 Basic Usage
+
+### 1. Wrap your app with `SipProvider`
+
+```tsx
+import { SipProvider } from 'react-sip-kit';
+
+<SipProvider
+  configs={{
+    account: {
+      domain: 'your.sip.domain',
+      username: 'your-username',
+      password: 'your-password',
+      wssServer: 'your.sip.domain',
+      webSocketPort: '8089',
+      serverPath: '/ws',
+    },
+  }}
+>
+  <App />
+</SipProvider>
+```
+
+---
+
+### 2. Make calls with hooks
+
+```tsx
+import { useSipProvider, useSessionMethods } from 'react-sip-kit';
+
+function DialPad() {
+  const { status } = useSipProvider();
+  const { dialByNumber } = useSessionMethods();
+
+  return (
+    <>
+      <p>Status: {status}</p>
+      <button onClick={() => dialByNumber('audio', '1012')}>Call 1012</button>
+      <button onClick={() => dialByNumber('video', '1012')}>Video Call 1012</button>
+    </>
+  );
+}
+```
+
+---
+
+### 3. Render media streams
+
+```tsx
+import { VideoStream, AudioStream } from 'react-sip-kit';
+
+<VideoStream type="local" lineNumber={1} />
+<VideoStream type="remote" lineNumber={1} />
+<AudioStream type="local" lineNumber={1} />
+<AudioStream type="remote" lineNumber={1} />
+```
+
+---
+
+## ⚙️ Configuration
+
+All SIP and media settings can be customized via the `configs` prop.
+See [types.ts](https://github.com/shervin-ghajar/react-sip-kit/blob/main/src/configs/types.ts) for the full options.
+
+```ts
+{
+  account: { ... },
+  features: { enableVideo: true },
+  media: { audioInputDeviceId: 'default' },
+  registration: { registerExpires: 3600 },
+}
+```
+
+---
+
+## 💡 Best Practices
+
+* Use hooks (`useSipProvider`, `useSessionMethods`) for SIP state & actions.
+* Render media components only for active calls.
+* Handle device permissions and selection gracefully.
+* Reinitialize streams with `initiateRemoteMediaStreams` or `initiateLocalMediaStreams` if `<video>`/`<audio>` is rendered after the call starts.
+* Prefer TypeScript for better DX and safety.
+
+---
+
+## 🧑‍💻 Full Example
+
+A full working demo (with call controls, transfer, hold, recording, etc.) is available in the
+[`/example`](https://github.com/shervin-ghajar/react-sip-kit/tree/main/example) folder of this repo.
+
+This example demonstrates:
+
+* Multi-line SIP handling
+* Answering/rejecting calls
+* Call transfer, hold, mute
+* Recording and screen sharing
+* Local/remote audio & video streams
+
+---
+
+## 📄 License
+
+MIT License
+
+---
+
+## 👤 Author
+
+**Shervin Ghajar**
+
+* GitHub: [@shervin-ghajar](https://github.com/shervin-ghajar)
+* NPM: [react-sip-kit](https://www.npmjs.com/package/react-sip-kit)
+* Repository: [react-sip-kit](https://github.com/shervin-ghajar/react-sip-kit)
+

package/dist/components/audio/index.d.ts

@@ -1,7 +1,15 @@
-import { AudioHTMLAttributes } from 'react';
-interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {
+import { AudioHTMLAttributes, HTMLAttributes } from 'react';
+interface DefaultAudioProps {
     lineNumber: string | number;
-    type?: 'transfer' | 'conference';
 }
-export declare const Audio: ({ lineNumber, type, ...rest }: AudioProps) => import("react/jsx-runtime").JSX.Element;
+interface LocalAudioProps extends AudioHTMLAttributes<HTMLAudioElement>, DefaultAudioProps {
+    type: 'local';
+    id?: `line-${number}-${LocalAudioProps['type']}Audio`;
+}
+interface RemoteAudioProps extends HTMLAttributes<HTMLDivElement>, DefaultAudioProps {
+    type: 'remote';
+    id?: `line-${number}-remoteAudios`;
+}
+type AudioProps = LocalAudioProps | RemoteAudioProps;
+export declare const Audio: ({ lineNumber, ...rest }: AudioProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/video/index.d.ts

@@ -4,9 +4,11 @@ interface DefaultVideoProps {
 }
 interface LocalVideoProps extends VideoHTMLAttributes<HTMLVideoElement>, DefaultVideoProps {
     type: 'local';
+    id?: `line-${number}-${LocalVideoProps['type']}Video` | `line-${number}-remoteVideos`;
 }
 interface RemoteVidepProps extends HTMLAttributes<HTMLDivElement>, DefaultVideoProps {
     type: 'remote';
+    id?: `line-${number}-${RemoteVidepProps['type']}Video` | `line-${number}-remoteVideos`;
 }
 type VideoProps = LocalVideoProps | RemoteVidepProps;
 export declare const Video: ({ lineNumber, ...rest }: VideoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configs/types.d.ts

@@ -36,8 +36,8 @@ export interface SipAdvancedConfig {
     chatEngine: string;
 }
 export interface SipRecordingConfig {
-    videoResampleSize: string;
-    recordingVideoSize: string;
+    videoResampleSize: 'HD' | 'FHD';
+    recordingVideoSize: 'HD' | 'FHD';
     recordingVideoFps: number;
     recordingLayout: string;
 }

package/dist/constructors/line.d.ts

@@ -1,10 +1,9 @@
 import { LineType, SipInvitationType } from '../store/types';
-export declare class Line<T extends Partial<object>> implements LineType<T> {
+export declare class Line implements LineType {
     lineNumber: number;
     displayNumber: string;
-    metaData: Partial<T>;
     sipSession: SipInvitationType | null;
     localSoundMeter: any;
     remoteSoundMeter: any;
-    constructor(lineNumber: number, displayNumber: string, metaData: T);
+    constructor(lineNumber: number, displayNumber: string);
 }

package/dist/events/transport/index.d.ts

@@ -1,5 +1,5 @@
 import { SipUserAgent } from '../../types';
-export declare function onTransportConnected(userAgent?: SipUserAgent): void;
-export declare function onTransportConnectError(error: any, userAgent?: SipUserAgent): void;
+export declare function onTransportConnected(userAgent?: SipUserAgent | undefined): void;
+export declare function onTransportConnectError(error: Error, userAgent?: SipUserAgent | undefined): void;
 export declare function onTransportDisconnected(userAgent: SipUserAgent): void;
-export declare function reconnectTransport(userAgent?: SipUserAgent): void;
+export declare function reconnectTransport(userAgent?: SipUserAgent | undefined): void;

package/dist/hooks/useGetMediaDevices/index.d.ts

@@ -0,0 +1,10 @@
+export declare const useGetMediaDevices: () => {
+    getDevices: () => Promise<{
+        hasAudioDevice: boolean;
+        audioInputDevices: MediaDeviceInfo[];
+        hasSpeakerDevice: boolean;
+        speakerDevices: MediaDeviceInfo[];
+        hasVideoDevice: boolean;
+        videoInputDevices: MediaDeviceInfo[];
+    }>;
+};

package/dist/hooks/useSessionEvents/index.d.ts

@@ -4,7 +4,7 @@ import { Bye, Message } from 'sip.js';
 import { IncomingRequestMessage, IncomingResponse } from 'sip.js/lib/core';
 export declare const useSessionEvents: () => {
     onInviteCancel: (lineObj: LineType, response: IncomingRequestMessage, callback?: CallbackFunction<any>) => void;
-    onInviteAccepted: (lineObj: LineType, includeVideo: boolean, response?: IncomingResponse) => void;
+    onInviteAccepted: (lineObj: LineType, videoEnabled: boolean, response?: IncomingResponse) => Promise<void>;
     onInviteTrying: (lineObj: LineType, response: IncomingResponse) => void;
     onInviteProgress: (lineObj: LineType, response: IncomingResponse) => void;
     onInviteRejected: (lineObj: LineType, response: IncomingResponse, callback?: CallbackFunction<any>) => void;
@@ -13,6 +13,6 @@ export declare const useSessionEvents: () => {
     onSessionReinvited: (lineObj: LineType, response: IncomingRequestMessage) => void;
     onSessionReceivedMessage: (lineObj: LineType, response: Message) => void;
     onSessionDescriptionHandlerCreated: (lineObj: LineType, sdh: SipSessionDescriptionHandler, provisional: boolean, includeVideo?: boolean) => void;
-    onTrackAddedEvent: (lineObj: LineType, includeVideo?: boolean) => void;
+    onTrackAddedEvent: (lineObj: LineType, videoEnabled?: boolean) => Promise<void>;
     onTransferSessionDescriptionHandlerCreated: (lineObj: LineType, session: SipSessionType, sdh: SipSessionDescriptionHandler, includeVideo?: boolean) => void;
 };

package/dist/hooks/useSessionMethods/index.d.ts

@@ -1,17 +1,23 @@
 import { LineType, SipInvitationType } from '../../store/types';
+import { CallType } from '../../types';
 export declare const useSessionMethods: () => {
-    receiveCall: (session: SipInvitationType) => void;
+    receiveSession: (invitation: SipInvitationType) => void;
     answerAudioSession: (lineNumber: LineType["lineNumber"]) => void;
-    answerVideoSession: (lineNumber: LineType["lineNumber"]) => void;
+    answerVideoSession: (lineNumber: LineType["lineNumber"], enableVideo?: boolean) => void;
     makeAudioSession: (lineObj: LineType, dialledNumber: string, extraHeaders?: Array<string>) => void;
     makeVideoSession: (lineObj: LineType, dialledNumber: string, extraHeaders?: Array<string>) => void;
-    rejectCall: (lineNumber: LineType["lineNumber"]) => void;
-    dialByLine: (type: "audio" | "video", dialNumber: string, metaData?: object, extraHeaders?: Array<string>) => void;
+    toggleLocalVideoTrack: (lineNumber: LineType["lineNumber"]) => Promise<void>;
+    toggleShareScreen: (lineNumber: LineType["lineNumber"]) => Promise<void>;
+    rejectSession: (lineNumber: LineType["lineNumber"]) => void;
+    dialByNumber: (type: Extract<CallType, "audio" | "video">, dialNumber: string, extraHeaders?: Array<string>) => void;
+    makeConferenceSession: (lineObj: LineType, extraHeaders?: Array<string>) => void;
     endSession: (lineNumber: LineType["lineNumber"]) => void;
-    holdSession: (lineNumber: LineType["lineNumber"]) => void;
-    unholdSession: (lineNumber: LineType["lineNumber"]) => void;
-    muteSession: (lineNumber: LineType["lineNumber"]) => void;
-    unmuteSession: (lineNumber: LineType["lineNumber"]) => void;
+    recordSession: (lineNumber: LineType["lineNumber"]) => {
+        start: () => Promise<void>;
+        stop: () => void;
+    };
+    toggleMuteSession: (lineNumber: LineType["lineNumber"]) => void;
+    toggleHoldSession: (lineNumber: LineType["lineNumber"], forcedValue?: boolean) => Promise<void>;
     cancelSession: (lineNumber: LineType["lineNumber"]) => void;
     startTransferSession: (lineNumber: LineType["lineNumber"]) => void;
     cancelTransferSession: (lineNumber: LineType["lineNumber"]) => void;