zoom : create room

zoom/src/public/js/app.js

@@ -4,11 +4,14 @@ const myFace = document.getElementById("myFace");
 const muteBtn = document.getElementById("mute");
 const cameraBtn = document.getElementById("camera");
 const camerasSelect = document.getElementById("cameras");
+const call = document.getElementById("call");
+
+call.hidden = true;
 
 let myStream;
 let mute = false;
 let camera = false;
-
+let roomName;
 
 
 async function getCameras() {
@@ -56,8 +59,6 @@ async function getMedia(deviceId) {
     }
 }
 
-getMedia();
-
 function handleMuteClick() {
     myStream
         .getAudioTracks()
@@ -91,4 +92,34 @@ async function handleCameraChange() {
 }
 muteBtn.addEventListener("click", handleMuteClick);
 cameraBtn.addEventListener("click", handleCameraClick);
-camerasSelect.addEventListener("input", handleCameraChange);
+camerasSelect.addEventListener("input", handleCameraChange);
+
+
+// Welcome Form (join a room)
+
+const welcome = document.getElementById("welcome");
+const welcomeForm = welcome.querySelector("form");
+
+function startMedia() {
+    welcome.hidden = true;
+    call.hidden = false;
+    getMedia();
+}
+
+function handleWelcomeSubmit(event) {
+    event.preventDefault();
+    const input = welcomeForm.querySelector("input");
+    socket.emit("join_room", input.value, startMedia);
+    roomName = input.value;
+    input.value = "";
+
+}
+
+welcomeForm.addEventListener("submit", handleWelcomeSubmit);
+
+
+// Socket Code
+
+socket.on("welcome", () => {
+    console.log("somebody join room");
+})

zoom/src/server.js

@@ -13,5 +13,13 @@ app.get("/*", (_, res) => res.redirect("/"));
 const httpServer = http.createServer(app);
 const wsServer = SocketIO(httpServer);
 
+wsServer.on("connection", socket => {
+    socket.on("join_room", (roomName, done) => {
+        socket.join(roomName);
+        done();
+        socket.to(roomName).emit("welcome");
+    })
+})
+
 const handleListen = () => console.log(`Listening on http://localhost:3000`);
 httpServer.listen(3000, handleListen);

zoom/src/views/home.pug

@@ -11,11 +11,16 @@ html(lang="en")
         header 
             h1 Zooom!
         main
-            div#myStream
-                video#myFace(autoplay, playsinline, width="400", height="400") 
-                button#mute Mute
-                button#camera Turn Camera Off
-                select#cameras
+            div#welcome
+                form
+                    input(placeholder="room name", required, type="text")
+                    button EnterRoom
+            div#call
+                div#myStream
+                    video#myFace(autoplay, playsinline, width="400", height="400") 
+                    button#mute Mute
+                    button#camera Turn Camera Off
+                    select#cameras
 
         script(src="/socket.io/socket.io.js") 
         script(src="/public/js/app.js")