From 79cc2ab064716c4943a6c320bf3679c2a3360412 Mon Sep 17 00:00:00 2001 From: Remi Daniel Aluko~ Date: Wed, 28 Jun 2023 13:39:42 +0100 Subject: [PATCH 001/367] added --- .../sidebar_components/sideBottomNavControl.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/development/src/components/navbar_components/sidebar_components/sideBottomNavControl.js b/development/src/components/navbar_components/sidebar_components/sideBottomNavControl.js index 9c7cb7f5..4f2957fe 100644 --- a/development/src/components/navbar_components/sidebar_components/sideBottomNavControl.js +++ b/development/src/components/navbar_components/sidebar_components/sideBottomNavControl.js @@ -1,12 +1,12 @@ -import { appAuth } from '@/composables/firebaseConfig/config'; -import { isUserSignedIn } from '@/composables/verifySignedIn'; -import Image from 'next/image'; -import { useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; +import { appAuth } from "@/composables/firebaseConfig/config"; +import { isUserSignedIn } from "@/composables/verifySignedIn"; +import Image from "next/image"; +import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; const btnNav = [ - '/assets/sideBottomNavControls/logout.png', - '/assets/sideBottomNavControls/settings.png', + "/assets/sideBottomNavControls/logout.png", + "/assets/sideBottomNavControls/settings.png", ]; function SideBottomNavControl() { const router = useRouter(); @@ -27,7 +27,8 @@ function SideBottomNavControl() { return ( ); From 581ebfb8a98219b7c866ab23d7784a272098811c Mon Sep 17 00:00:00 2001 From: Remi Daniel Aluko~ Date: Sun, 2 Jul 2023 00:01:03 +0100 Subject: [PATCH 002/367] Added --- development/package-lock.json | 184 ++++++++++++++++++++- development/package.json | 3 +- development/server.js | 21 +++ development/src/components/codingEditor.js | 2 +- development/src/components/collab_comp.js | 17 +- development/src/components/signup_comp.js | 1 - development/src/components/webcam_comp.js | 140 +++++++++++++++- package-lock.json | 6 - 8 files changed, 351 insertions(+), 23 deletions(-) delete mode 100644 package-lock.json diff --git a/development/package-lock.json b/development/package-lock.json index 93e9ecc9..9cbd4fe9 100644 --- a/development/package-lock.json +++ b/development/package-lock.json @@ -22,6 +22,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-monaco-editor": "^0.52.0", + "simple-peer": "^9.11.1", "socket.io": "^4.6.2", "socket.io-client": "^4.6.2", "tailwindcss": "3.3.2", @@ -1717,6 +1718,25 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/base64id": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", @@ -1857,6 +1877,29 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/buffer-equal-constant-time": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", @@ -2510,6 +2553,11 @@ "node": ">=10.13.0" } }, + "node_modules/err-code": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz", + "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==" + }, "node_modules/es-abstract": { "version": "1.21.2", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz", @@ -3453,6 +3501,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-browser-rtc": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz", + "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ==" + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -3741,6 +3794,25 @@ "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==" }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -5304,7 +5376,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", - "peer": true, "dependencies": { "safe-buffer": "^5.1.0" } @@ -5380,6 +5451,19 @@ "pify": "^2.3.0" } }, + "node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -5796,6 +5880,34 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "node_modules/simple-peer": { + "version": "9.11.1", + "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz", + "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "buffer": "^6.0.3", + "debug": "^4.3.2", + "err-code": "^3.0.1", + "get-browser-rtc": "^1.1.0", + "queue-microtask": "^1.2.3", + "randombytes": "^2.1.0", + "readable-stream": "^3.6.0" + } + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -5914,6 +6026,14 @@ "node": ">=10.0.0" } }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, "node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -8159,6 +8279,11 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==" + }, "base64id": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", @@ -8257,6 +8382,15 @@ "update-browserslist-db": "^1.0.10" } }, + "buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "buffer-equal-constant-time": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", @@ -8732,6 +8866,11 @@ "tapable": "^2.2.0" } }, + "err-code": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz", + "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==" + }, "es-abstract": { "version": "1.21.2", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz", @@ -9453,6 +9592,11 @@ "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==" }, + "get-browser-rtc": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz", + "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ==" + }, "get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", @@ -9648,6 +9792,11 @@ "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==" }, + "ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" + }, "ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -10670,7 +10819,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", - "peer": true, "requires": { "safe-buffer": "^5.1.0" } @@ -10729,6 +10877,16 @@ "pify": "^2.3.0" } }, + "readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + }, "readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -11022,6 +11180,20 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, + "simple-peer": { + "version": "9.11.1", + "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz", + "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==", + "requires": { + "buffer": "^6.0.3", + "debug": "^4.3.2", + "err-code": "^3.0.1", + "get-browser-rtc": "^1.1.0", + "queue-microtask": "^1.2.3", + "randombytes": "^2.1.0", + "readable-stream": "^3.6.0" + } + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -11113,6 +11285,14 @@ "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==" }, + "string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "requires": { + "safe-buffer": "~5.2.0" + } + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", diff --git a/development/package.json b/development/package.json index 2381593c..925b434f 100644 --- a/development/package.json +++ b/development/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "stage":"next dev", + "stage": "next dev", "dev": "concurrently \"next dev\" \"node server.js\"", "build": "next build", "start": "next start", @@ -26,6 +26,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-monaco-editor": "^0.52.0", + "simple-peer": "^9.11.1", "socket.io": "^4.6.2", "socket.io-client": "^4.6.2", "tailwindcss": "3.3.2", diff --git a/development/server.js b/development/server.js index 87c5024f..d41c0cc4 100644 --- a/development/server.js +++ b/development/server.js @@ -30,6 +30,27 @@ io.on("connection", (socket) => { }); }); +io.on("connection", (socket) => { + socket.emit("me", socket.id); + + socket.on("disconnect", () => { + socket.broadcast.emit("callEnded"); + console.log("Client disconnected"); + }); + + socket.on("callPeer", (data) => { + io.to(data.userToCall).emit("callPeer", { + signal: data.signalData, + from: data.from, + name: data.name, + }); + }); + + socket.on("answerCall", (data) => + io.to(data.to).emit("callAccepted", data.signal) + ); +}); + server.listen(3001, () => { console.log("WebSocket server is running on port 3001"); }); diff --git a/development/src/components/codingEditor.js b/development/src/components/codingEditor.js index 3e8f09ef..5ec4c3eb 100644 --- a/development/src/components/codingEditor.js +++ b/development/src/components/codingEditor.js @@ -11,7 +11,7 @@ function CodingEditor({ peerid }) { const [codes, setCodes] = useState(""); const language = items.filter((e) => e.active)[0].ext; const socket = io("http://localhost:3001"); - + useEffect(() => { socket.emit("join-room", peerid); socket.on("text-update", (data) => { diff --git a/development/src/components/collab_comp.js b/development/src/components/collab_comp.js index 0386f2d9..d654ca67 100644 --- a/development/src/components/collab_comp.js +++ b/development/src/components/collab_comp.js @@ -5,14 +5,14 @@ import { useEffect } from "react"; import WebCamRecorder from "./webcam_comp"; import { useStoreSession } from "@/composables/dbService"; -const Collab = ({isCollabOn}) => { +const Collab = ({ isCollabOn }) => { const { sessionData } = useSessionContext(); const { storeSession, getStoreSessionDetails } = useStoreSession(); useEffect(() => { getStoreSessionDetails(sessionData.peerSessionId); }, [sessionData]); - + return (
@@ -43,14 +43,19 @@ const Collab = ({isCollabOn}) => {
- {}} peername={storeSession.collaboratorName} - isUser={false} - /> + isUser={true} + /> */} + {}} - peername={storeSession.codersName} + peerDetails={{ + codersName: storeSession.codersName, + peerId: storeSession.peerId, + collaboratorsName: storeSession.collaboratorsName, + }} isUser={true} />
diff --git a/development/src/components/signup_comp.js b/development/src/components/signup_comp.js index 82794b9f..81c7ae6b 100644 --- a/development/src/components/signup_comp.js +++ b/development/src/components/signup_comp.js @@ -53,7 +53,6 @@ function SignUpComponent() { const [usernameAvailable, setUsernameAvailable] = useState(null); const [showVerificationOverlay, setShowVerificationOverlay] = useState(false); const [showForm, setShowForm] = useState(true); - const router = useRouter(); const handleCloseForm = () => { setShowForm(false); diff --git a/development/src/components/webcam_comp.js b/development/src/components/webcam_comp.js index e9270a64..3a474542 100644 --- a/development/src/components/webcam_comp.js +++ b/development/src/components/webcam_comp.js @@ -1,7 +1,18 @@ import { useCallback, useEffect, useRef, useState } from "react"; +import { io } from "socket.io-client"; +import SimplePeer from "simple-peer"; +import { useSessionContext } from "@/composables/sessionContext"; -export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { - const videoRef = useRef(null); +export default function WebCamRecorder({ + onBlobChanged, + peername, + peerDetails, + isUser, +}) { + const socket = io.connect("http://localhost:3001"); + const myVideoRef = useRef(null); + const userVideoRef = useRef(null); + const connectionRef = useRef(null); const [videoStream, setVideoStream] = useState(null); const [audioStream, setAudioStream] = useState(null); const [recorder, setRecorder] = useState(null); @@ -10,6 +21,15 @@ export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { const [videoEnabled, setVideoEnabled] = useState(false); const [isSession, setIsSession] = useState(false); const [blob, setBlob] = useState(false); + const [name, setName] = useState(""); + const [caller, setCaller] = useState(""); + const [callEnded, setCallEnded] = useState(false); + const [callerSignal, setCallerSignal] = useState(""); + const [recievingCall, setRecievingCall] = useState(""); + const [callAccepted, setCallAccepted] = useState(false); + const [idToCall, setIdToCall] = useState(false); + const [me, setMe] = useState(false); + const { sessionData } = useSessionContext(); const stopAudio = () => { try { @@ -70,7 +90,7 @@ export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { navigator.mediaDevices .getUserMedia({ video: true }) .then((stream) => { - videoRef.current.srcObject = stream; + myVideoRef.current.srcObject = stream; setVideoStream(stream); }) .catch((err) => console.error(err)); @@ -118,6 +138,9 @@ export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { } }; useEffect(() => { + console.log(socket); + console.log(sessionData); + console.log(peerDetails); if (audioEnabled) { startAudioStream(); } else { @@ -128,6 +151,19 @@ export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { if (videoEnabled) { console.log("Enabled"); startVideoStream(); + + socket.on("me", (id) => { + setMe(id); + }); + + socket.on("callpeer", (data) => { + setRecievingCall(true); + setCaller(data.from); + setName(data.name); + setCallerSignal(data.signal); + }); + + callPeer(sessionData.peerSessionId); } else { if (videoStream != null) { stopVideoCam(); @@ -138,7 +174,64 @@ export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { } else { setIsSession(false); } - }, [audioEnabled, videoEnabled]); + + if (peerDetails.collaboratorsName) { + answerCall(); + } + }, [audioEnabled, videoEnabled, peerDetails]); + + const callPeer = (id) => { + const peer = new SimplePeer({ + initiator: true, + trickle: false, + stream: videoStream, + }); + + peer.on("signal", (data) => { + socket.emit("callPeer", { + userToCall: id, + signalData: data, + from: me, + name: name, + }); + }); + + peer.on("stream", (videoStream) => { + userVideoRef.current.srcObject = videoStream; + }); + + socket.on("callAccepted", (signal) => { + setCallAccepted(true); + peer.signal(signal); + }); + + connectionRef.current = peer; + }; + const answerCall = () => { + setCallAccepted(true); + + const peer = new SimplePeer({ + initiator: false, + trickle: false, + stream: videoStream, + }); + + peer.on("signal", (data) => { + socket.emit("answerCall", { signal: data, to: caller }); + }); + + peer.on("stream", (stream) => { + userVideoRef.current.srcObject = stream; + }); + + peer.signal(callerSignal); + connectionRef.current = peer; + }; + + const endCall = () => { + setCallEnded(true); + connectionRef.current.destroy(); + }; return (
@@ -148,10 +241,23 @@ export default function WebCamRecorder({ onBlobChanged, peername, isUser }) { height: `350px`, objectFit: "cover", }} - ref={videoRef} + ref={myVideoRef} autoPlay + muted className="top-0 left-0 w-full h-full aspect-video rounded-2xl shadow-gray-800" /> + +
diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index bb552997..00000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "P2PCoder", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 120f34aa7602477d0fb3c427ec2058eded93fabe Mon Sep 17 00:00:00 2001 From: Remi Daniel Aluko~ Date: Mon, 3 Jul 2023 13:41:41 +0100 Subject: [PATCH 003/367] updated --- development/server.js | 36 ++++++++------- development/src/components/webcam_comp.js | 53 +++++++++++++++-------- 2 files changed, 56 insertions(+), 33 deletions(-) diff --git a/development/server.js b/development/server.js index d41c0cc4..fb8eecde 100644 --- a/development/server.js +++ b/development/server.js @@ -13,24 +13,29 @@ const io = socketIO(server, { }, }); -io.on("connection", (socket) => { - socket.on("join-room", (room) => { - socket.join(room); - console.log(`Client joined room: ${room}`); - }); - - socket.on("text-update", (data) => { - // Broadcast the received update to all connected clients - io.to(data.room).emit("text-update", data.newValue); - console.log(data); - }); +// io.on("connection", (socket) => { +// socket.on("join-room", (room) => { +// socket.join(room); +// console.log(`Client joined room: ${room}`); +// }); + +// socket.on("text-update", (data) => { +// // Broadcast the received update to all connected clients +// io.to(data.room).emit("text-update", data.newValue); +// console.log(data); +// }); + +// socket.on("disconnect", () => { +// console.log("Client disconnected"); +// }); +// }); - socket.on("disconnect", () => { - console.log("Client disconnected"); +io.on("connection", (socket) => { + socket.on("join-call", (callId) => { + socket.join(peerId); + console.log(`Client joined call: ${callId}`); }); -}); -io.on("connection", (socket) => { socket.emit("me", socket.id); socket.on("disconnect", () => { @@ -44,6 +49,7 @@ io.on("connection", (socket) => { from: data.from, name: data.name, }); + console.log(data); }); socket.on("answerCall", (data) => diff --git a/development/src/components/webcam_comp.js b/development/src/components/webcam_comp.js index 3a474542..f9bb21ad 100644 --- a/development/src/components/webcam_comp.js +++ b/development/src/components/webcam_comp.js @@ -1,6 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { io } from "socket.io-client"; -import SimplePeer from "simple-peer"; +import Peer from "simple-peer"; import { useSessionContext } from "@/composables/sessionContext"; export default function WebCamRecorder({ @@ -141,6 +141,22 @@ export default function WebCamRecorder({ console.log(socket); console.log(sessionData); console.log(peerDetails); + + socket.emit("join-call", sessionData.peerSessionId); + callPeer(sessionData.peerSessionId); + + socket.on("callpeer", (data) => { + console.log(data); + setRecievingCall(true); + setCaller(data.from); + setName(data.name); + setCallerSignal(data.signal); + }); + + // socket.on("me", (id) => { + // setMe(id); + // }); + if (audioEnabled) { startAudioStream(); } else { @@ -152,16 +168,16 @@ export default function WebCamRecorder({ console.log("Enabled"); startVideoStream(); - socket.on("me", (id) => { - setMe(id); - }); + // socket.on("me", (id) => { + // setMe(id); + // }); - socket.on("callpeer", (data) => { - setRecievingCall(true); - setCaller(data.from); - setName(data.name); - setCallerSignal(data.signal); - }); + // socket.on("callpeer", (data) => { + // setRecievingCall(true); + // setCaller(data.from); + // setName(data.name); + // setCallerSignal(data.signal); + // }); callPeer(sessionData.peerSessionId); } else { @@ -181,7 +197,8 @@ export default function WebCamRecorder({ }, [audioEnabled, videoEnabled, peerDetails]); const callPeer = (id) => { - const peer = new SimplePeer({ + console.log(id) + const peer = new Peer({ initiator: true, trickle: false, stream: videoStream, @@ -191,13 +208,13 @@ export default function WebCamRecorder({ socket.emit("callPeer", { userToCall: id, signalData: data, - from: me, - name: name, + from: sessionData.sessionName, + name: peerDetails.codersName, }); }); - peer.on("stream", (videoStream) => { - userVideoRef.current.srcObject = videoStream; + peer.on("stream", (currentVideoStream) => { + userVideoRef.current.srcObject = currentVideoStream; }); socket.on("callAccepted", (signal) => { @@ -210,7 +227,7 @@ export default function WebCamRecorder({ const answerCall = () => { setCallAccepted(true); - const peer = new SimplePeer({ + const peer = new Peer({ initiator: false, trickle: false, stream: videoStream, @@ -220,8 +237,8 @@ export default function WebCamRecorder({ socket.emit("answerCall", { signal: data, to: caller }); }); - peer.on("stream", (stream) => { - userVideoRef.current.srcObject = stream; + peer.on("stream", (currentVideoStream) => { + userVideoRef.current.srcObject = currentVideoStream; }); peer.signal(callerSignal); From df78c4f7dbcfb96526de829d196be4317c07eb1c Mon Sep 17 00:00:00 2001 From: Remi Daniel Aluko~ Date: Mon, 3 Jul 2023 13:41:54 +0100 Subject: [PATCH 004/367] updated --- development/src/components/webcam_comp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/development/src/components/webcam_comp.js b/development/src/components/webcam_comp.js index f9bb21ad..1f1b3885 100644 --- a/development/src/components/webcam_comp.js +++ b/development/src/components/webcam_comp.js @@ -228,7 +228,7 @@ export default function WebCamRecorder({ setCallAccepted(true); const peer = new Peer({ - initiator: false, + initiator: false,jj trickle: false, stream: videoStream, }); From fc48db935d874076efcbfca4172580bb44562640 Mon Sep 17 00:00:00 2001 From: Remi Daniel Aluko~ Date: Mon, 3 Jul 2023 13:42:06 +0100 Subject: [PATCH 005/367] updated --- development/src/components/webcam_comp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/development/src/components/webcam_comp.js b/development/src/components/webcam_comp.js index 1f1b3885..f9bb21ad 100644 --- a/development/src/components/webcam_comp.js +++ b/development/src/components/webcam_comp.js @@ -228,7 +228,7 @@ export default function WebCamRecorder({ setCallAccepted(true); const peer = new Peer({ - initiator: false,jj + initiator: false, trickle: false, stream: videoStream, }); From 39d392c83dee4d61591a39d1689a98e5663edefa Mon Sep 17 00:00:00 2001 From: Remi Daniel Aluko~ Date: Mon, 3 Jul 2023 14:47:18 +0100 Subject: [PATCH 006/367] updated --- development/server.js | 8 ++++-- development/src/components/webcam_comp.js | 35 +++++++++++++---------- 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/development/server.js b/development/server.js index fb8eecde..ecbbeb57 100644 --- a/development/server.js +++ b/development/server.js @@ -44,6 +44,7 @@ io.on("connection", (socket) => { }); socket.on("callPeer", (data) => { + console.log(data); io.to(data.userToCall).emit("callPeer", { signal: data.signalData, from: data.from, @@ -52,9 +53,10 @@ io.on("connection", (socket) => { console.log(data); }); - socket.on("answerCall", (data) => - io.to(data.to).emit("callAccepted", data.signal) - ); + socket.on("answerCall", (data) => { + console.log(data); + io.to(data.to).emit("callAccepted", data.signal); + }); }); server.listen(3001, () => { diff --git a/development/src/components/webcam_comp.js b/development/src/components/webcam_comp.js index f9bb21ad..c843e82a 100644 --- a/development/src/components/webcam_comp.js +++ b/development/src/components/webcam_comp.js @@ -197,7 +197,7 @@ export default function WebCamRecorder({ }, [audioEnabled, videoEnabled, peerDetails]); const callPeer = (id) => { - console.log(id) + console.log(id); const peer = new Peer({ initiator: true, trickle: false, @@ -211,6 +211,9 @@ export default function WebCamRecorder({ from: sessionData.sessionName, name: peerDetails.codersName, }); + console.log(data); + console.log(sessionData.sessionName); + console.log(name); }); peer.on("stream", (currentVideoStream) => { @@ -225,6 +228,7 @@ export default function WebCamRecorder({ connectionRef.current = peer; }; const answerCall = () => { + console.log("call answered"); setCallAccepted(true); const peer = new Peer({ @@ -254,7 +258,7 @@ export default function WebCamRecorder({