changes

client/package.json

@@ -9,10 +9,12 @@
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.3",
+    "simple-peer": "^9.11.1",
     "socket.io-client": "^4.7.2",
     "sweetalert2": "^11.10.1",
     "web-vitals": "^2.1.4"

client/src/App.js

@@ -4,6 +4,7 @@ import Chat from "./pages/Chat/Chat";
 import Register from "./pages/Register/Register";
 import Login from "./pages/Login/Login";
 import SetAvatar from "./components/setAvatar";
+import VideoCall from "./pages/VideoCall/VideoCall";
 
 function App() {
   const socket = io(process.env.REACT_APP_NODE_API);
@@ -15,6 +16,7 @@ function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/" element={<Chat socket={socket} />} />
         <Route path="/setavatar" element={<SetAvatar />} />
+        <Route path="/videocall" element={<VideoCall/>}/>
       </Routes>
     </Router>
   );

client/src/SocketContext.js

@@ -0,0 +1,112 @@
+import React, { createContext, useEffect, useRef, useState } from "react";
+import io from "socket.io-client";
+import Peer from "simple-peer";
+
+const SocketContext = createContext();
+
+const socket = io(process.env.REACT_APP_NODE_API);
+
+const ContextProvider = ({ children }) => {
+  const [stream, serStream] = useState(null);
+  const [me, setMe] = useState("");
+  const [callAccepted, setCallAccepted] = useState(false);
+  const [callEnded, setcallEnded] = useState(false);
+  const [name, setName] = useState("");
+  const [call, setCall] = useState(false)
+
+  const myvideo = useRef();
+  const userVideo = useRef();
+  const connectionRef = useRef();
+
+  useEffect(() => {
+    navigator.mediaDevices
+      .getUserMedia({ video: false, audio: false })
+      .then((currentStream) => {
+        serStream(currentStream);
+
+        myvideo.current.srcObject = currentStream;
+      });
+
+    socket.on("me", (id) => setMe(id));
+    socket.on("calluser", (from, callerName, signal) => {
+      setCall({ isRecievedCall: true, from, name: callerName, signal });
+    });
+  }, []);
+
+  const answerCall = () => {
+    setCallAccepted(true);
+
+    const peer = new Peer({ initiator: false, trickle: false, stream });
+
+    peer.on("signal", (data) => {
+      socket.emit("answercall", {
+        signal: data,
+        to: call.from,
+      });
+    });
+
+    peer.on("stream", (currentStream) => {
+      userVideo.current.srcObject = currentStream;
+    });
+
+    peer.signal(call.signal);
+
+    connectionRef.current = peer;
+  };
+
+  const callUser = (id) => {
+    const peer = new Peer({ initiator: true, trickle: false, stream });
+
+    peer.on("signal", (data) => {
+      socket.emit("calluser", {
+        userToCall: id,
+        signalData: data,
+        from: me,
+        name,
+      });
+    });
+
+    peer.on("stream", (currentStream) => {
+      userVideo.current.srcObject = currentStream;
+    });
+
+    socket.on("callaccepted", (signal) => {
+      setCallAccepted(true);
+
+      peer.signal(signal);
+    });
+
+    connectionRef.current = peer;
+  };
+
+  const leaveCall = () => {
+    setcallEnded(true);
+
+    connectionRef.current.destroy();
+
+    window.location.reload();
+  };
+
+  return (
+    <SocketContext.Provider
+      value={{
+        call,
+        callAccepted,
+        myvideo,
+        userVideo,
+        stream,
+        name,
+        setName,
+        callEnded,
+        me,
+        callUser,
+        leaveCall,
+        answerCall,
+      }}
+    >
+      {children}
+    </SocketContext.Provider>
+  );
+};
+
+export {ContextProvider, SocketContext}

client/src/components/Notifications.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Notifications = () => {
+  return (
+    <div>Notifications</div>
+  )
+}
+
+export default Notifications

client/src/components/Options.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Options = ({ children }) => {
+  return (
+    <div>
+      Options
+      {children}
+    </div>
+  );
+};
+
+export default Options;

client/src/components/VideoPlayer.jsx

@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+import { SocketContext } from "../SocketContext";
+
+const VideoPlayer = () => {
+  const { name, callAccepted, myVideo, userVideo, callEnded, stream, call } =
+    useContext(SocketContext);
+  return (
+    <div className="flex justify-center gap-8 flex-col md:flex-row h-screen mt-10">
+      {stream && (
+        <div className="bg-white border-2 w-[22rem] h-[22rem]">
+          <h2 className="text-md">{name || "Name"}</h2>
+          <video muted ref={myVideo} autoPlay />
+        </div>
+      )}
+
+      {callAccepted && !callEnded && (
+        <div className="bg-white border-2 w-[22rem] h-[22rem]">
+          <h2 className="text-md">{call?.name || "Name"}</h2>
+          <video muted ref={userVideo} autoPlay />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VideoPlayer;