Some improvements

public/scripts/goToRoom.js

@@ -1,6 +1,15 @@
 import { v4 as uuidv4 } from "https://jspm.dev/uuid"
+import { type } from "./utils.js"
 
 const input = document.querySelector("#go-input")
+
+input.addEventListener("keydown", (event) => {
+    if (event.code == "Space") {
+        event.preventDefault()
+        type("-")
+    } else if (!/^[-a-z0-9]+$/i.test(event.key)) event.preventDefault()
+})
+
 const setHref = () =>
     (document.querySelector("#go").href = input.value || uuidv4())
 

public/scripts/utils.js

@@ -42,7 +42,7 @@ const dragElement = (element) => {
     }
 
     const resizer = document.createElement("div")
-    resizer.className = "resizer"
+    resizer.classList.add("resizer")
     element.appendChild(resizer)
     resizer.addEventListener("mousedown", initDrag)
     resizer.addEventListener("touchstart", initDrag)
@@ -58,7 +58,10 @@ const dragElement = (element) => {
         document.addEventListener("mouseup", () => removeFunctions())
     }
 
-    element.addEventListener("mousedown", dragMouseDown)
+    element.addEventListener(
+        "mousedown",
+        (event) => event.button == 0 && dragMouseDown(event)
+    )
     element.addEventListener("touchstart", dragMouseDown)
 }
 
@@ -80,9 +83,14 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => {
     videos.append(videoContainer)
 }
 
-export const connectToNewUser = (userId, username, stream) => {
+export const showNoVideoPrompt = () =>
+    document.querySelector("#novideo").classList.add("show")
+
+export const connectToNewUser = (userId, username, stream, myPeer) => {
     const call = myPeer.call(userId, stream)
-    const video = template.content.firstElementChild.cloneNode(true)
+    const video = document
+        .querySelector("#video-template")
+        .content.firstElementChild.cloneNode(true)
 
     call.on("stream", (userVideoStream) =>
         addVideoStream(video, username, userVideoStream)
@@ -90,3 +98,13 @@ export const connectToNewUser = (userId, username, stream) => {
 
     call.on("close", () => video.remove())
 }
+
+export const type = (newText) => {
+    const element = document.activeElement
+    element.setRangeText(
+        newText,
+        element.selectionStart,
+        element.selectionEnd,
+        "end"
+    )
+}

public/scripts/video.js

@@ -1,31 +1,46 @@
-import { addVideoStream, connectToNewUser } from "./utils.js"
+import { addVideoStream, connectToNewUser, showNoVideoPrompt } from "./utils.js"
 const socket = io("/")
 const myPeer = new Peer()
 const template = document.querySelector("#video-template")
 const yourName = localStorage.getItem("name")
 
 myPeer.on("open", async (id) => {
-    const stream = await navigator.mediaDevices.getUserMedia({
-        video: true,
-        audio: true,
-    })
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+            audio: true,
+        })
 
-    const myVideo = template.content.firstElementChild.cloneNode(true)
-    addVideoStream(myVideo, yourName, stream, true)
-    myPeer.on("call", (call) => {
-        call.answer(stream)
-        const video = template.content.firstElementChild.cloneNode(true)
-        call.on("close", () => video.remove())
-        call.on("stream", (userVideoStream) =>
-            socket.emit("get-username", call.peer, (username) =>
-                addVideoStream(video, username, userVideoStream)
+        const myVideo = template.content.firstElementChild.cloneNode(true)
+        addVideoStream(myVideo, yourName, stream, true)
+        myPeer.on("call", (call) => {
+            call.answer(stream)
+            const video = template.content.firstElementChild.cloneNode(true)
+            call.on("close", () => video.remove())
+            call.on("stream", (userVideoStream) =>
+                socket.emit("get-username", call.peer, (username) =>
+                    addVideoStream(video, username, userVideoStream)
+                )
             )
-        )
-    })
+        })
+
+        socket.on("user-connected", (userId, username) =>
+            connectToNewUser(userId, username, stream, myPeer)
+        )
+    } catch (error) {
+        if (
+            error.name == "NotAllowedError" ||
+            error.name == "NotFoundError" ||
+            error.name == "PermissionDeniedError" ||
+            error.name == "DevicesNotFoundError"
+        )
+            return showNoVideoPrompt()
+
+        console.log(error.name)
+
+        throw error
+    }
 
-    socket.on("user-connected", (userId, username) =>
-        connectToNewUser(userId, username, stream)
-    )
     socket.emit("join-room", ROOM_ID, id, yourName)
 })