videocall-client-socket 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,124 @@
+# 📞 videocall-client-socket
+
+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).
+
+> ✅ Designed to work with [videocall-server](https://github.com/EmersonJaraG28/videocall-server)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install videocall-client-socket
+```
+
+---
+
+## 🚀 Quick Start
+
+```js
+import * as VideoClient from "videocall-client-socket";
+import { v4 as uuidv4 } from "uuid";
+
+const userId = uuidv4();
+const roomName = "roomABC";
+
+// Step 1: Subscribe to events before anything else
+VideoClient.on("user-published", handleUserPublished);
+VideoClient.on("user-unpublished", handleUserUnpublished);
+VideoClient.on("user-media-toggled", (data) => {
+  console.log(data.user.uuid, 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, roomName);
+```
+
+---
+
+## 📋 Execution Order
+
+> To use this library correctly, follow this sequence of steps:
+
+| Step | Function                         | Why?                                                           |
+| ---- | -------------------------------- | -------------------------------------------------------------- |
+| 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. |
+
+> 🧠 Skipping or reordering these steps may cause video/audio to not work properly or event listeners to be missed.
+
+---
+
+## 📘 API Reference
+
+### 🔌 Connection
+
+- `setServerURL(url: string): void`
+- `joinChannel(userId: string, room: string): void`
+- `leaveChannel(): void`
+
+### 🎥 Media Controls
+
+- `createMediaStream(): Promise<MediaStream>`
+- `playVideoTrack(localVideoId: string): void`
+- `toggleCamera(on: boolean): void`
+- `isCameraOn(): boolean`
+- `toggleAudio(on: boolean): void`
+- `isAudioOn(): boolean`
+
+### 📡 Events System
+
+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 }`
+
+#### Example:
+
+```js
+VideoClient.on("user-published", ({ user }) => {
+  const video = document.createElement("video");
+  video.srcObject = user.videotrack;
+  video.autoplay = true;
+  video.id = user.uuid;
+  document.body.appendChild(video);
+});
+```
+
+---
+
+## 🧩 Backend Integration
+
+This library is designed to work with the following signaling server:
+
+🔗 [`videocall-server`](https://github.com/EmersonJaraG28/videocall-server)
+
+```bash
+git clone https://github.com/EmersonJaraG28/videocall-server.git
+cd videocall-server
+npm install
+npm run dev
+```
+
+---
+
+## 📚 Related Libraries
+
+- [simple-peer](https://www.npmjs.com/package/simple-peer)
+- [socket.io-client](https://www.npmjs.com/package/socket.io-client)
+
+---
+
+## 🧾 License
+
+ISC © [Jara](https://github.com/EmersonJaraG28)

package/package.json

@@ -1,21 +1,38 @@
-{
-  "name": "videocall-client-socket",
-  "version": "0.1.0",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "video",
-    "socket",
-    "peer"
-  ],
-  "author": "Jara",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "videocall-client": "file:",
-    "videocall-client-socket": "file:"
-  }
-}
+{
+  "name": "videocall-client-socket",
+  "version": "0.1.2",
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "video",
+    "socket",
+    "peer",
+    "webrtc",
+    "rtc",
+    "videocall",
+    "p2p",
+    "simple-peer"
+  ],
+  "author": {
+    "name": "Jara",
+    "url": "https://github.com/EmersonJaraG28"
+  },
+  "license": "ISC",
+  "description": "WebRTC client for peer-to-peer video calls using socket.io and simple-peer.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EmersonJaraG28/videocall-client.git"
+  },
+  "bugs": {
+    "url": "https://github.com/EmersonJaraG28/videocall-client/issues"
+  },
+  "homepage": "https://github.com/EmersonJaraG28/videocall-client#readme",
+  "dependencies": {
+    "socket.io-client": "^4.8.1",
+    "videocall-client": "file:",
+    "videocall-client-socket": "file:"
+  }
+}

package/src/index.d.ts

@@ -1,6 +1,6 @@
 declare module 'videocall-client-socket' {
 
-    export function setUrl(url: string): void;
+    export function setServerURL(url: string): void;
 
     export function on(event: string, callback: (data: any) => void): void;
     export function off(event: string, callback: (data: any) => void): void;

package/src/index.js

@@ -1,60 +1,81 @@
+import { io } from 'socket.io-client';
+import SimplePeer from 'simple-peer';
 
 var peers = {};
-
 var socket = null;
 var mediastream = null;
 var localVideoId = "";
-
+var userId = "";
 var url = 'http://localhost:3000';
-
 let events = {};
 
+/**
+ * Registers a custom event listener.
+ * @param {string} _event - Event name.
+ * @param {(data: any) => void} listener - Callback to execute when event occurs.
+ */
 export var on = (_event, listener) => {
     if (!events[_event]) {
         events[_event] = [];
     }
     events[_event].push(listener);
-}
+};
 
+/**
+ * Removes a listener for a specific custom event.
+ * @param {string} _event - Event name.
+ * @param {(data: any) => void} listener - Callback to remove.
+ */
 export var off = (_event, listener) => {
     if (events[_event]) {
-        events[_event] = events[_event].filter((existingListener) => {
-            return existingListener !== listener;
-        });
+        events[_event] = events[_event].filter((existingListener) => existingListener !== listener);
     }
-}
+};
 
 let emit = (_event, data) => {
     if (events[_event]) {
-        events[_event].forEach((listener) => {
-            listener(data);
-        });
+        events[_event].forEach((listener) => listener(data));
     }
-}
+};
 
-export function setUrl(_url) {
+/**
+ * Sets the signaling server URL.
+ * @param {string} _url - Server URL (e.g. "http://localhost:3000").
+ */
+export function setServerURL(_url) {
     url = _url;
 }
 
+/**
+ * Requests access to the user's camera and microphone.
+ * @returns {Promise<MediaStream>} - Resolves with a MediaStream containing audio and video.
+ */
 export function createMediaStream() {
-    return new Promise((resolve, reject) => {
-        navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
-            mediastream = stream;
-            resolve(stream);
-        });
+    return navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
+        mediastream = stream;
+        return stream;
     });
 }
 
+/**
+ * Plays the local video stream into a specified <video> element.
+ * @param {string} _localVideoId - The ID of the <video> element in the DOM.
+ */
 export function playVideoTrack(_localVideoId) {
     localVideoId = _localVideoId;
     const localVideo = document.getElementById(localVideoId);
     if (localVideo && mediastream) {
         localVideo.srcObject = mediastream;
     }
-
 }
 
-export function joinChannel(userId, channelName) {
+/**
+ * Connects to the signaling server and joins a room.
+ * @param {string} _userId - Unique identifier for the user.
+ * @param {string} channelName - The name of the room to join.
+ */
+export function joinChannel(_userId, channelName) {
+    userId = _userId;
 
     socket = io(url, {
         query: { room: channelName, userId }
@@ -68,15 +89,11 @@ export function joinChannel(userId, channelName) {
     });
 
     socket.on('user-joined', ({ userId: newUserId, socketId: newSocketId }) => {
-        console.log("newUserId", newUserId);
-
         const peer = createPeer(socket, mediastream, newSocketId, newUserId, false);
         peers[newUserId] = peer;
     });
 
     socket.on('signal', ({ fromUserId, signal }) => {
-        console.log("signal", signal);
-
         const peer = peers[fromUserId];
         if (peer) {
             peer.signal(signal);
@@ -87,20 +104,27 @@ export function joinChannel(userId, channelName) {
         if (peers[leftUserId]) {
             peers[leftUserId].destroy();
             delete peers[leftUserId];
-            console.log(`Usuario ${leftUserId} se fue`);
         }
 
-        var data = {
-            user: {
-                uuid: leftUserId,
-                // videotrack: stream
-            },
+        emit("user-unpublished", {
+            user: { uuid: leftUserId },
             mediaType: "video"
-        };
-        emit("user-unpublished", data);
+        });
+    });
+
+    socket.on('user-media-toggled', ({ userId, type, enabled }) => {
+        emit('user-media-toggled', {
+            user: { uuid: userId },
+            type,
+            enabled
+        });
     });
 }
 
+/**
+ * Leaves the current room and disconnects all peers.
+ * Also releases camera/mic resources and clears video streams.
+ */
 export function leaveChannel() {
     for (const peerId in peers) {
         peers[peerId].destroy();
@@ -121,10 +145,20 @@ export function leaveChannel() {
     }
 
     const localVideo = document.getElementById(localVideoId);
-    localVideo.srcObject = null;
+    if (localVideo) {
+        localVideo.srcObject = null;
+    }
 }
 
-
+/**
+ * Creates a WebRTC peer connection with another user.
+ * @param {import('socket.io-client').Socket} socket - The local user's socket.
+ * @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 {boolean} initiator - Whether this peer initiates the connection.
+ * @returns {SimplePeer.Instance} - The created peer.
+ */
 function createPeer(socket, localStream, targetSocketId, remoteUserId, initiator) {
     const peer = new SimplePeer({
         initiator,
@@ -140,46 +174,64 @@ function createPeer(socket, localStream, targetSocketId, remoteUserId, initiator
     });
 
     peer.on('stream', stream => {
-        console.log('📺 Recibí stream de', remoteUserId);
-
-        var data = {
+        emit("user-published", {
             user: {
                 uuid: remoteUserId,
                 videotrack: stream
             },
             mediaType: "video"
-        };
-        emit("user-published", data);
+        });
     });
 
     peer.on('error', err => {
-        console.error('Error en peer', remoteUserId, err);
+        console.error('Peer error', remoteUserId, err);
     });
 
     return peer;
 }
 
-
+/**
+ * Enables or disables the local video track and notifies the server.
+ * @param {boolean} on - `true` to turn on the camera, `false` to turn it off.
+ */
 export function toggleCamera(on) {
     if (!mediastream) return;
     mediastream.getVideoTracks().forEach(track => {
         track.enabled = on;
     });
+    if (socket) {
+        socket.emit('media-toggle', { userId, type: 'video', enabled: on });
+    }
 }
 
+/**
+ * Checks if the local video track is currently enabled.
+ * @returns {boolean} - `true` if the camera is on.
+ */
 export function isCameraOn() {
     if (!mediastream) return false;
     return mediastream.getVideoTracks().some(track => track.enabled);
 }
 
+/**
+ * Enables or disables the local audio track and notifies the server.
+ * @param {boolean} on - `true` to unmute the mic, `false` to mute.
+ */
 export function toggleAudio(on) {
     if (!mediastream) return;
     mediastream.getAudioTracks().forEach(track => {
         track.enabled = on;
     });
+    if (socket) {
+        socket.emit('media-toggle', { userId, type: 'audio', enabled: on });
+    }
 }
 
+/**
+ * Checks if the local audio track is currently enabled.
+ * @returns {boolean} - `true` if the microphone is on.
+ */
 export function isAudioOn() {
     if (!mediastream) return false;
     return mediastream.getAudioTracks().some(track => track.enabled);
-}
+}