145 lines
4.6 KiB
JavaScript
145 lines
4.6 KiB
JavaScript
const socket = io("/")
|
|
const videos = document.getElementById("videos")
|
|
const myPeer = new Peer()
|
|
const popup = document.querySelector("#popup")
|
|
const hrefInput = document.querySelector("#href")
|
|
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 || event.touches[0].clientX) -
|
|
startX +
|
|
"px")
|
|
|
|
let pos1 = 0,
|
|
pos2 = 0,
|
|
pos3 = 0,
|
|
pos4 = 0
|
|
|
|
const elementDrag = (event) => {
|
|
pos1 = pos3 - (event.clientX || event.touches[0].clientX)
|
|
pos2 = pos4 - (event.clientY || event.touches[0].clientY)
|
|
pos3 = event.clientX || event.touches[0].clientX
|
|
pos4 = event.clientY || event.touches[0].clientY
|
|
element.style.top = `${element.offsetTop - pos2}px`
|
|
element.style.left = `${element.offsetLeft - pos1}px`
|
|
}
|
|
|
|
const removeFunctions = (resize) => {
|
|
document.removeEventListener("mousemove", resize ? doDrag : elementDrag)
|
|
document.removeEventListener("mouseup", this)
|
|
document.removeEventListener("touchmove", resize ? doDrag : elementDrag)
|
|
document.removeEventListener("touchend", this)
|
|
}
|
|
|
|
const initDrag = (event) => {
|
|
startX = event.clientX || event.touches[0].clientX
|
|
startY = event.clientY || event.touches[0].clientY
|
|
startWidth = element.clientWidth
|
|
startHeight = element.clientHeight
|
|
|
|
document.addEventListener("mousemove", doDrag)
|
|
document.addEventListener("touchmove", doDrag)
|
|
document.addEventListener("touchend", () => removeFunctions(true))
|
|
document.addEventListener("mouseup", () => removeFunctions(true))
|
|
}
|
|
|
|
const resizer = document.createElement("div")
|
|
resizer.className = "resizer"
|
|
element.appendChild(resizer)
|
|
resizer.addEventListener("mousedown", initDrag)
|
|
resizer.addEventListener("touchstart", initDrag)
|
|
|
|
const dragMouseDown = (event) => {
|
|
if (event.target == resizer) return
|
|
|
|
pos3 = event.clientX || event.touches[0].clientX
|
|
pos4 = event.clientY || event.touches[0].clientY
|
|
document.addEventListener("mousemove", elementDrag)
|
|
document.addEventListener("touchmove", elementDrag)
|
|
document.addEventListener("touchend", () => removeFunctions())
|
|
document.addEventListener("mouseup", () => removeFunctions())
|
|
}
|
|
|
|
element.addEventListener("mousedown", dragMouseDown)
|
|
element.addEventListener("touchstart", dragMouseDown)
|
|
}
|
|
|
|
const connectToNewUser = (userId, stream) => {
|
|
console.log("somebody joined", stream, userId)
|
|
const call = myPeer.call(userId, stream)
|
|
const video = document.createElement("video")
|
|
|
|
call.on("stream", (userVideoStream) =>
|
|
addVideoStream(video, userVideoStream)
|
|
)
|
|
|
|
call.on("close", () => video.remove())
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
document
|
|
.querySelector("#share")
|
|
.addEventListener("click", () => popup.classList.remove("dismissed"))
|
|
|
|
hrefInput.value = window.location.href
|
|
|
|
document.querySelector("#copy").addEventListener("click", () => {
|
|
hrefInput.focus()
|
|
hrefInput.select()
|
|
navigator.clipboard.writeText(hrefInput.value)
|
|
document.querySelector("#is-copied").classList.add("copied")
|
|
})
|
|
|
|
document
|
|
.querySelector("#close")
|
|
.addEventListener("click", () => popup.classList.add("dismissed"))
|
|
|
|
navigator.mediaDevices
|
|
.getUserMedia({
|
|
video: true,
|
|
audio: true,
|
|
})
|
|
.then((stream) => {
|
|
addVideoStream(myVideo, stream, true)
|
|
myPeer.on("call", (call) => {
|
|
call.answer(stream)
|
|
const video = document.createElement("video")
|
|
call.on("close", () => video.remove())
|
|
call.on("stream", (userVideoStream) =>
|
|
addVideoStream(video, userVideoStream)
|
|
)
|
|
})
|
|
|
|
socket.on("user-connected", (userId) =>
|
|
connectToNewUser(userId, stream)
|
|
)
|
|
})
|
|
|
|
socket.on("user-disconnected", (userId) => {
|
|
const call = myPeer.connections[userId]
|
|
if (call) call[0].close()
|
|
console.log("somebody left", userId)
|
|
})
|
|
|
|
myPeer.on("open", (id) => socket.emit("join-room", ROOM_ID, id))
|