@afosecure/meetingsdk 1.3.8 → 1.4.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 AFOLABI MUBARAK
-
-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) 2026 AFOLABI MUBARAK
+
+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,253 +1,253 @@
-# 📹 @afosecure/meetingsdk — React Video Meeting SDK
-
-A modern, lightweight React SDK for building peer-to-peer video communication applications using WebRTC. Designed with a clean, composable API and reactive state management.
-
----
-
-## Features
-
-- WebRTC peer-to-peer video (no central media server required)
-- React Hooks API for seamless integration
-- Reactive state system for participants & streams
-- Lightweight core optimized for performance
-- Flexible WebSocket signaling backend support
-- Full TypeScript support
-
----
-
-## 📦 Installation
-
-```bash
-npm install @afosecure/meetingsdk
-# or
-yarn add @afosecure/meetingsdk
-# or
-pnpm add @afosecure/meetingsdk
-```
-
----
-
-## Quick Start
-
-### 1. Initialize SDK
-
-```tsx
-import { useState } from "react";
-import {
-  MeetingProvider,
-  MeetingState,
-  VideoSDKCore,
-} from "@afosecure/meetingsdk";
-
-function App() {
-  const [core] = useState(
-    () =>
-      new VideoSDKCore({
-        onTrack: (_, peerId) => {
-          console.log("📹 Received stream from:", peerId);
-        },
-        onUserJoined: (participant) => {
-          console.log("👤 User joined:", participant.name);
-        },
-        onUserLeft: (userId) => {
-          console.log("👤 User left:", userId);
-        },
-      }),
-  );
-
-  return (
-    <MeetingProvider core={core}>
-      <VideoCall />
-    </MeetingProvider>
-  );
-}
-
-export default App;
-```
-
----
-
-### 2. Basic Video Call
-
-```tsx
-import { useRef, useState } from "react";
-import { useMeeting, useParticipants } from "@afosecure/meetingsdk";
-
-function VideoCall() {
-  const { join, startLocalStream, leave, localParticipant } = useMeeting();
-  const participants = useParticipants();
-  const localVideoRef = useRef<HTMLVideoElement>(null);
-
-  const [roomId, setRoomId] = useState("");
-  const [name, setName] = useState("");
-
-  const handleJoin = async () => {
-    if (!localVideoRef.current) return;
-
-    await startLocalStream(localVideoRef.current, name);
-    await join(roomId, name);
-  };
-
-  return (
-    <div>
-      {!localParticipant ? (
-        <>
-          <input value={name} onChange={(e) => setName(e.target.value)} />
-          <input value={roomId} onChange={(e) => setRoomId(e.target.value)} />
-          <button onClick={handleJoin}>Join Meeting</button>
-        </>
-      ) : (
-        <>
-          <video ref={localVideoRef} autoPlay muted />
-          <button onClick={leave}>Leave</button>
-
-          {participants.map((p) => (
-            <div key={p.id}>{p.name}</div>
-          ))}
-        </>
-      )}
-    </div>
-  );
-}
-```
-
----
-
-## Core Concepts
-
-### MeetingState
-
-```ts
-const state = new MeetingState();
-
-state.getParticipants();
-
-state.subscribe(() => {
-  console.log("updated");
-});
-```
-
----
-
-### VideoSDKCore
-
-```ts
-const core = new VideoSDKCore(state, {
-  onTrack: (stream, peerId) => {},
-  onUserJoined: (p) => {},
-  onUserLeft: (id) => {},
-});
-```
-
----
-
-## Hooks API
-
-### useMeeting()
-
-```ts
-const { join, startLocalStream, leave, localParticipant, meetingId } =
-  useMeeting();
-```
-
----
-
-### useParticipants()
-
-```ts
-const participants = useParticipants();
-```
-
----
-
-### useRemoteVideo()
-
-```tsx
-const ref = useRemoteVideo(participantId);
-
-return <video ref={ref} autoPlay />;
-```
-
----
-
-### useLocalStream()
-
-```ts
-const stream = useLocalStream();
-```
-
----
-
-### useStreams()
-
-```ts
-const streams = useStreams();
-```
-
----
-
-## Complete Example
-
-```tsx
-export default function App() {
-  const [state] = useState(() => new MeetingState());
-
-  const [core] = useState(
-    () =>
-      new VideoSDKCore(state, {
-        onTrack: () => {},
-        onUserJoined: () => {},
-        onUserLeft: () => {},
-      }),
-  );
-
-  return (
-    <MeetingProvider core={core}>
-      <VideoCallContent />
-    </MeetingProvider>
-  );
-}
-```
-
----
-
-## Server Requirements
-
-Your WebSocket server must support:
-
-### Client → Server
-
-- JOIN
-- OFFER
-- ANSWER
-- ICE
-
-### Server → Client
-
-- EXISTING_USERS
-- USER_JOINED
-- USER_LEFT
-
----
-
-## Performance Tips
-
-- Stop media tracks on leave
-- Memoize participant components
-- Use multiple STUN servers
-- Avoid re-rendering video elements
-
----
-
-## Browser Support
-
-- Chrome 54+
-- Firefox 55+
-- Safari 11+
-- Edge 79+
-
----
-
-## 📄 License
-
-MIT
+# 📹 @afosecure/meetingsdk — React Video Meeting SDK
+
+A modern, lightweight React SDK for building peer-to-peer video communication applications using WebRTC. Designed with a clean, composable API and reactive state management.
+
+---
+
+## Features
+
+- WebRTC peer-to-peer video (no central media server required)
+- React Hooks API for seamless integration
+- Reactive state system for participants & streams
+- Lightweight core optimized for performance
+- Flexible WebSocket signaling backend support
+- Full TypeScript support
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @afosecure/meetingsdk
+# or
+yarn add @afosecure/meetingsdk
+# or
+pnpm add @afosecure/meetingsdk
+```
+
+---
+
+## Quick Start
+
+### 1. Initialize SDK
+
+```tsx
+import { useState } from "react";
+import {
+  MeetingProvider,
+  MeetingState,
+  VideoSDKCore,
+} from "@afosecure/meetingsdk";
+
+function App() {
+  const [core] = useState(
+    () =>
+      new VideoSDKCore({
+        onTrack: (_, peerId) => {
+          console.log("📹 Received stream from:", peerId);
+        },
+        onUserJoined: (participant) => {
+          console.log("👤 User joined:", participant.name);
+        },
+        onUserLeft: (userId) => {
+          console.log("👤 User left:", userId);
+        },
+      }),
+  );
+
+  return (
+    <MeetingProvider core={core}>
+      <VideoCall />
+    </MeetingProvider>
+  );
+}
+
+export default App;
+```
+
+---
+
+### 2. Basic Video Call
+
+```tsx
+import { useRef, useState } from "react";
+import { useMeeting, useParticipants } from "@afosecure/meetingsdk";
+
+function VideoCall() {
+  const { join, startLocalStream, leave, localParticipant } = useMeeting();
+  const participants = useParticipants();
+  const localVideoRef = useRef<HTMLVideoElement>(null);
+
+  const [roomId, setRoomId] = useState("");
+  const [name, setName] = useState("");
+
+  const handleJoin = async () => {
+    if (!localVideoRef.current) return;
+
+    await startLocalStream(localVideoRef.current, name);
+    await join(roomId, name);
+  };
+
+  return (
+    <div>
+      {!localParticipant ? (
+        <>
+          <input value={name} onChange={(e) => setName(e.target.value)} />
+          <input value={roomId} onChange={(e) => setRoomId(e.target.value)} />
+          <button onClick={handleJoin}>Join Meeting</button>
+        </>
+      ) : (
+        <>
+          <video ref={localVideoRef} autoPlay muted />
+          <button onClick={leave}>Leave</button>
+
+          {participants.map((p) => (
+            <div key={p.id}>{p.name}</div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+---
+
+## Core Concepts
+
+### MeetingState
+
+```ts
+const state = new MeetingState();
+
+state.getParticipants();
+
+state.subscribe(() => {
+  console.log("updated");
+});
+```
+
+---
+
+### VideoSDKCore
+
+```ts
+const core = new VideoSDKCore(state, {
+  onTrack: (stream, peerId) => {},
+  onUserJoined: (p) => {},
+  onUserLeft: (id) => {},
+});
+```
+
+---
+
+## Hooks API
+
+### useMeeting()
+
+```ts
+const { join, startLocalStream, leave, localParticipant, meetingId } =
+  useMeeting();
+```
+
+---
+
+### useParticipants()
+
+```ts
+const participants = useParticipants();
+```
+
+---
+
+### useRemoteVideo()
+
+```tsx
+const ref = useRemoteVideo(participantId);
+
+return <video ref={ref} autoPlay />;
+```
+
+---
+
+### useLocalStream()
+
+```ts
+const stream = useLocalStream();
+```
+
+---
+
+### useStreams()
+
+```ts
+const streams = useStreams();
+```
+
+---
+
+## Complete Example
+
+```tsx
+export default function App() {
+  const [state] = useState(() => new MeetingState());
+
+  const [core] = useState(
+    () =>
+      new VideoSDKCore(state, {
+        onTrack: () => {},
+        onUserJoined: () => {},
+        onUserLeft: () => {},
+      }),
+  );
+
+  return (
+    <MeetingProvider core={core}>
+      <VideoCallContent />
+    </MeetingProvider>
+  );
+}
+```
+
+---
+
+## Server Requirements
+
+Your WebSocket server must support:
+
+### Client → Server
+
+- JOIN
+- OFFER
+- ANSWER
+- ICE
+
+### Server → Client
+
+- EXISTING_USERS
+- USER_JOINED
+- USER_LEFT
+
+---
+
+## Performance Tips
+
+- Stop media tracks on leave
+- Memoize participant components
+- Use multiple STUN servers
+- Avoid re-rendering video elements
+
+---
+
+## Browser Support
+
+- Chrome 54+
+- Firefox 55+
+- Safari 11+
+- Edge 79+
+
+---
+
+## 📄 License
+
+MIT

package/dist/index.d.mts

@@ -144,8 +144,6 @@ declare class VideoSDKCore {
     readonly state: MeetingState;
     private joinResolver?;
     private joinRejecter?;
-    private initialAudioMuted;
-    private initialVideoMuted;
     private isWaitingForApproval;
     private pendingRequestId;
     private iceTransportPolicy;

package/dist/index.d.ts

@@ -144,8 +144,6 @@ declare class VideoSDKCore {
     readonly state: MeetingState;
     private joinResolver?;
     private joinRejecter?;
-    private initialAudioMuted;
-    private initialVideoMuted;
     private isWaitingForApproval;
     private pendingRequestId;
     private iceTransportPolicy;

package/dist/index.js

@@ -39,7 +39,8 @@ var import_react2 = require("react");
 
 // src/config/ws.ts
 var SDK_CONFIG = {
-  wsUrl: "wss://rust-video-server-sfyf.onrender.com/ws"
+  wsUrl: "wss://rust-video-server-sfyf.onrender.com/ws",
+  baseUrl: "https://rust-video-server-sfyf.onrender.com"
 };
 
 // src/core/MeetingState.ts
@@ -214,8 +215,6 @@ var VideoSDKCore = class {
     this.pendingOffers = {};
     this.reconnectAttempts = 0;
     this.participantName = "";
-    this.initialAudioMuted = false;
-    this.initialVideoMuted = false;
     // Track if we're in the waiting room (pending approval)
     this.isWaitingForApproval = false;
     this.pendingRequestId = null;
@@ -293,8 +292,8 @@ var VideoSDKCore = class {
           user_id: this.myId,
           sender_name: name,
           camera_stream_id: this.localStream?.id.replace(/[{}]/g, ""),
-          audio_muted: this.initialAudioMuted,
-          video_muted: this.initialVideoMuted
+          audio_muted: this.state.localParticipant?.media?.micEnabled,
+          video_muted: this.state.localParticipant?.media?.camEnabled
         });
       };
       this.ws.onerror = (err) => {
@@ -328,8 +327,6 @@ var VideoSDKCore = class {
     if (!roomId || !name) {
       throw new Error("roomId and name are required to join meeting");
     }
-    this.initialAudioMuted = audioMuted;
-    this.initialVideoMuted = videoMuted;
     this.participantName = name;
     if (!this.localStream) {
       this.localStream = await navigator.mediaDevices.getUserMedia({
@@ -578,18 +575,17 @@ var VideoSDKCore = class {
           }
           this.pendingOffers = {};
         }
-        if (this.initialAudioMuted) {
+        const media = this.state.localParticipant?.media;
+        if (media) {
           this.send({
             type: "MEDIA_STATE",
             kind: "audio",
-            enabled: false
+            enabled: !!media.micEnabled
           });
-        }
-        if (this.initialVideoMuted) {
           this.send({
             type: "MEDIA_STATE",
             kind: "video",
-            enabled: false
+            enabled: !!media.camEnabled
           });
         }
         this.startHeartbeat();