videocall-client-socket 0.1.7 → 0.1.8

package/README.md

@@ -1,6 +1,6 @@
 # 📞 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,33 +42,30 @@ 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
-SocketClient.createMediaStream()
+VideoClient.createMediaStream()
   .then(() => {
     // Step 3: Play local stream in <video> tag
     VideoClient.playVideoTrack("localVideo");
-    SocketClient.joinChannel(userId, channelName);
-
-    // Step 4: Join the signaling channel
-    //IMPORTANT: The service repository is located at the bottom.
     VideoClient.setServerURL("http://localhost:3000");
-    VideoClient.joinChannel(userId, channelName);
+    // Step 4: Join the signaling channel
+    VideoClient.joinChannel(userId, userUUID, channelName);
   })
   .catch((err) => {
     console.error(err);
@@ -83,7 +83,7 @@ SocketClient.createMediaStream()
 | 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.
 
@@ -94,7 +94,7 @@ SocketClient.createMediaStream()
 ### 🔌 Connection
 
 - `setServerURL(url: string): void`
-- `joinChannel(userId: string, room: string): void`
+- `joinChannel(userId: string, userUUID: string, room: string): void`
 - `leaveChannel(): void`
 
 ### 🎥 Media Controls
@@ -110,9 +110,9 @@ SocketClient.createMediaStream()
 
 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:
 
@@ -121,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.7",
+  "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,6 +5,7 @@ var socket = null;
 var mediastream = null;
 var localVideoId = "";
 var userId = "";
+var userUUID = "";
 var serverURL = 'http://localhost:3000';
 let events = {};
 
@@ -90,51 +91,59 @@ 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(serverURL, {
-        query: { room: channelName, userId }
+        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 }) => {
-        console.log("User joined", newUserId, newSocketId);
+    socket.on('user-joined', ({ userId: newUserId, userUUID: newUserUUID, socketId: newSocketId }) => {
+        // console.log("User joined", newUserId, newUserUUID, newSocketId);
 
-        const peer = createPeer(socket, mediastream, newSocketId, newUserId, false);
-        peers[newUserId] = peer;
+        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
         });
@@ -177,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,
@@ -198,7 +208,8 @@ function createPeer(socket, localStream, targetSocketId, remoteUserId, initiator
 
         emit("user-published", {
             user: {
-                uuid: remoteUserId,
+                userId: remoteUserId,
+                userUUID: remoteUserUUID,
                 videotrack: stream
             },
             mediaType: "video"
@@ -207,7 +218,6 @@ function createPeer(socket, localStream, targetSocketId, remoteUserId, initiator
         setTimeout(() => {
             socket.emit('initial-media-status', {
                 targetId: targetSocketId,
-                userId: userId,
                 audio: isAudioOn(),
                 video: isCameraOn()
             });
@@ -231,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 });
     }
 }
 
@@ -254,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 });
     }
 }