Added absolutely positioned view of self.

public/script.js

@@ -5,6 +5,60 @@ const myVideo = document.createElement("video")
 
 myVideo.muted = true
 
+const dragElement = (element) => {
+    let startX, startY, startWidth, startHeight
+
+    const doDrag = (event) =>
+        (element.style.width = startWidth + event.clientX - startX + "px")
+
+    const initDrag = (event) => {
+        startX = event.clientX
+        startY = event.clientY
+        startWidth = element.clientWidth
+        startHeight = element.clientHeight
+
+        document.addEventListener("mousemove", doDrag)
+        document.addEventListener("mouseup", () => {
+            document.removeEventListener("mousemove", doDrag)
+            document.removeEventListener("mouseup", this)
+        })
+    }
+
+    const resizer = document.createElement("div")
+    resizer.className = "resizer"
+    element.appendChild(resizer)
+    resizer.addEventListener("mousedown", initDrag)
+
+    let pos1 = 0,
+        pos2 = 0,
+        pos3 = 0,
+        pos4 = 0
+
+    const elementDrag = (event) => {
+        pos1 = pos3 - event.clientX
+        pos2 = pos4 - event.clientY
+        pos3 = event.clientX
+        pos4 = event.clientY
+        element.style.top = `${element.offsetTop - pos2}px`
+        element.style.left = `${element.offsetLeft - pos1}px`
+        event.preventDefault()
+    }
+
+    const dragMouseDown = (event) => {
+        if (event.target == resizer) return false
+        pos3 = event.clientX
+        pos4 = event.clientY
+        document.addEventListener("mousemove", elementDrag)
+        document.addEventListener("mouseup", () => {
+            document.removeEventListener("mouseup", this)
+            document.removeEventListener("mousemove", elementDrag)
+        })
+        event.preventDefault()
+    }
+
+    element.addEventListener("mousedown", dragMouseDown)
+}
+
 const connectToNewUser = (userId, stream) => {
     const call = myPeer.call(userId, stream)
     const video = document.createElement("video")
@@ -16,9 +70,18 @@ const connectToNewUser = (userId, stream) => {
     call.on("close", () => video.remove())
 }
 
-const addVideoStream = (video, stream) => {
+const addVideoStream = (video, stream, isYours) => {
     video.srcObject = stream
     video.addEventListener("loadedmetadata", () => video.play())
+    if (isYours) {
+        const container = document.createElement("div")
+        container.classList.add("your-video")
+        container.append(video)
+        videos.append(container)
+        return dragElement(container)
+    }
+
+    video.controls = "controls"
     videos.append(video)
 }
 
@@ -28,12 +91,10 @@ navigator.mediaDevices
         audio: true,
     })
     .then((stream) => {
-        addVideoStream(myVideo, stream)
+        addVideoStream(myVideo, stream, true)
         myPeer.on("call", (call) => {
             call.answer(stream)
             const video = document.createElement("video")
-            // const fullscreen = document.createElement("button")
-            // fullscreen.dataset.id =
             call.on("close", () => video.remove())
             call.on("stream", (userVideoStream) =>
                 addVideoStream(video, userVideoStream)