From a39eec7dadff0beec265faa2cf09eb25531a2978 Mon Sep 17 00:00:00 2001 From: talksik Date: Tue, 3 May 2022 10:01:14 -0500 Subject: [PATCH] starting poc for the peerjs stuff and slowly getting it but too complicated right now --- packages/api/index.ts | 30 +++- packages/core/sockets/channels.ts | 7 + .../core/sockets/getAllActiveSocketClients.ts | 3 + packages/core/sockets/receiveSignal.ts | 7 + packages/core/sockets/sendSignal.ts | 7 + packages/desktop/package.json | 5 +- packages/desktop/src/pages/overlay/index.tsx | 145 +++++++++++++++++- yarn.lock | 35 ++++- 8 files changed, 231 insertions(+), 8 deletions(-) create mode 100644 packages/core/sockets/getAllActiveSocketClients.ts create mode 100644 packages/core/sockets/receiveSignal.ts create mode 100644 packages/core/sockets/sendSignal.ts diff --git a/packages/api/index.ts b/packages/api/index.ts index 62881f6..79a09e1 100644 --- a/packages/api/index.ts +++ b/packages/api/index.ts @@ -1,6 +1,9 @@ import express, { Application, Request, Response } from "express"; +import GetAllSocketClients from "@nirvana/core/sockets/getAllActiveSocketClients"; import { NextFunction } from "express"; +import ReceiveSignal from "../core/sockets/receiveSignal"; +import SendSignal from "@nirvana/core/sockets/sendSignal"; import SocketChannels from "@nirvana/core/sockets/channels"; import { UserService } from "./services/user.service"; import { UserStatus } from "@nirvana/core/models"; @@ -33,7 +36,7 @@ var server = app.listen(PORT, () => console.log("express running")); // socket IO stuff const io = require("socket.io")(server, { - // todo: add protection + // todo: add authentication cors: { origin: "*", }, @@ -124,6 +127,31 @@ io.on("connection", function (socket: any) { } ); + socket.on(SocketChannels.JOIN_LIVE_ROOM, async () => { + // TODO: only get the socket ids of the relevant rooms for this user + // return all Socket instances + const allConnectedSockets = Array.from(await io.of("/").sockets.keys()); + + io.to(socket.id).emit(SocketChannels.GET_ALL_ACTIVE_SOCKET_IDS, { + socketIds: allConnectedSockets, + } as GetAllSocketClients); + }); + + socket.on(SocketChannels.SEND_SIGNAL, async (payload: SendSignal) => { + console.log(payload); + + const sendingBackData: ReceiveSignal = { + simplePeerSignal: payload.simplePeerSignal, + senderUserSocketId: socket.id, + isGoingBackToInitiator: payload.isAnswerer, + }; + + io.to(payload.userSocketIdToSignal).emit( + SocketChannels.RECEIVE_SIGNAL, + sendingBackData + ); + }); + // ==== DISCONNECT ==== socket.on("disconnect", () => { console.log("user disconnected"); diff --git a/packages/core/sockets/channels.ts b/packages/core/sockets/channels.ts index 20b7ade..79d1427 100644 --- a/packages/core/sockets/channels.ts +++ b/packages/core/sockets/channels.ts @@ -5,6 +5,13 @@ enum SocketChannels { SEND_STARTED_SPEAKING = "SEND_STARTED_SPEAKING", SEND_STOPPED_SPEAKING = "SEND_STOPPED_SPEAKING", + + JOIN_LIVE_ROOM = "JOIN_LIVE_ROOM", + GET_ALL_ACTIVE_SOCKET_IDS = "GET_ALL_ACTIVE_SOCKET_IDS", + + SEND_SIGNAL = "SEND_SIGNAL", + + RECEIVE_SIGNAL = "RECEIVE_SIGNAL", } export default SocketChannels; diff --git a/packages/core/sockets/getAllActiveSocketClients.ts b/packages/core/sockets/getAllActiveSocketClients.ts new file mode 100644 index 0000000..b7699ae --- /dev/null +++ b/packages/core/sockets/getAllActiveSocketClients.ts @@ -0,0 +1,3 @@ +export default interface GetAllSocketClients { + socketIds: string[]; +} diff --git a/packages/core/sockets/receiveSignal.ts b/packages/core/sockets/receiveSignal.ts new file mode 100644 index 0000000..85e57e9 --- /dev/null +++ b/packages/core/sockets/receiveSignal.ts @@ -0,0 +1,7 @@ +export default interface ReceiveSignal { + simplePeerSignal: any; + + senderUserSocketId: string; + + isGoingBackToInitiator?: boolean; +} diff --git a/packages/core/sockets/sendSignal.ts b/packages/core/sockets/sendSignal.ts new file mode 100644 index 0000000..41ee83e --- /dev/null +++ b/packages/core/sockets/sendSignal.ts @@ -0,0 +1,7 @@ +export default interface SendSignal { + userSocketIdToSignal: string; + + simplePeerSignal: any; + + isAnswerer?: boolean; +} diff --git a/packages/desktop/package.json b/packages/desktop/package.json index e59e749..c13fcb4 100644 --- a/packages/desktop/package.json +++ b/packages/desktop/package.json @@ -55,8 +55,8 @@ [ "@electron-forge/plugin-webpack", { - "port": "4000", - "loggerPort": "9003", + "port": "4001", + "loggerPort": "9004", "mainConfig": "./webpack.main.config.js", "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 'unsafe-eval'", "renderer": { @@ -124,6 +124,7 @@ "react-query": "^3.34.16", "recoil": "^0.6.1", "sass": "^1.51.0", + "simple-peer": "^9.11.1", "socket.io-client": "^4.4.1" } } diff --git a/packages/desktop/src/pages/overlay/index.tsx b/packages/desktop/src/pages/overlay/index.tsx index ca15d0e..07a5633 100644 --- a/packages/desktop/src/pages/overlay/index.tsx +++ b/packages/desktop/src/pages/overlay/index.tsx @@ -1,10 +1,33 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { $maxNumberActiveStreams } from "../../controller/recoil"; import { $numberActiveLines } from "../../controller/recoil"; +import GetAllSocketClients from "@nirvana/core/sockets/getAllActiveSocketClients"; import { OVERLAY_ONLY_INITIAL_PRESET } from "../../electron/constants"; +import Peer from "simple-peer"; +import ReceiveSignal from "@nirvana/core/sockets/receiveSignal"; +import SendSignal from "@nirvana/core/sockets/sendSignal"; +import SocketChannels from "@nirvana/core/sockets/channels"; +import { socket } from "../nirvanaApp"; +import toast from "react-hot-toast"; import { useRecoilState } from "recoil"; +/** + * @returns a video component with the stream of the peer provided + * @param peer : Peer connection that is established + */ +function Video({ peer }: { peer: Peer }) { + const videoRef = useRef(null); + + useEffect(() => { + peer.on("stream", (remoteStream: MediaStream) => { + if (videoRef?.current) videoRef.current.srcObject = remoteStream; + }); + }, [videoRef]); + + return