videocall-client-socket 0.1.6 → 0.1.8

package/README.md

@@ -1,6 +1,6 @@
-# 📞 videocall-client-socket
+# 📞 videocall-socket-client
 
-A simple WebRTC client library for peer-to-peer video calls using [simple-peer](https://www.npmjs.com/package/simple-peer) and [socket.io-client](https://www.npmjs.com/package/socket.io-client).
+A WebRTC client library for multi-user video calls (mesh per room) using [simple-peer](https://www.npmjs.com/package/simple-peer) and [socket.io-client](https://www.npmjs.com/package/socket.io-client).
 
 > ✅ Designed to work with [videocall-server](https://github.com/EmersonJaraG28/videocall-server)
 
@@ -30,7 +30,10 @@ This makes SimplePeer available globally in the browser.
 import * as VideoClient from "videocall-client-socket";
 import { v4 as uuidv4 } from "uuid";
 
-const userId = uuidv4();
+// Stable user identity (same user across devices/sessions)
+const userId = "user-123";
+// Unique device/session identity
+const userUUID = uuidv4();
 const channelName = "roomABC";
 
 // Step 1: Subscribe to events before anything else
@@ -39,31 +42,34 @@ VideoClient.on("user-published", (data) => {
   const video = document.createElement("video");
   video.srcObject = user.videotrack;
   video.autoplay = true;
-  video.id = user.uuid;
+  video.id = user.userUUID;
   document.body.appendChild(video);
 });
 VideoClient.on("user-unpublished", (data) => {
   const { user, mediaType } = data;
   if (mediaType === "video") {
-    const video = document.getElementById(`${user.uuid}`);
+    const video = document.getElementById(`${user.userUUID}`);
     if (video) {
       video.remove();
     }
   }
 });
 VideoClient.on("user-media-toggled", (data) => {
-  console.log(data.user.uuid, data.type, data.enabled);
+  console.log(data.user.userId, data.user.userUUID, data.type, data.enabled);
 });
 
 // Step 2: Create media stream
-await VideoClient.createMediaStream();
-
-// Step 3: Play local stream in <video> tag
-VideoClient.playVideoTrack("localVideo");
-
-// Step 4: Join the signaling channel
-VideoClient.setServerURL("http://localhost:3000");
-VideoClient.joinChannel(userId, channelName);
+VideoClient.createMediaStream()
+  .then(() => {
+    // Step 3: Play local stream in <video> tag
+    VideoClient.playVideoTrack("localVideo");
+    VideoClient.setServerURL("http://localhost:3000");
+    // Step 4: Join the signaling channel
+    VideoClient.joinChannel(userId, userUUID, channelName);
+  })
+  .catch((err) => {
+    console.error(err);
+  });
 ```
 
 ---
@@ -77,7 +83,7 @@ VideoClient.joinChannel(userId, channelName);
 | 1️⃣   | `on(...)`                        | You must subscribe to events **before** joining the channel.   |
 | 2️⃣   | `createMediaStream()`            | This requests access to camera and microphone.                 |
 | 3️⃣   | `playVideoTrack(videoElementId)` | This shows your local stream in a `<video>` tag.               |
-| 4️⃣   | `joinChannel(userId, room)`      | Finally, join the signaling server and start peer connections. |
+| 4️⃣   | `joinChannel(userId, userUUID, room)` | Finally, join the signaling server and start peer connections. |
 
 > 🧠 Skipping or reordering these steps may cause video/audio to not work properly or event listeners to be missed.
 
@@ -88,7 +94,7 @@ VideoClient.joinChannel(userId, channelName);
 ### 🔌 Connection
 
 - `setServerURL(url: string): void`
-- `joinChannel(userId: string, room: string): void`
+- `joinChannel(userId: string, userUUID: string, room: string): void`
 - `leaveChannel(): void`
 
 ### 🎥 Media Controls
@@ -104,9 +110,9 @@ VideoClient.joinChannel(userId, channelName);
 
 Use `on(event, callback)` and `off(event, callback)`.
 
-- `user-published`: `{ user: { uuid, videotrack }, mediaType }`
-- `user-unpublished`: `{ user: { uuid }, mediaType }`
-- `user-media-toggled`: `{ user: { uuid }, type, enabled }`
+- `user-published`: `{ user: { userId, userUUID, videotrack }, mediaType }`
+- `user-unpublished`: `{ user: { userId, userUUID }, mediaType }`
+- `user-media-toggled`: `{ user: { userId, userUUID }, type, enabled }`
 
 #### Example:
 
@@ -115,13 +121,22 @@ VideoClient.on("user-published", ({ user }) => {
   const video = document.createElement("video");
   video.srcObject = user.videotrack;
   video.autoplay = true;
-  video.id = user.uuid;
+  video.id = user.userUUID;
   document.body.appendChild(video);
 });
 ```
 
 ---
 
+## 🕸 Multi-user Model
+
+- Each room supports multiple participants.
+- WebRTC connections are created in mesh mode (one peer connection per remote participant).
+- `userId` identifies the person.
+- `userUUID` identifies a specific device/session for that person.
+
+---
+
 ## 🧩 Backend Integration
 
 This library is designed to work with the following signaling server:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "videocall-client-socket",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "scripts": {

package/src/index.d.ts

@@ -14,6 +14,6 @@ declare module 'videocall-client-socket' {
 
     export function playVideoTrack(localVideoId: string): void;
 
-    export function joinChannel(userId: string, channelName: string): void;
+    export function joinChannel(userId: string, userUUID: string, channelName: string): void;
     export function leaveChannel(): void;
-}
+}

package/src/index.js

@@ -5,7 +5,8 @@ var socket = null;
 var mediastream = null;
 var localVideoId = "";
 var userId = "";
-var url = 'http://localhost:3000';
+var userUUID = "";
+var serverURL = 'http://localhost:3000';
 let events = {};
 
 /**
@@ -42,20 +43,39 @@ let emit = (_event, data) => {
  * @param {string} _url - Server URL (e.g. "http://localhost:3000").
  */
 export function setServerURL(_url) {
-    url = _url;
+    serverURL = _url;
 }
 
 /**
- * Requests access to the user's camera and microphone.
- * @returns {Promise<MediaStream>} - Resolves with a MediaStream containing audio and video.
+ * Requests access to both camera and microphone.
+ * Throws an error if either device is missing or denied.
+ * @returns {Promise<MediaStream>}
  */
 export function createMediaStream() {
-    return navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
-        mediastream = stream;
-        return stream;
+    return new Promise((resolve, reject) => {
+        navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
+            const hasVideo = stream.getVideoTracks().length > 0;
+            const hasAudio = stream.getAudioTracks().length > 0;
+
+            if (!hasVideo || !hasAudio) {
+                stream.getTracks().forEach(track => track.stop()); // cleanup
+                throw new Error(
+                    !hasVideo && !hasAudio
+                        ? "Camera and microphone are not available."
+                        : !hasVideo
+                            ? "Camera is not available."
+                            : "Microphone is not available."
+                );
+            }
+
+            mediastream = stream;
+            resolve(mediastream);
+        }).catch((err) => {
+            reject("Camera and microphone are not available.");
+        });
     });
-}
 
+}
 /**
  * Plays the local video stream into a specified <video> element.
  * @param {string} _localVideoId - The ID of the <video> element in the DOM.
@@ -71,53 +91,64 @@ export function playVideoTrack(_localVideoId) {
 /**
  * Connects to the signaling server and joins a room.
  * @param {string} _userId - Unique identifier for the user.
+ * @param {string} _userUUID - Unique identifier for this device/session.
  * @param {string} channelName - The name of the room to join.
  */
-export function joinChannel(_userId, channelName) {
+export function joinChannel(_userId, _userUUID, channelName) {
     userId = _userId;
+    userUUID = _userUUID;
 
-    socket = io(url, {
-        query: { room: channelName, userId }
+    socket = io(serverURL, {
+        query: { room: channelName, userId, userUUID }
     });
 
     socket.on('all-users', users => {
-        users.forEach(({ userId: remoteUserId, socketId }) => {
-            const peer = createPeer(socket, mediastream, socketId, remoteUserId, true);
-            peers[remoteUserId] = peer;
+        users.forEach(({ userId: remoteUserId, userUUID: remoteUserUUID, socketId, }) => {
+            const peer = createPeer(socket, mediastream, socketId, remoteUserId, remoteUserUUID, true);
+            peers[remoteUserUUID] = peer;
         });
     });
 
-    socket.on('user-joined', ({ userId: newUserId, socketId: newSocketId }) => {
-        const peer = createPeer(socket, mediastream, newSocketId, newUserId, false);
-        peers[newUserId] = peer;
+    socket.on('user-joined', ({ userId: newUserId, userUUID: newUserUUID, socketId: newSocketId }) => {
+        // console.log("User joined", newUserId, newUserUUID, newSocketId);
+
+        const peer = createPeer(socket, mediastream, newSocketId, newUserId, newUserUUID, false);
+        peers[newUserUUID] = peer;
     });
 
-    socket.on('signal', ({ fromUserId, signal }) => {
-        const peer = peers[fromUserId];
+    socket.on('signal', ({ fromUserId, fromUserUUID, signal }) => {
+        const peer = peers[fromUserUUID || fromUserId];
         if (peer) {
             peer.signal(signal);
         }
     });
 
-    socket.on('user-left', ({ userId: leftUserId }) => {
-        if (peers[leftUserId]) {
-            peers[leftUserId].destroy();
-            delete peers[leftUserId];
+    socket.on('user-left', ({ userId: leftUserId, userUUID: leftUserUUID }) => {
+        if (peers[leftUserUUID]) {
+            peers[leftUserUUID].destroy();
+            delete peers[leftUserUUID];
         }
 
         emit("user-unpublished", {
-            user: { uuid: leftUserId },
+            user: {
+                userId: leftUserId,
+                userUUID: leftUserUUID
+            },
             mediaType: "video"
         });
     });
 
-    socket.on('user-media-toggled', ({ userId, type, enabled }) => {
+    socket.on('user-media-toggled', ({ userId, userUUID, type, enabled }) => {
         emit('user-media-toggled', {
-            user: { uuid: userId },
+            user: {
+                userId,
+                userUUID
+            },
             type,
             enabled
         });
     });
+
 }
 
 /**
@@ -155,10 +186,11 @@ export function leaveChannel() {
  * @param {MediaStream} localStream - The local media stream.
  * @param {string} targetSocketId - The socket ID of the remote user.
  * @param {string} remoteUserId - The ID of the remote user.
+ * @param {string} remoteUserUUID - The device/session ID of the remote user.
  * @param {boolean} initiator - Whether this peer initiates the connection.
  * @returns {SimplePeer.Instance} - The created peer.
  */
-function createPeer(socket, localStream, targetSocketId, remoteUserId, initiator) {
+function createPeer(socket, localStream, targetSocketId, remoteUserId, remoteUserUUID, initiator) {
     const peer = new SimplePeer({
         initiator,
         trickle: false,
@@ -173,13 +205,23 @@ function createPeer(socket, localStream, targetSocketId, remoteUserId, initiator
     });
 
     peer.on('stream', stream => {
+
         emit("user-published", {
             user: {
-                uuid: remoteUserId,
+                userId: remoteUserId,
+                userUUID: remoteUserUUID,
                 videotrack: stream
             },
             mediaType: "video"
         });
+
+        setTimeout(() => {
+            socket.emit('initial-media-status', {
+                targetId: targetSocketId,
+                audio: isAudioOn(),
+                video: isCameraOn()
+            });
+        }, 100);
     });
 
     peer.on('error', err => {
@@ -199,7 +241,7 @@ export function toggleCamera(on) {
         track.enabled = on;
     });
     if (socket) {
-        socket.emit('media-toggle', { userId, type: 'video', enabled: on });
+        socket.emit('media-toggle', { userId, userUUID, type: 'video', enabled: on });
     }
 }
 
@@ -222,7 +264,7 @@ export function toggleAudio(on) {
         track.enabled = on;
     });
     if (socket) {
-        socket.emit('media-toggle', { userId, type: 'audio', enabled: on });
+        socket.emit('media-toggle', { userId, userUUID, type: 'audio', enabled: on });
     }
 }