@needle-tools/engine 3.28.6-beta → 3.28.7-beta.1

package/src/engine/engine_networking_streams.ts

@@ -1,489 +1,489 @@
-import { type Context } from "./engine_context.js";
-import Peer, { MediaConnection } from "peerjs"
-import { RoomEvents } from "../engine/engine_networking.js";
-import { UserJoinedOrLeftRoomModel } from "../engine/engine_networking.js";
-import type { IModel } from "./engine_networking_types.js";
-import { getPeerjsInstance } from "../engine/engine_networking_peer.js";
-import { EventDispatcher } from "three";
-import { getParam } from "./engine_utils.js";
-import { type IComponent } from "./engine_types.js";
-
-
-
-const debug = getParam("debugnetworkingstreams");
-
-export enum NetworkedStreamEvents {
-    Connected = "peer-user-connected",
-    StreamReceived = "receive-stream",
-    StreamEnded = "call-ended",
-    Disconnected = "peer-user-disconnected",
-    UserJoined = "user-joined",
-}
-
-export class StreamEndedEvent {
-    readonly type = NetworkedStreamEvents.StreamEnded;
-    readonly userId: string;
-    readonly direction: CallDirection;
-    constructor(userId: string, direction: CallDirection) {
-        this.userId = userId;
-        this.direction = direction;
-    }
-}
-export class StreamReceivedEvent {
-    readonly type = NetworkedStreamEvents.StreamReceived;
-    readonly stream: MediaStream;
-    readonly target: CallHandle;
-    constructor(stream: MediaStream, target: CallHandle) {
-        this.stream = stream
-        this.target = target;
-    }
-}
-
-class PeerUserConnectedModel implements IModel {
-    /** the peer handle id */
-    readonly guid: string;
-    readonly peerId: string;
-    // internal so server doesnt save it to persistent storage
-    readonly dontSave: boolean = true;
-    constructor(handle: PeerHandle, peerId: string) {
-        this.guid = handle.id;
-        this.peerId = peerId;
-    }
-}
-
-export enum CallDirection {
-    Incoming = "incoming",
-    Outgoing = "outgoing",
-}
-
-class CallHandle extends EventDispatcher {
-    readonly userId: string;
-    readonly direction: CallDirection;
-    readonly call: MediaConnection;
-    get stream() { return this._stream; };
-
-    private _stream: MediaStream | null = null;
-    private _isDisposed: boolean = false;
-
-    close() {
-        if (this._isDisposed) return;
-        this._isDisposed = true;
-        this.call.close();
-        disposeStream(this._stream);
-    }
-
-    get isOpen() {
-        return this.call.peerConnection?.connectionState === "connected";// && this._stream?.active;
-    }
-
-    get isOpening() {
-        return this.call.peerConnection?.connectionState === "connecting";
-    }
-
-    get isClosed() {
-        return !this.isOpen;
-    }
-
-    constructor(userId: string, call: MediaConnection, direction: CallDirection) {
-        super();
-        this.userId = userId;
-        this.call = call;
-        this.direction = direction;
-        this._stream = null;
-        call.on("stream", stream => {
-            if (debug)
-                console.log("Receive video", stream.getAudioTracks(), stream.getVideoTracks());
-            this._stream = stream;
-            if (direction === CallDirection.Incoming) {
-                const args: StreamReceivedEvent = new StreamReceivedEvent(stream, this);
-                this.dispatchEvent(args);
-            }
-        });
-        call.on("close", () => {
-            this.dispatchEvent(new StreamEndedEvent(userId, direction));
-        })
-    }
-}
-
-export class PeerHandle extends EventDispatcher {
-
-    private static readonly instances: Map<string, PeerHandle> = new Map();
-
-    static getOrCreate(context: Context, guid: string): PeerHandle {
-        // if (id === undefined) {
-        //     // randomId
-        //     id = Math.random().toFixed(5);
-        // }
-        if (PeerHandle.instances.has(guid))
-            return PeerHandle.instances.get(guid)!;
-        const peer = new PeerHandle(context, guid);
-        PeerHandle.instances.set(guid, peer);
-        return peer;
-    }
-
-    getMyPeerId(): string | undefined {
-        if (this.context.connection.connectionId)
-            return this.getPeerIdFromUserId(this.context.connection.connectionId);
-        return undefined;
-    }
-
-    getPeerIdFromUserId(userConnectionId: string): string {
-        // we build the peer id ourselves so we dont need to wait for peer to report it
-        return this.id + "-" + userConnectionId;
-    }
-
-    getUserIdFromPeerId(peerId: string): string {
-        return peerId.substring(this.id.length + 1);
-    }
-
-    makeCall(peerId: string, stream: MediaStream): CallHandle | undefined {
-        const opts = { metadata: { userId: this.context.connection.connectionId } };
-        const call = this._peer?.call(peerId, stream, opts);
-        if (call)
-            return this.registerCall(call, CallDirection.Outgoing);
-        return undefined;
-    }
-
-    get peer(): Peer | undefined { return this._peer; }
-
-    readonly id: string;
-    readonly context: Context;
-    private _peer: Peer | undefined;
-    private _incomingCalls: CallHandle[] = [];
-    private _outgoingCalls: CallHandle[] = [];
-
-    private constructor(context: Context, id: string) {
-        super();
-        this.context = context;
-        this.id = id;
-        this.setupPeer();
-        navigator["getUserMedia"] = (
-            navigator["getUserMedia"] || navigator["webkitGetUserMedia"] ||
-            navigator["mozGetUserMedia"] || navigator["msGetUserMedia"]
-        );
-    }
-
-    private _enabled: boolean = false;
-    private _enabledPeer: boolean = false;
-    private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
-    // private onUserJoinedOrLeftRoomFn: Function = this.onUserJoinedOrLeftRoom.bind(this);
-    private onPeerConnectFn: (id) => void = this.onPeerConnect.bind(this);
-    private onPeerReceiveCallFn: (call) => void = this.onPeerReceivingCall.bind(this);
-    // private _connectionPeerIdMap : Map<string, string> = new Map();
-
-    enable() {
-        if (this._enabled) return;
-        this._enabled = true;
-        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
-        // this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
-        // this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
-        this.subscribePeerEvents();
-    }
-
-    disable() {
-        if (!this._enabled) return;
-        this._enabled = false;
-        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
-        // this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
-        // this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
-        this.unsubscribePeerEvents();
-    }
-
-    private onConnectRoom(): void {
-        this.setupPeer();
-    };
-
-    // private onUserJoinedOrLeftRoom(_: UserJoinedOrLeftRoomModel): void {
-    // };
-
-    private setupPeer() {
-        if (!this.context.connection.connectionId) return;
-        if (this._enabledPeer) return;
-        this._enabledPeer = true;
-        if (!this._peer) {
-            const peerId = this.getMyPeerId();
-            if (peerId)
-                this._peer = getPeerjsInstance(peerId);
-            else console.error("Failed to setup peerjs because we dont have a connection id", this.context.connection.connectionId);
-        }
-        if (this._enabled)
-            this.subscribePeerEvents();
-    }
-
-    private subscribePeerEvents() {
-        if (!this._peer) return;
-        this._peer.on("open", this.onPeerConnectFn);
-        this._peer.on("call", this.onPeerReceiveCallFn);
-        // this.context.connection.beginListen(PeerEvent.Connected, this.onRemotePeerConnect.bind(this));
-        // TODO: make connection to all current active calls even if the user is not anymore in the needle room
-    }
-
-    private unsubscribePeerEvents() {
-        if (!this._peer) return;
-        this._peer.off("open", this.onPeerConnectFn);
-        this._peer.off("call", this.onPeerReceiveCallFn);
-        // this.context.connection.stopListen(PeerEvent.Connected, this.onRemotePeerConnect.bind(this));
-    }
-
-    private onPeerConnect(id): void {
-        if (debug)
-            console.log("Peer connected as", id);
-        this.context.connection.send(NetworkedStreamEvents.Connected, new PeerUserConnectedModel(this, id));
-    }
-
-    private onPeerReceivingCall(call: MediaConnection): void {
-        call.answer();
-        this.registerCall(call, CallDirection.Incoming);
-    }
-
-    private registerCall(call: MediaConnection, direction: CallDirection): CallHandle {
-
-        const meta = call.metadata;
-        if (!meta || !meta.userId) {
-            console.error("Missing call metadata", call);
-        }
-        const userId = meta.userId;
-
-        if (direction === CallDirection.Incoming && debug) console.log("Receive call from", call.metadata);
-        else if (debug) console.log("Make call to", call.metadata);
-
-        const arr = direction === CallDirection.Incoming ? this._incomingCalls : this._outgoingCalls;
-        const handle = new CallHandle(userId, call, direction);
-        arr.push(handle);
-        call.on("error", err => {
-            console.error("Call error", err);
-        });
-        call.on("close", () => {
-            if (debug)
-                console.log("Call ended", call.metadata);
-            call.close();
-            const index = arr.indexOf(handle);
-            if (index !== -1)
-                arr.splice(index, 1);
-        });
-
-        handle.addEventListener(NetworkedStreamEvents.StreamEnded, e => {
-            this.dispatchEvent(e);
-        });
-
-        if (direction === CallDirection.Incoming) {
-
-            handle.addEventListener(NetworkedStreamEvents.StreamReceived, e => {
-                this.dispatchEvent(e);
-            });
-
-            call.on("stream", () => {
-                // workaround for https://github.com/peers/peerjs/issues/636
-                let intervalCounter = 0;
-                const closeInterval = setInterval(() => {
-                    const isFirstInterval = intervalCounter === 0;
-                    if (!handle.isOpen && isFirstInterval) {
-                        intervalCounter += 1;
-                        clearInterval(closeInterval);
-                        handle.close();
-                    }
-                }, 2000);
-            });
-        }
-        return handle;
-    }
-
-    // private onRemotePeerConnect(user: PeerUserConnectedModel) {
-    //     console.log("other user connected", user);
-    // }
-}
-
-
-// type UserVideoCall = {
-//     call: Peer.MediaConnection;
-//     stream: MediaStream;
-//     userId: string;
-// }
-
-// type IncomingStreamArgs = {
-//     stream: MediaStream;
-//     userId: string;
-// }
-
-export class NetworkedStreams extends EventDispatcher {
-
-    static create(comp: IComponent) {
-        const peer = PeerHandle.getOrCreate(comp.context, comp.context.connection.connectionId!);
-        return new NetworkedStreams(comp.context, peer);
-    }
-
-    private readonly context: Context;
-    private readonly peer: PeerHandle;
-
-    // private _receiveVideoStreamListeners: Array<(info: IncomingStreamArgs) => void> = [];
-    private _sendingStreams: Map<MediaStream, CallHandle[]> = new Map();
-
-    debug: boolean = false;
-
-    constructor(context: Context, peer: PeerHandle) {
-        super();
-        this.context = context;
-        this.peer = peer;
-        if (debug) this.debug = true;
-    }
-
-    startSendingStream(stream: MediaStream) {
-        if (!this._sendingStreams.has(stream)) {
-            this._sendingStreams.set(stream, []);
-            this.updateSendingCalls();
-        }
-        else {
-            console.warn("Received start sending stream with stream that is already being sent");
-        }
-    }
-
-    stopSendingStream(_steam: MediaStream | undefined | null) {
-        if (_steam) {
-            const calls = this._sendingStreams.get(_steam);
-            if (calls) {
-                if (this.debug)
-                    console.log("Closing calls", calls);
-                for (const call of calls) {
-                    call.close();
-                }
-            }
-            this._sendingStreams.delete(_steam);
-            if (calls && this.debug)
-                console.log("Currently sending", this._sendingStreams);
-        }
-    }
-
-    // private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
-    // private onUserConnectedFn: Function = this.onUserConnected.bind(this);
-    // private onUserLeftFn: Function = this.onUserLeft.bind(this);
-
-    enable() {
-        this.peer.enable();
-        this.peer.addEventListener(NetworkedStreamEvents.StreamReceived, this.onReceiveStream);
-        //@ts-ignore
-        this.peer.addEventListener(NetworkedStreamEvents.StreamEnded, this.onCallEnded);
-        // this.peer.addEventListener(PeerEvent.UserJoined, this.onUserJoinedPeer);
-        this.context.connection.beginListen(NetworkedStreamEvents.Connected, this.onUserConnected);
-        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onJoinedRoom);
-        this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onJoinedRoom);
-        this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserLeft);
-    }
-
-    disable() {
-        this.peer.disable();
-        this.peer.removeEventListener(NetworkedStreamEvents.StreamReceived, this.onReceiveStream);
-        //@ts-ignore
-        this.peer.removeEventListener(NetworkedStreamEvents.StreamEnded, this.onCallEnded);
-        // this.peer.removeEventListener(PeerEvent.UserJoined, this.onUserJoinedPeer);
-        this.context.connection.stopListen(NetworkedStreamEvents.Connected, this.onUserConnected);
-        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onJoinedRoom);
-        this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onJoinedRoom);
-        this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserLeft);
-    }
-
-    // private onUserJoinedPeer = (evt) => {
-    //     if (!this.context.connection.isConnected && evt.userId) {
-    //         this.startCallWithUserIfNotAlready(evt.userId);
-    //     }
-    // }
-
-    // When either we ourselves OR someone else is joining the room we want to make sure to re-establish all calls
-    // and if the user that joined is not yet receiving our video stream we want to start a stream with them
-    // https://github.com/needle-tools/needle-tiny/issues/697#issuecomment-1510425539
-    private onJoinedRoom = (evt) => {
-        if (this.debug) console.log(`${evt.userId} joined room and I'm currently sending ${this._sendingStreams.size} streams`);
-        if (this._sendingStreams.size > 0)
-            this.updateSendingCalls();
-    }
-
-    private onReceiveStream = (evt) => {
-        if (this.debug)
-            console.log("RECEIVE STREAM", evt);
-        this.dispatchEvent({ type: NetworkedStreamEvents.StreamReceived, target: this, stream: evt.stream, userId: evt.userId });
-    }
-
-    private onCallEnded = (evt: StreamEndedEvent) => {
-        this.dispatchEvent(evt)
-    }
-
-    private onUserConnected = (user: PeerUserConnectedModel) => {
-        // console.log(this.peer.id, user.guid)
-        if (this.peer.id === user.guid) {
-            if (this.debug)
-                console.log("USER CONNECTED", user.guid, user);
-            const stream = this._sendingStreams.keys().next().value;
-            this.peer.makeCall(user.peerId, stream);
-        }
-    }
-
-    private onUserLeft = (_: UserJoinedOrLeftRoomModel) => {
-        this.stopCallsToUsersThatAreNotInTheRoomAnymore();
-    }
-
-    private updateSendingCalls() {
-        let startedNewCall = false;
-        const localUserId = this.context.connection.connectionId;
-        for (const stream of this._sendingStreams.keys()) {
-            const calls = this._sendingStreams.get(stream) || [];
-            for (const userId of this.context.connection.usersInRoom()) {
-                if (userId === localUserId) continue;
-                const existing = calls.find(c => c.userId === userId);
-                if (!existing || existing.stream?.active === false) {
-                    if (this.debug)
-                        console.log("Starting call to", userId, localUserId)
-                    const handle = this.peer.makeCall(this.peer.getPeerIdFromUserId(userId), stream);
-                    if (handle) {
-                        startedNewCall = true;
-                        calls.push(handle);
-                    }
-                }
-            }
-
-            this._sendingStreams.set(stream, calls);
-        }
-        this.stopCallsToUsersThatAreNotInTheRoomAnymore();
-        if (startedNewCall && this.debug) {
-            console.log("Currently sending", this._sendingStreams);
-        }
-    }
-
-    // private startCallWithUserIfNotAlready(userId: string) {
-    //     for (const stream of this._sendingVideoStreams.keys()) {
-    //         const calls = this._sendingVideoStreams.get(stream) || [];
-    //         const existing = calls.find(c => c.userId === userId);
-    //         if (!existing || existing.stream?.active === false) {
-    //             if (this.debug) console.log("Starting call to", userId)
-    //             const handle = this.peer.makeCall(this.peer.getPeerIdFromUserId(userId), stream);
-    //             if (handle) {
-    //                 calls.push(handle);
-    //                 return true;
-    //             }
-    //         }
-    //     }
-    //     return false;
-    // }
-
-    private stopCallsToUsersThatAreNotInTheRoomAnymore() {
-        for (const stream of this._sendingStreams.keys()) {
-            const calls = this._sendingStreams.get(stream);
-            if (!calls) continue;
-            for (let i = calls.length - 1; i >= 0; i--) {
-                const call = calls[i];
-                if (!this.context.connection.userIsInRoom(call.userId)) {
-                    call.close();
-                    calls.splice(i, 1);
-                }
-            }
-        }
-    }
-
-    // const call = peer.call(peerId, stream);
-}
-
-export function disposeStream(str: MediaStream | null | undefined) {
-    if (!str) return;
-    if (str instanceof MediaStream) {
-        for (const cap of str.getTracks())
-            cap.stop();
-    }
-}
+import { type Context } from "./engine_context.js";
+import Peer, { MediaConnection } from "peerjs"
+import { RoomEvents } from "../engine/engine_networking.js";
+import { UserJoinedOrLeftRoomModel } from "../engine/engine_networking.js";
+import type { IModel } from "./engine_networking_types.js";
+import { getPeerjsInstance } from "../engine/engine_networking_peer.js";
+import { EventDispatcher } from "three";
+import { getParam } from "./engine_utils.js";
+import { type IComponent } from "./engine_types.js";
+
+
+
+const debug = getParam("debugnetworkingstreams");
+
+export enum NetworkedStreamEvents {
+    Connected = "peer-user-connected",
+    StreamReceived = "receive-stream",
+    StreamEnded = "call-ended",
+    Disconnected = "peer-user-disconnected",
+    UserJoined = "user-joined",
+}
+
+export class StreamEndedEvent {
+    readonly type = NetworkedStreamEvents.StreamEnded;
+    readonly userId: string;
+    readonly direction: CallDirection;
+    constructor(userId: string, direction: CallDirection) {
+        this.userId = userId;
+        this.direction = direction;
+    }
+}
+export class StreamReceivedEvent {
+    readonly type = NetworkedStreamEvents.StreamReceived;
+    readonly stream: MediaStream;
+    readonly target: CallHandle;
+    constructor(stream: MediaStream, target: CallHandle) {
+        this.stream = stream
+        this.target = target;
+    }
+}
+
+class PeerUserConnectedModel implements IModel {
+    /** the peer handle id */
+    readonly guid: string;
+    readonly peerId: string;
+    // internal so server doesnt save it to persistent storage
+    readonly dontSave: boolean = true;
+    constructor(handle: PeerHandle, peerId: string) {
+        this.guid = handle.id;
+        this.peerId = peerId;
+    }
+}
+
+export enum CallDirection {
+    Incoming = "incoming",
+    Outgoing = "outgoing",
+}
+
+class CallHandle extends EventDispatcher {
+    readonly userId: string;
+    readonly direction: CallDirection;
+    readonly call: MediaConnection;
+    get stream() { return this._stream; };
+
+    private _stream: MediaStream | null = null;
+    private _isDisposed: boolean = false;
+
+    close() {
+        if (this._isDisposed) return;
+        this._isDisposed = true;
+        this.call.close();
+        disposeStream(this._stream);
+    }
+
+    get isOpen() {
+        return this.call.peerConnection?.connectionState === "connected";// && this._stream?.active;
+    }
+
+    get isOpening() {
+        return this.call.peerConnection?.connectionState === "connecting";
+    }
+
+    get isClosed() {
+        return !this.isOpen;
+    }
+
+    constructor(userId: string, call: MediaConnection, direction: CallDirection) {
+        super();
+        this.userId = userId;
+        this.call = call;
+        this.direction = direction;
+        this._stream = null;
+        call.on("stream", stream => {
+            if (debug)
+                console.log("Receive video", stream.getAudioTracks(), stream.getVideoTracks());
+            this._stream = stream;
+            if (direction === CallDirection.Incoming) {
+                const args: StreamReceivedEvent = new StreamReceivedEvent(stream, this);
+                this.dispatchEvent(args);
+            }
+        });
+        call.on("close", () => {
+            this.dispatchEvent(new StreamEndedEvent(userId, direction));
+        })
+    }
+}
+
+export class PeerHandle extends EventDispatcher {
+
+    private static readonly instances: Map<string, PeerHandle> = new Map();
+
+    static getOrCreate(context: Context, guid: string): PeerHandle {
+        // if (id === undefined) {
+        //     // randomId
+        //     id = Math.random().toFixed(5);
+        // }
+        if (PeerHandle.instances.has(guid))
+            return PeerHandle.instances.get(guid)!;
+        const peer = new PeerHandle(context, guid);
+        PeerHandle.instances.set(guid, peer);
+        return peer;
+    }
+
+    getMyPeerId(): string | undefined {
+        if (this.context.connection.connectionId)
+            return this.getPeerIdFromUserId(this.context.connection.connectionId);
+        return undefined;
+    }
+
+    getPeerIdFromUserId(userConnectionId: string): string {
+        // we build the peer id ourselves so we dont need to wait for peer to report it
+        return this.id + "-" + userConnectionId;
+    }
+
+    getUserIdFromPeerId(peerId: string): string {
+        return peerId.substring(this.id.length + 1);
+    }
+
+    makeCall(peerId: string, stream: MediaStream): CallHandle | undefined {
+        const opts = { metadata: { userId: this.context.connection.connectionId } };
+        const call = this._peer?.call(peerId, stream, opts);
+        if (call)
+            return this.registerCall(call, CallDirection.Outgoing);
+        return undefined;
+    }
+
+    get peer(): Peer | undefined { return this._peer; }
+
+    readonly id: string;
+    readonly context: Context;
+    private _peer: Peer | undefined;
+    private _incomingCalls: CallHandle[] = [];
+    private _outgoingCalls: CallHandle[] = [];
+
+    private constructor(context: Context, id: string) {
+        super();
+        this.context = context;
+        this.id = id;
+        this.setupPeer();
+        navigator["getUserMedia"] = (
+            navigator["getUserMedia"] || navigator["webkitGetUserMedia"] ||
+            navigator["mozGetUserMedia"] || navigator["msGetUserMedia"]
+        );
+    }
+
+    private _enabled: boolean = false;
+    private _enabledPeer: boolean = false;
+    private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
+    // private onUserJoinedOrLeftRoomFn: Function = this.onUserJoinedOrLeftRoom.bind(this);
+    private onPeerConnectFn: (id) => void = this.onPeerConnect.bind(this);
+    private onPeerReceiveCallFn: (call) => void = this.onPeerReceivingCall.bind(this);
+    // private _connectionPeerIdMap : Map<string, string> = new Map();
+
+    enable() {
+        if (this._enabled) return;
+        this._enabled = true;
+        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
+        // this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
+        // this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
+        this.subscribePeerEvents();
+    }
+
+    disable() {
+        if (!this._enabled) return;
+        this._enabled = false;
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
+        // this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
+        // this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
+        this.unsubscribePeerEvents();
+    }
+
+    private onConnectRoom(): void {
+        this.setupPeer();
+    };
+
+    // private onUserJoinedOrLeftRoom(_: UserJoinedOrLeftRoomModel): void {
+    // };
+
+    private setupPeer() {
+        if (!this.context.connection.connectionId) return;
+        if (this._enabledPeer) return;
+        this._enabledPeer = true;
+        if (!this._peer) {
+            const peerId = this.getMyPeerId();
+            if (peerId)
+                this._peer = getPeerjsInstance(peerId);
+            else console.error("Failed to setup peerjs because we dont have a connection id", this.context.connection.connectionId);
+        }
+        if (this._enabled)
+            this.subscribePeerEvents();
+    }
+
+    private subscribePeerEvents() {
+        if (!this._peer) return;
+        this._peer.on("open", this.onPeerConnectFn);
+        this._peer.on("call", this.onPeerReceiveCallFn);
+        // this.context.connection.beginListen(PeerEvent.Connected, this.onRemotePeerConnect.bind(this));
+        // TODO: make connection to all current active calls even if the user is not anymore in the needle room
+    }
+
+    private unsubscribePeerEvents() {
+        if (!this._peer) return;
+        this._peer.off("open", this.onPeerConnectFn);
+        this._peer.off("call", this.onPeerReceiveCallFn);
+        // this.context.connection.stopListen(PeerEvent.Connected, this.onRemotePeerConnect.bind(this));
+    }
+
+    private onPeerConnect(id): void {
+        if (debug)
+            console.log("Peer connected as", id);
+        this.context.connection.send(NetworkedStreamEvents.Connected, new PeerUserConnectedModel(this, id));
+    }
+
+    private onPeerReceivingCall(call: MediaConnection): void {
+        call.answer();
+        this.registerCall(call, CallDirection.Incoming);
+    }
+
+    private registerCall(call: MediaConnection, direction: CallDirection): CallHandle {
+
+        const meta = call.metadata;
+        if (!meta || !meta.userId) {
+            console.error("Missing call metadata", call);
+        }
+        const userId = meta.userId;
+
+        if (direction === CallDirection.Incoming && debug) console.log("Receive call from", call.metadata);
+        else if (debug) console.log("Make call to", call.metadata);
+
+        const arr = direction === CallDirection.Incoming ? this._incomingCalls : this._outgoingCalls;
+        const handle = new CallHandle(userId, call, direction);
+        arr.push(handle);
+        call.on("error", err => {
+            console.error("Call error", err);
+        });
+        call.on("close", () => {
+            if (debug)
+                console.log("Call ended", call.metadata);
+            call.close();
+            const index = arr.indexOf(handle);
+            if (index !== -1)
+                arr.splice(index, 1);
+        });
+
+        handle.addEventListener(NetworkedStreamEvents.StreamEnded, e => {
+            this.dispatchEvent(e);
+        });
+
+        if (direction === CallDirection.Incoming) {
+
+            handle.addEventListener(NetworkedStreamEvents.StreamReceived, e => {
+                this.dispatchEvent(e);
+            });
+
+            call.on("stream", () => {
+                // workaround for https://github.com/peers/peerjs/issues/636
+                let intervalCounter = 0;
+                const closeInterval = setInterval(() => {
+                    const isFirstInterval = intervalCounter === 0;
+                    if (!handle.isOpen && isFirstInterval) {
+                        intervalCounter += 1;
+                        clearInterval(closeInterval);
+                        handle.close();
+                    }
+                }, 2000);
+            });
+        }
+        return handle;
+    }
+
+    // private onRemotePeerConnect(user: PeerUserConnectedModel) {
+    //     console.log("other user connected", user);
+    // }
+}
+
+
+// type UserVideoCall = {
+//     call: Peer.MediaConnection;
+//     stream: MediaStream;
+//     userId: string;
+// }
+
+// type IncomingStreamArgs = {
+//     stream: MediaStream;
+//     userId: string;
+// }
+
+export class NetworkedStreams extends EventDispatcher {
+
+    static create(comp: IComponent) {
+        const peer = PeerHandle.getOrCreate(comp.context, comp.context.connection.connectionId!);
+        return new NetworkedStreams(comp.context, peer);
+    }
+
+    private readonly context: Context;
+    private readonly peer: PeerHandle;
+
+    // private _receiveVideoStreamListeners: Array<(info: IncomingStreamArgs) => void> = [];
+    private _sendingStreams: Map<MediaStream, CallHandle[]> = new Map();
+
+    debug: boolean = false;
+
+    constructor(context: Context, peer: PeerHandle) {
+        super();
+        this.context = context;
+        this.peer = peer;
+        if (debug) this.debug = true;
+    }
+
+    startSendingStream(stream: MediaStream) {
+        if (!this._sendingStreams.has(stream)) {
+            this._sendingStreams.set(stream, []);
+            this.updateSendingCalls();
+        }
+        else {
+            console.warn("Received start sending stream with stream that is already being sent");
+        }
+    }
+
+    stopSendingStream(_steam: MediaStream | undefined | null) {
+        if (_steam) {
+            const calls = this._sendingStreams.get(_steam);
+            if (calls) {
+                if (this.debug)
+                    console.log("Closing calls", calls);
+                for (const call of calls) {
+                    call.close();
+                }
+            }
+            this._sendingStreams.delete(_steam);
+            if (calls && this.debug)
+                console.log("Currently sending", this._sendingStreams);
+        }
+    }
+
+    // private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
+    // private onUserConnectedFn: Function = this.onUserConnected.bind(this);
+    // private onUserLeftFn: Function = this.onUserLeft.bind(this);
+
+    enable() {
+        this.peer.enable();
+        this.peer.addEventListener(NetworkedStreamEvents.StreamReceived, this.onReceiveStream);
+        //@ts-ignore
+        this.peer.addEventListener(NetworkedStreamEvents.StreamEnded, this.onCallEnded);
+        // this.peer.addEventListener(PeerEvent.UserJoined, this.onUserJoinedPeer);
+        this.context.connection.beginListen(NetworkedStreamEvents.Connected, this.onUserConnected);
+        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onJoinedRoom);
+        this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onJoinedRoom);
+        this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserLeft);
+    }
+
+    disable() {
+        this.peer.disable();
+        this.peer.removeEventListener(NetworkedStreamEvents.StreamReceived, this.onReceiveStream);
+        //@ts-ignore
+        this.peer.removeEventListener(NetworkedStreamEvents.StreamEnded, this.onCallEnded);
+        // this.peer.removeEventListener(PeerEvent.UserJoined, this.onUserJoinedPeer);
+        this.context.connection.stopListen(NetworkedStreamEvents.Connected, this.onUserConnected);
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onJoinedRoom);
+        this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onJoinedRoom);
+        this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserLeft);
+    }
+
+    // private onUserJoinedPeer = (evt) => {
+    //     if (!this.context.connection.isConnected && evt.userId) {
+    //         this.startCallWithUserIfNotAlready(evt.userId);
+    //     }
+    // }
+
+    // When either we ourselves OR someone else is joining the room we want to make sure to re-establish all calls
+    // and if the user that joined is not yet receiving our video stream we want to start a stream with them
+    // https://github.com/needle-tools/needle-tiny/issues/697#issuecomment-1510425539
+    private onJoinedRoom = (evt) => {
+        if (this.debug) console.log(`${evt.userId} joined room and I'm currently sending ${this._sendingStreams.size} streams`);
+        if (this._sendingStreams.size > 0)
+            this.updateSendingCalls();
+    }
+
+    private onReceiveStream = (evt) => {
+        if (this.debug)
+            console.log("RECEIVE STREAM", evt);
+        this.dispatchEvent({ type: NetworkedStreamEvents.StreamReceived, target: this, stream: evt.stream, userId: evt.userId });
+    }
+
+    private onCallEnded = (evt: StreamEndedEvent) => {
+        this.dispatchEvent(evt)
+    }
+
+    private onUserConnected = (user: PeerUserConnectedModel) => {
+        // console.log(this.peer.id, user.guid)
+        if (this.peer.id === user.guid) {
+            if (this.debug)
+                console.log("USER CONNECTED", user.guid, user);
+            const stream = this._sendingStreams.keys().next().value;
+            this.peer.makeCall(user.peerId, stream);
+        }
+    }
+
+    private onUserLeft = (_: UserJoinedOrLeftRoomModel) => {
+        this.stopCallsToUsersThatAreNotInTheRoomAnymore();
+    }
+
+    private updateSendingCalls() {
+        let startedNewCall = false;
+        const localUserId = this.context.connection.connectionId;
+        for (const stream of this._sendingStreams.keys()) {
+            const calls = this._sendingStreams.get(stream) || [];
+            for (const userId of this.context.connection.usersInRoom()) {
+                if (userId === localUserId) continue;
+                const existing = calls.find(c => c.userId === userId);
+                if (!existing || existing.stream?.active === false) {
+                    if (this.debug)
+                        console.log("Starting call to", userId, localUserId)
+                    const handle = this.peer.makeCall(this.peer.getPeerIdFromUserId(userId), stream);
+                    if (handle) {
+                        startedNewCall = true;
+                        calls.push(handle);
+                    }
+                }
+            }
+
+            this._sendingStreams.set(stream, calls);
+        }
+        this.stopCallsToUsersThatAreNotInTheRoomAnymore();
+        if (startedNewCall && this.debug) {
+            console.log("Currently sending", this._sendingStreams);
+        }
+    }
+
+    // private startCallWithUserIfNotAlready(userId: string) {
+    //     for (const stream of this._sendingVideoStreams.keys()) {
+    //         const calls = this._sendingVideoStreams.get(stream) || [];
+    //         const existing = calls.find(c => c.userId === userId);
+    //         if (!existing || existing.stream?.active === false) {
+    //             if (this.debug) console.log("Starting call to", userId)
+    //             const handle = this.peer.makeCall(this.peer.getPeerIdFromUserId(userId), stream);
+    //             if (handle) {
+    //                 calls.push(handle);
+    //                 return true;
+    //             }
+    //         }
+    //     }
+    //     return false;
+    // }
+
+    private stopCallsToUsersThatAreNotInTheRoomAnymore() {
+        for (const stream of this._sendingStreams.keys()) {
+            const calls = this._sendingStreams.get(stream);
+            if (!calls) continue;
+            for (let i = calls.length - 1; i >= 0; i--) {
+                const call = calls[i];
+                if (!this.context.connection.userIsInRoom(call.userId)) {
+                    call.close();
+                    calls.splice(i, 1);
+                }
+            }
+        }
+    }
+
+    // const call = peer.call(peerId, stream);
+}
+
+export function disposeStream(str: MediaStream | null | undefined) {
+    if (!str) return;
+    if (str instanceof MediaStream) {
+        for (const cap of str.getTracks())
+            cap.stop();
+    }
+}