11 |
12 |
13 | ## Deployment
14 |
15 | To deploy this project run
16 |
17 | ```bash
18 | npm install
19 | npm run build
20 | npm start
21 | ```
22 |
23 |
24 | # Hi, I'm Ved Gupta! 👋
25 |
26 |
27 | ## 🔗 Links
28 | [](https://github.com/innovatorved/)
29 | [](https://in.linkedin.com/in/innovatorved)
30 | [](https://twitter.com/innovatorved)
31 |
32 |
33 | ## Authors
34 |
35 | - [@innovatorved](https://www.github.com/innovatorved)
36 |
37 | ## Acknowledgements
38 |
39 | - [Python recall for Developers](https://github.com/innovatorved/python-recall)
40 | - [Prenotebook](https://github.com/innovatorved/PreNotebook)
41 | - [TextManipulator](https://github.com/innovatorved/TextManipulator)
42 | ## Support and Feedback
43 |
44 | For support and Feedback, email vedgupta@protonmail.com
45 |
46 |
--------------------------------------------------------------------------------
/pages/api/server.js:
--------------------------------------------------------------------------------
1 | import { Server } from "socket.io";
2 |
3 | import PRINT from '../../Modules/production';
4 |
5 | export default function handler(req, res) {
6 | if (res.socket.server.io) {
7 | PRINT("Socket is already running");
8 | } else {
9 | PRINT("Socket is initializing");
10 |
11 | const io = new Server(res.socket.server);
12 | res.socket.server.io = io;
13 |
14 | io.on("connection", (socket) => {
15 |
16 | socket.emit("me", socket.id)
17 |
18 | socket.on("chat", (msg) => {
19 | socket.broadcast.emit(msg.recipent, msg);
20 | });
21 |
22 | socket.on("MakeCall", (data) => {
23 | // call a user
24 | /**
25 | * io.to(
26 | -send to specific sopcket.id
27 | ).emit(
28 | "label", data
29 | )
30 | */
31 | // console.log(data);
32 | PRINT(data.from)
33 | socket.broadcast.emit(data.user, {
34 | caller: data.from,
35 | signal: data.signal
36 | })
37 | });
38 |
39 | socket.on("AnswerCall", (data) => {
40 | // Recieve a call
41 | /**
42 | * io.to(
43 | -send to specific sopcket.id
44 | ).emit(
45 | "label", data
46 | )
47 | */
48 | PRINT(data.to)
49 | socket.broadcast.emit(`callAccepted${data.to}`, data.signal)
50 | })
51 |
52 | });
53 | }
54 | res.end();
55 | }
56 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from "react";
2 |
3 | import Peer from "simple-peer";
4 | import io from "socket.io-client";
5 | let socket;
6 |
7 | import PRINT from "../Modules/production";
8 |
9 | export default function Home() {
10 | const [ callerInfo, setCallerInfo ] = useState({
11 | recievingCall: false,
12 | caller: "",
13 | signal: null,
14 | });
15 | const [ MyStream, SetMyStream ] = useState();
16 | const [ username, setusername ] = useState("");
17 |
18 | const [ userToCall, setUserToCall ] = useState("");
19 |
20 | const MyVideo = useRef();
21 | const UserVideo = useRef();
22 | const connectionRef = useRef();
23 |
24 | const socketInitializer = async (username) => {
25 | await fetch("/api/server");
26 | socket = io();
27 |
28 | socket.on("connect", () => {
29 | PRINT("connected");
30 | });
31 |
32 | socket.on("me", (id) => {
33 | PRINT(id);
34 | });
35 |
36 | socket.on(username, (data) => {
37 | setCallerInfo({
38 | recievingCall: true,
39 | caller: data.caller,
40 | signal: data.signal,
41 | });
42 | });
43 | };
44 |
45 | const GetPermissionForCameraAndAudio = () => {
46 | navigator.mediaDevices
47 | .getUserMedia({
48 | video: true,
49 | audio: true,
50 | })
51 | .then((stream) => {
52 | SetMyStream(stream);
53 | MyVideo.current.srcObject = stream;
54 | PRINT("Permission Accepted");
55 | })
56 | .catch(() => {
57 | PRINT("Permission Denied");
58 | });
59 | };
60 | // let isMobileDevice = false;
61 | const [isMobileDevice , setIsMobileDevice] = useState(true);
62 |
63 | useEffect(() => {
64 |
65 | let details = navigator.userAgent;
66 | let regexp = /android|iphone|kindle|ipad/i;
67 | setIsMobileDevice(regexp.test(details))
68 | const u = prompt("Enter the Username");
69 | setusername(u);
70 | GetPermissionForCameraAndAudio();
71 | socketInitializer(u);
72 |
73 | if (isMobileDevice === true ) return ;
74 | // eslint-disable-next-line react-hooks/exhaustive-deps
75 | }, []);
76 |
77 | const MakeCall = (to) => {
78 | const peer = new Peer({
79 | // Call Started
80 | initiator: true,
81 | trickle: false,
82 | stream: MyStream,
83 | });
84 |
85 | peer.on("signal", (data) => {
86 | socket.emit("MakeCall", {
87 | user: to,
88 | signal: data,
89 | from: username,
90 | });
91 | });
92 |
93 | peer.on("stream", (stream) => {
94 | UserVideo.current.srcObject = stream;
95 | });
96 |
97 | PRINT(`callAccepted${username}`);
98 |
99 | socket.on(`callAccepted${username}`, (signal) => {
100 | peer.signal(signal);
101 | });
102 |
103 | connectionRef.current = peer;
104 | };
105 |
106 | const AnswerCall = () => {
107 | const peer = new Peer({
108 | initiator: false,
109 | trickle: false,
110 | stream: MyStream,
111 | });
112 |
113 | peer.on("signal", (data) => {
114 | PRINT(callerInfo);
115 | socket.emit("AnswerCall", { to: callerInfo.caller, signal: data });
116 | });
117 |
118 | peer.on("stream", (stream) => {
119 | UserVideo.current.srcObject = stream;
120 | });
121 |
122 | peer.signal(callerInfo.signal);
123 |
124 | connectionRef.current = peer;
125 | };
126 |
127 | const leaveCall = () => {
128 | setCallerInfo({ ...callerInfo, recievingCall: false });
129 | connectionRef.current.destroy();
130 | };
131 |
132 | return (
133 |