@anonotf/connect 0.1.0 → 0.4.0

package/README.md

@@ -1,6 +1,12 @@
 # @anonotf/connect
 
-Client SDK for AnonOtF — handles calls, live streaming to many viewers, live chat, and voice notes/recordings. 
+Client SDK for AnonOtF — handles calls (1-on-1 and group, up to 9 people),
+live streaming to many viewers, live chat, and voice notes/recordings, without struggling with raw webrtc.
+
+> **v0.2.0 — breaking change:** group calls are now a mesh (everyone
+> connects to everyone). `calls.on('remoteStream', ...)` now receives
+> `{ userId, stream }` instead of a bare `stream` — update any v0.1.x
+> integration accordingly. See the Calls section below.
 
 ## Install
 
@@ -13,7 +19,7 @@ npm install @anonotf/connect
 This SDK runs **in the browser**. Two things must never end up there:
 
 - Your AnonOtF **x-api-key** (it can create/delete apps, read all data)
-- Your **API secret**
+- Your **Your API secret**
 
 So your own backend needs two small pieces:
 
@@ -45,15 +51,22 @@ client.connect();
 await client.register({ name: 'Alex' });
 ```
 
-## Calls (1-on-1, grows to group)
+## Calls (1-on-1, grows to real group calls — full mesh)
 
 Every accepted call gets a room behind the scenes — that's what lets you
-add people later without restarting the call.
+add people later without restarting the call. For 2+ people this is a
+genuine mesh: everyone gets a separate peer connection to everyone else,
+so everyone sees/hears everyone, the same way WhatsApp/Telegram group
+calls behave.
 
 ```js
 // Caller
 client.calls.on('callAccepted', ({ roomId }) => console.log('connected', roomId));
-client.calls.on('remoteStream', (stream) => { videoEl.srcObject = stream; });
+client.calls.on('remoteStream', ({ userId, stream }) => {
+  // one event per remote participant — render a tile per userId
+  renderVideoTile(userId, stream);
+});
+client.calls.on('peerLeft', ({ userId }) => removeVideoTile(userId));
 await client.calls.call('user_456', { callType: 'video' });
 
 // Callee
@@ -62,11 +75,17 @@ client.calls.on('incomingCall', async ({ from, callType, roomId }) => {
 });
 
 // Mid-call — ring a third person into the SAME call (cap: 9 total)
+// Everyone already in the call automatically meshes with the newcomer —
+// nothing else to wire up.
 client.calls.addToCall('user_789', { callType: 'video' });
 
-client.calls.end('user_456');
+// Ends the call for yourself — closes every peer connection in your mesh
+client.calls.end();
 ```
 
+`client.calls.participantIds` gives you the current list of remote user
+IDs in the mesh at any time, if you need to render an initial roster.
+
 ## Live streaming (broadcast to many viewers)
 
 Whether you can publish (vs. just watch) is decided by
@@ -88,7 +107,7 @@ await client.streaming.leave();
 
 ## Live chat + raise hand
 
-Ephemeral —  Live, nothing is saved server-side.
+Ephemeral — Everything is Live, nothing is saved server-side.
 
 ```js
 client.chat.on('message', ({ fromUserId, text }) => renderMessage(fromUserId, text));
@@ -122,4 +141,4 @@ recorder.onstop = async () => {
 
 ```js
 client.disconnect();
-```
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anonotf/connect",
-  "version": "0.1.0",
-  "description": "Client SDK for AnonOtF — calls, group calls, live streaming, chat, and voice notes.",
+  "version": "0.4.0",
+  "description": "Client SDK for AnonOtF — calls, group calls, live streaming, chat, and voice notes, without touching raw WebRTC or Socket.IO directly.",
   "main": "src/index.js",
   "type": "module",
   "files": ["src"],

package/src/calls.js

@@ -1,16 +1,18 @@
 // src/calls.js
 //
-// Wraps the raw WebRTC RTCPeerConnection + the server's call-user /
-// accept-call / signal / add-to-call socket events. A developer using
-// this module never creates an RTCPeerConnection or handles an ICE
-// candidate themselves — they call .call(), .accept(), .addToCall(),
-// and listen for simple events like 'remoteStream'.
+// Wraps raw WebRTC + the server's call-user / accept-call / signal /
+// add-to-call / join-room socket events. A developer using this
+// module never creates an RTCPeerConnection or handles an ICE
+// candidate themselves.
 //
-// IMPORTANT: every call (even a plain 1-on-1) gets a backing room on
-// the server the moment it's accepted — that's what makes
-// .addToCall() possible later without restarting anything. This
-// module doesn't need to know that; it just reacts to whatever
-// roomId comes back from the server.
+// MESH MODEL: for 2+ people, this is a full mesh — one separate
+// RTCPeerConnection per remote participant, tracked by userId, not a
+// single shared connection. That's what lets everyone see/hear
+// everyone in a group call: N participants means N-1 peer
+// connections per device.
+//
+// Every accepted call gets a backing room on the server — that's
+// what makes .addToCall() possible later without restarting anything.
 
 const RTC_CONFIG_DEFAULTS = {
   iceServers: [{ urls: 'stun:stun.l.google.com:19302' }], // overridden by fetchIceServers() below when available
@@ -28,26 +30,34 @@ export class Calls {
   constructor(socketManager, { fetchIceServers } = {}) {
     this._socket = socketManager;
     this._fetchIceServers = fetchIceServers;
-    this._listeners = new Map(); // event -> Set<handler>, for this module's own public events
-    this._pc = null;             // current RTCPeerConnection, one active call at a time
+    this._listeners = new Map();        // event -> Set<handler>
+    this._peers = new Map();             // userId -> RTCPeerConnection, one per remote participant
     this._localStream = null;
-    this.roomId = null;          // set once a call is accepted — null when idle
-    this._pendingOffer = null;   // offer received before the local peer connection exists yet
+    this.roomId = null;                  // set once a call is accepted/joined — null when idle
+    this._inCall = false;                // true from accept/connect onward, used to decide whether to mesh-connect to newcomers
+    this._screenTrack = null;            // active screen-capture track, if currently sharing
+    this._hadCameraBeforeShare = false;  // so stopScreenShare() knows whether to restore the camera or just go video-off
 
     this._socket.on('incoming-call', (data) => this._emit('incomingCall', data));
     this._socket.on('call-accepted', (data) => this._onCallAccepted(data));
     this._socket.on('call-declined', (data) => this._emit('callDeclined', data));
     this._socket.on('call-cancelled', (data) => this._emit('callCancelled', data));
-    this._socket.on('call-ended', (data) => this._teardown('callEnded', data));
+    this._socket.on('call-ended', (data) => this._onCallEnded(data));
     this._socket.on('call-error', (data) => this._emit('callError', data));
     this._socket.on('signal', (payload) => this._onSignal(payload));
+
+    // Mesh growth/shrink — fired by the room itself (rooms.js also
+    // listens to these for its own purposes; both can coexist since
+    // socket.on supports multiple handlers per event).
+    this._socket.on('user-joined', (data) => this._onUserJoined(data));
+    this._socket.on('user-left', (data) => this._onUserLeft(data));
   }
 
   // ---- public event subscription ----
   on(event, handler) {
     if (!this._listeners.has(event)) this._listeners.set(event, new Set());
     this._listeners.get(event).add(handler);
-    return () => this._listeners.get(event)?.delete(handler); // returns an unsubscribe fn
+    return () => this._listeners.get(event)?.delete(handler);
   }
 
   _emit(event, data) {
@@ -67,7 +77,7 @@ export class Calls {
 
   cancelCall(calleeId) {
     this._socket.emit('call-cancelled', { calleeId });
-    this._cleanupLocal();
+    this._cleanupAll();
   }
 
   // ---- incoming call ----
@@ -87,9 +97,11 @@ export class Calls {
     this._socket.emit('add-to-call', { roomId: this.roomId, newUserId, callType, callerName });
   }
 
-  end(otherPartyId) {
-    this._socket.emit('end-call', { otherParty: otherPartyId });
-    this._teardown('callEnded', { from: 'self' });
+  /** Ends the call for yourself — closes every peer connection in the mesh, notifies the room. */
+  end() {
+    this._socket.emit('end-call', { otherParty: this._anyPeerId() });
+    this._cleanupAll();
+    this._emit('callEnded', { from: 'self' });
   }
 
   /** Notify everyone in the call that you've started/stopped a local recording. */
@@ -104,7 +116,102 @@ export class Calls {
     return this._localStream;
   }
 
+  /** Current remote participant user IDs in the mesh. */
+  get participantIds() {
+    return [...this._peers.keys()];
+  }
+
+  /**
+   * Swaps the outgoing video track on EVERY peer connection in the
+   * mesh at once — for camera flip (front/back), or any other
+   * "swap what I'm sending" need. Also updates localStream so your
+   * own preview reflects the new track. Does nothing to audio.
+   */
+  async replaceVideoTrack(newTrack) {
+    for (const pc of this._peers.values()) {
+      const sender = pc.getSenders().find((s) => s.track && s.track.kind === 'video');
+      if (sender) await sender.replaceTrack(newTrack);
+    }
+    if (this._localStream) {
+      const oldTrack = this._localStream.getVideoTracks()[0];
+      if (oldTrack) {
+        this._localStream.removeTrack(oldTrack);
+        oldTrack.stop();
+      }
+      this._localStream.addTrack(newTrack);
+    }
+  }
+
+  /**
+   * Starts sharing your screen instead of your camera — swaps the
+   * outgoing video track on every peer connection in the mesh, same
+   * mechanism as camera flip. Remembers whether you had a camera
+   * track running so stopScreenShare() can restore it afterward.
+   * Audio is untouched either way.
+   *
+   * Fires 'screenShareStarted'/'screenShareEnded' — the latter also
+   * fires automatically if the user stops sharing from the browser's
+   * own "Stop sharing" control rather than your UI.
+   */
+  async startScreenShare() {
+    if (this._screenTrack) return; // already sharing
+    const displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
+    const screenTrack = displayStream.getVideoTracks()[0];
+
+    this._hadCameraBeforeShare = !!this._localStream?.getVideoTracks().length;
+    this._screenTrack = screenTrack;
+
+    await this.replaceVideoTrack(screenTrack);
+    this._emit('screenShareStarted');
+
+    // Browser's native "Stop sharing" UI ends the track directly —
+    // this catches that case so state stays accurate even if the
+    // person never calls stopScreenShare() themselves.
+    screenTrack.onended = () => {
+      if (this._screenTrack === screenTrack) this.stopScreenShare();
+    };
+  }
+
+  /**
+   * Stops screen sharing and restores your camera (if you had one
+   * running before sharing started) across the whole mesh.
+   */
+  async stopScreenShare() {
+    if (!this._screenTrack) return;
+    this._screenTrack.stop();
+    this._screenTrack = null;
+
+    if (this._hadCameraBeforeShare) {
+      const cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
+      await this.replaceVideoTrack(cameraStream.getVideoTracks()[0]);
+    } else if (this._localStream) {
+      // Wasn't sending video before sharing (audio-only call) — go
+      // back to that, rather than silently turning video on.
+      const track = this._localStream.getVideoTracks()[0];
+      if (track) { this._localStream.removeTrack(track); track.stop(); }
+    }
+    this._emit('screenShareEnded');
+  }
+
+  get isScreenSharing() {
+    return !!this._screenTrack;
+  }
+
+  /** Mute/unmute your own mic across the whole mesh — just disables the local track, no renegotiation needed. */
+  setMicEnabled(enabled) {
+    this._localStream?.getAudioTracks().forEach((t) => { t.enabled = enabled; });
+  }
+
+  /** Pause/resume your own camera across the whole mesh — same idea as setMicEnabled. */
+  setCameraEnabled(enabled) {
+    this._localStream?.getVideoTracks().forEach((t) => { t.enabled = enabled; });
+  }
+
   // ---- internals ----
+  _anyPeerId() {
+    return this._peers.keys().next().value;
+  }
+
   async _ensureLocalStream(callType) {
     if (this._localStream) return this._localStream;
     const constraints = callType === 'video' ? { audio: true, video: true } : { audio: true, video: false };
@@ -113,58 +220,112 @@ export class Calls {
     return this._localStream;
   }
 
-  async _ensurePeerConnection() {
-    if (this._pc) return this._pc;
+  // Creates (or returns the existing) peer connection for one specific
+  // remote user. Every track/ICE/connection-state handler is scoped to
+  // that userId, so multi-party events (remoteStream, peerLeft) always
+  // tell you WHICH participant they're about.
+  async _ensurePeerFor(remoteUserId) {
+    let pc = this._peers.get(remoteUserId);
+    if (pc) return pc;
 
     const config = this._fetchIceServers ? await this._fetchIceServers() : RTC_CONFIG_DEFAULTS;
-    this._pc = new RTCPeerConnection(config);
+    pc = new RTCPeerConnection(config);
+    this._peers.set(remoteUserId, pc);
 
-    this._localStream?.getTracks().forEach((track) => this._pc.addTrack(track, this._localStream));
+    this._localStream?.getTracks().forEach((track) => pc.addTrack(track, this._localStream));
 
-    this._pc.onicecandidate = (event) => {
+    pc.onicecandidate = (event) => {
       if (event.candidate) {
         this._socket.emit('signal', {
           type: 'ice-candidate',
           candidate: event.candidate,
           roomId: this.roomId,
+          to: remoteUserId,
         });
       }
     };
 
-    this._pc.ontrack = (event) => {
-      this._emit('remoteStream', event.streams[0]);
+    pc.ontrack = (event) => {
+      this._emit('remoteStream', { userId: remoteUserId, stream: event.streams[0] });
     };
 
-    this._pc.onconnectionstatechange = () => {
-      this._emit('connectionStateChange', this._pc.connectionState);
-      if (this._pc.connectionState === 'failed' || this._pc.connectionState === 'closed') {
-        this._teardown('callEnded', { reason: this._pc.connectionState });
+    pc.onconnectionstatechange = () => {
+      this._emit('peerConnectionStateChange', { userId: remoteUserId, state: pc.connectionState });
+      if (pc.connectionState === 'failed' || pc.connectionState === 'closed') {
+        this._removePeer(remoteUserId);
       }
     };
 
-    return this._pc;
+    return pc;
+  }
+
+  _removePeer(remoteUserId) {
+    const pc = this._peers.get(remoteUserId);
+    if (!pc) return;
+    pc.close();
+    this._peers.delete(remoteUserId);
+    this._emit('peerLeft', { userId: remoteUserId });
+    // Mesh of one (just you) left in the room — the call is effectively over.
+    if (this._peers.size === 0 && this._inCall) {
+      this._cleanupAll();
+      this._emit('callEnded', { reason: 'all-peers-left' });
+    }
   }
 
+  // The ORIGINAL caller, once the callee accepts: send them the first offer.
   async _onCallAccepted({ from, roomId, callType }) {
     this.roomId = roomId;
-    const pc = await this._ensurePeerConnection();
+    this._inCall = true;
+    await this._sendOfferTo(from);
+    this._emit('callAccepted', { from, roomId, callType });
+  }
+
+  async _sendOfferTo(remoteUserId) {
+    const pc = await this._ensurePeerFor(remoteUserId);
     const offer = await pc.createOffer();
     await pc.setLocalDescription(offer);
-    this._socket.emit('signal', { type: 'offer', sdp: offer, roomId, to: roomId ? undefined : from });
-    this._emit('callAccepted', { from, roomId, callType });
+    this._socket.emit('signal', { type: 'offer', sdp: offer, roomId: this.roomId, to: remoteUserId });
+  }
+
+  // Mesh growth: someone new joined the room we're actively calling
+  // in. Whoever was already in the call proactively offers to the
+  // newcomer — the newcomer doesn't need to do anything special,
+  // they'll just receive offers from everyone already present.
+  async _onUserJoined({ userId }) {
+    if (!this._inCall || !this.roomId || this._peers.has(userId)) return;
+    this._inCall = true;
+    await this._sendOfferTo(userId);
+  }
+
+  _onUserLeft({ userId }) {
+    this._removePeer(userId);
+  }
+
+  _onCallEnded(data) {
+    // A specific peer telling us they've ended — close just that
+    // connection; the mesh (and call) only fully tears down once
+    // everyone's gone (handled in _removePeer).
+    if (data?.from && this._peers.has(data.from)) {
+      this._removePeer(data.from);
+    } else {
+      this._cleanupAll();
+      this._emit('callEnded', data);
+    }
   }
 
   async _onSignal(payload) {
     const { type, sdp, candidate, from, roomId } = payload;
     if (roomId) this.roomId = roomId;
+    if (!from) return; // shouldn't happen — server always stamps `from`
 
-    const pc = await this._ensurePeerConnection();
+    const pc = await this._ensurePeerFor(from);
+    this._inCall = true;
 
     if (type === 'offer') {
       await pc.setRemoteDescription(sdp);
       const answer = await pc.createAnswer();
       await pc.setLocalDescription(answer);
-      this._socket.emit('signal', { type: 'answer', sdp: answer, roomId, to: roomId ? undefined : from });
+      this._socket.emit('signal', { type: 'answer', sdp: answer, roomId: this.roomId, to: from });
     } else if (type === 'answer') {
       await pc.setRemoteDescription(sdp);
     } else if (type === 'ice-candidate' && candidate) {
@@ -178,16 +339,14 @@ export class Calls {
     }
   }
 
-  _cleanupLocal() {
+  _cleanupAll() {
     this._localStream?.getTracks().forEach((t) => t.stop());
     this._localStream = null;
-    this._pc?.close();
-    this._pc = null;
+    this._screenTrack?.stop();
+    this._screenTrack = null;
+    for (const pc of this._peers.values()) pc.close();
+    this._peers.clear();
     this.roomId = null;
-  }
-
-  _teardown(event, data) {
-    this._cleanupLocal();
-    this._emit(event, data);
+    this._inCall = false;
   }
 }

package/src/index.js

@@ -73,6 +73,25 @@ export class AnonOtFConnect {
   heartbeat() {
     this._socketManager.emit('heartbeat');
   }
+
+  /**
+   * Presence events, scoped to the whole connection (not any one
+   * call/room) — who's online, who went offline, profile changes.
+   * Events: 'onlineUsersUpdate' ({userId,name,photo,emoji,about,online}[]),
+   * 'profileUpdated' ({userId,name,photo,emoji,about}),
+   * 'userOffline' ({userId,lastSeen}).
+   */
+  on(event, handler) {
+    const serverEventMap = {
+      onlineUsersUpdate: 'online-users-update',
+      profileUpdated: 'profile-updated',
+      userOffline: 'user-offline',
+    };
+    const serverEvent = serverEventMap[event];
+    if (!serverEvent) throw new Error(`[AnonOtFConnect] Unknown event "${event}"`);
+    this._socketManager.on(serverEvent, handler);
+    return () => this._socketManager.off(serverEvent, handler);
+  }
 }
 
 export { Calls, Rooms, Chat, Streaming, MediaClips };

package/src/rooms.js

@@ -47,11 +47,11 @@ export class Rooms {
   }
 
   /** Create a new room. Goes through your backend proxy, not directly to AnonOtF, to keep the API key server-side. */
-  async create({ roomName, maxParticipants } = {}) {
+  async create({ roomName, maxParticipants, userId } = {}) {
     const res = await fetch(`${this._apiBase}/rooms`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ roomName, maxParticipants }),
+      body: JSON.stringify({ roomName, maxParticipants, userId }),
     });
     if (!res.ok) throw new Error(`[AnonOtFConnect] Failed to create room: ${res.status}`);
     return res.json();