first commit

public/script.js

@@ -0,0 +1,65 @@
+const socket = io("/");
+const videoGrid = document.getElementById("video-grid");
+const myPeer = new Peer(undefined, {
+	host: "/",
+	port: "3001",
+});
+
+const myVideo = document.createElement("video");
+myVideo.muted = true;
+const peers = {};
+navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(
+	(stream) => {
+		addVideoStream(myVideo, stream);
+
+		myPeer.on("call", (call) => {
+			call.answer(stream);
+			const video = document.createElement("video");
+			call.on("stream", (userVideoStream) => {
+				addVideoStream(video, userVideoStream);
+			});
+		});
+		socket.on("user-connected", (userId) => {
+			connectToNewUser(userId, stream);
+		});
+	},
+	(err) => console.error(err)
+);
+
+myPeer.on("open", (id) => {
+	socket.emit("join-room", ROOM_ID, id);
+});
+socket.emit("join-room", ROOM_ID, 10);
+
+socket.on("user-connected", (userId) => {
+	console.log(`User ${userId} connected`);
+});
+
+socket.on("user-disconnected", (userId) => {
+	if (peers[userId]) {
+		console.log(`User ${userId} disconnected`);
+		peers[userId].close();
+		delete peers[userId];
+	}
+});
+
+function connectToNewUser(userId, stream) {
+	const call = myPeer.call(userId, stream);
+	const video = document.createElement("video");
+	call.on("stream", (userVideoStream) => {
+		addVideoStream(video, userVideoStream);
+	});
+	call.on("close", () => {
+		video.remove();
+	});
+
+	peers[userId] = call;
+}
+
+function addVideoStream(video, stream) {
+	video.srcObject = stream;
+	video.addEventListener("loadedmetadata", () => {
+		video.play();
+	});
+	videoGrid.append(video);
+}