Henry-Hiles/Video-Chat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bit of a rewrite

Browse source
This commit is contained in:
Henry Hiles 2022-06-02 14:56:53 -04:00
parent b6377bd228
commit 82dd6fd398
11 changed files with 787 additions and 953 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1210
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

14
package.json
View file

@ -1,21 +1,17 @@
{
"name": "zoom-clone",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devStart": "nodemon server.js"
},
"keywords": [],
"author": "",
"main": "server.js",
"author": "Henry Hiles",
"type": "module",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.2",
"socket.io": "^2.4.1",
"socket.io": "^4.5.1",
"uuid": "^8.3.2"
},
"devDependencies": {
"nodemon": "^2.0.15"
"@types/socket.io": "^3.0.2"
}
}

9
public/scripts/goToRoom.js Normal file
View file

@ -0,0 +1,9 @@
import { v4 as uuidv4 } from "https://jspm.dev/uuid"
const input = document.querySelector("#go-input")
const setHref = () =>
(document.querySelector("#go").href = input.value || uuidv4())
setHref()
input.addEventListener("keyup", setHref)

23
public/scripts/login.js Normal file
View file

@ -0,0 +1,23 @@
const socket = io("/")
const login = document.querySelector("#login")
const nameButton = document.querySelector("#name")
const nameInput = document.querySelector("#name-input")
const nameDisplay = document.querySelector("#name-display")
document
.querySelector("#change-name")
.addEventListener("click", () => login.classList.remove("done"))
const yourName = localStorage.getItem("name")
if (yourName) nameDisplay.innerText = yourName
else login.classList.remove("done")
if (nameButton)
nameButton.addEventListener("click", () => {
if (!nameInput.value) return (nameInput.required = true)
document.querySelector("#login").classList.add("done")
localStorage.setItem("name", nameInput.value)
nameDisplay.innerText = nameInput.value
socket.emit("name-change", nameInput.value)
})

19
public/scripts/share.js Normal file
View file

@ -0,0 +1,19 @@
const popup = document.querySelector("#popup")
const hrefInput = document.querySelector("#href")
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"))

97
public/script.js → public/scripts/utils.js
View file

@ -1,12 +1,3 @@
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
@ -71,77 +62,31 @@ const dragElement = (element) => {
element.addEventListener("touchstart", dragMouseDown)
}
const connectToNewUser = (userId, stream) => {
console.log("somebody joined", stream, userId)
export const addVideoStream = (videoContainer, username, stream, isYours) => {
const videos = document.querySelector("#videos")
const video = videoContainer.querySelector("video")
video.srcObject = stream
video.addEventListener("loadedmetadata", () => video.play())
if (isYours) {
video.muted = true
videoContainer.classList.add("your-video")
videos.append(videoContainer)
return dragElement(videoContainer)
}
videoContainer.querySelector(".name").innerText = username
videos.append(videoContainer)
}
export const connectToNewUser = (userId, username, stream) => {
const call = myPeer.call(userId, stream)
const video = document.createElement("video")
const video = template.content.firstElementChild.cloneNode(true)
call.on("stream", (userVideoStream) =>
addVideoStream(video, userVideoStream)
addVideoStream(video, username, 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"))
myPeer.on("open", (id) =>
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {
console.log("You connected")
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.emit("join-room", ROOM_ID, id)
})
)
socket.on("user-disconnected", (userId) => {
const call = myPeer.connections[userId]
if (call) call[0].close()
console.log("somebody left", userId)
})

35
public/scripts/video.js Normal file
View file

@ -0,0 +1,35 @@
import { addVideoStream, connectToNewUser } 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,
})
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)
)
socket.emit("join-room", ROOM_ID, id, yourName)
})
socket.on("user-disconnected", (userId) => {
const call = myPeer.connections[userId]
if (call) call[0].close()
})

135
public/style.css
View file

@ -1,6 +1,7 @@
:root {
--primary: #14bbaa;
--secondary: #2c3c4c;
--input-border: #858282;
}
*,
@ -23,18 +24,11 @@ body {
overflow: hidden;
}
nav {
background-color: var(--secondary);
color: white;
#go {
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
max-width: 100vw;
padding: 20px;
}
nav a {
font-size: 1.5em;
flex-direction: column;
justify-content: center;
}
a {
@ -44,12 +38,14 @@ a {
color: white;
grid-template-columns: 1fr 500px;
}
main {
background-color: var(--secondary);
}
#videos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
grid-template-rows: repeat(auto-fit, minmax(33%, 1fr));
background-color: var(--secondary);
color: white;
padding: 4px 0 4px 0;
gap: 2px;
@ -105,7 +101,7 @@ button {
color: #f5f0f0;
background-color: transparent;
font-size: 1em;
padding: 0.7rem 1.6rem;
padding: 10px 12px;
text-decoration: none;
}
@ -128,7 +124,7 @@ button:not(:disabled) {
cursor: pointer;
}
button:is(:disabled, :hover) {
:is(button, .button):is(:disabled, :hover) {
filter: brightness(0.9);
}
@ -136,11 +132,52 @@ video.your-video {
display: none;
}
#share {
#options {
position: absolute;
top: 10px;
color: white;
right: 10px;
display: flex;
}
.card {
background-color: #00000050;
color: white;
padding: 0 10px;
z-index: 2;
border-radius: 10px;
}
.jumbo {
margin: 20px auto;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 40px;
}
.jumbo p {
text-align: center;
}
hr {
width: 100%;
}
.video .name {
position: absolute;
bottom: 5px;
left: 10px;
display: flex;
padding: 10px;
}
.video.your-video .name {
display: none;
}
.video:not(.your-video) {
position: relative;
}
#popup {
@ -165,11 +202,6 @@ video.your-video {
display: none;
}
#popup hr {
width: 90%;
border-color: var(--secondary);
}
#close {
color: #b0b0b0;
position: absolute;
@ -182,7 +214,24 @@ video.your-video {
display: flex;
}
.medium-header {
display: flex;
font-size: 4rem;
font-weight: 250;
line-height: 1.2;
margin: 10px;
}
.large-header {
display: flex;
font-size: 5rem;
font-weight: 300;
line-height: 1.2;
margin: 10px;
}
.input-field {
border-left: 1px solid var(--input-border) !important;
flex: 1;
}
@ -197,10 +246,13 @@ video.your-video {
background-color: var(--secondary);
font: inherit;
font-weight: normal;
border-right: 1px solid var(--input-border) !important;
}
.input-field,
.input-item {
border-top: 1px solid var(--input-border) !important;
border-bottom: 1px solid var(--input-border) !important;
border: 1px solid #93806c40;
padding: 0.5em 0.75em;
}
@ -225,3 +277,44 @@ video.your-video {
color: #8f8d8d;
padding: 20px;
}
@media (max-width: 500px) {
#login input {
max-width: 60vw;
}
}
#login {
background-color: var(--primary);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
#login.done {
display: none;
}
#login:not(.done) + div,
#login:not(.done) + div + div {
display: none !important;
}
:is(textarea, input[type="text"]) {
border: none;
color: white;
background-color: transparent;
border-bottom: 0.05em solid white;
font-family: inherit;
font-size: 2rem;
max-width: 100%;
max-height: 90%;
}
:is(textarea, input[type="text"])::placeholder {
color: #dbcece;
}

30
server.js
View file

@ -1,23 +1,35 @@
const express = require("express")
import express from "express"
import http from "http"
import { Server } from "socket.io"
const app = express()
const server = require("http").Server(app)
const io = require("socket.io")(server)
const { v4: uuidV4 } = require("uuid")
const server = http.Server(app)
const io = new Server(server)
app.set("view engine", "ejs")
app.use(express.static("public"))
app.get("/", (_, res) => res.redirect(`/${uuidV4()}`))
app.get("/", (_, res) => res.render("index"))
app.get("/:room", (req, res) => res.render("room", { roomId: req.params.room }))
const users = {}
io.on("connection", (socket) =>
socket.on("join-room", (roomId, userId) => {
socket.on("join-room", (roomId, userId, userName) => {
users[userId] = userName
socket.join(roomId)
socket.to(roomId).broadcast.emit("user-connected", userId)
socket.to(roomId).emit("user-connected", userId, userName)
socket.on("disconnect", () => {
socket.to(roomId).broadcast.emit("user-disconnected", userId)
delete users[userId]
socket.to(roomId).emit("user-disconnected", userId)
})
socket.on("get-username", (userId, callback) => callback(users[userId]))
socket.on("name-change", (name) => {
users[userId] = name
socket.to(roomId).emit("name-changed", userId)
})
})
)

84
views/index.ejs Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<script src="/socket.io/socket.io.js" defer></script>
<script src="scripts/login.js" defer></script>
<script src="scripts/goToRoom.js" type="module" defer></script>
<title>Video Chat</title>
</head>
<body>
<div id="login" class="done">
<h1 class="large-header">Login</h1>
<div>
<input id="name-input" type="text" placeholder="Username" />
<button class="button-circle" id="name">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-pencil"
viewBox="0 0 16 16"
>
<path
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
/>
</svg>
</button>
</div>
</div>
<div id="options" class="card">
<div id="change-name">
<span id="name-display"></span>
<button class="button-circle">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-pencil"
viewBox="0 0 16 16"
>
<path
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
/>
</svg>
</button>
</div>
</div>
<main>
<div class="card jumbo">
<h1 class="medium-header">Hi there</h1>
<hr />
<p>
Please create a new room, or join an existing room using the
form below. If a room doesn't exist it will be created.<br />
If a room name is not specified a random one will be
selected
</p>
<div class="input-group full-border">
<input type="text" id="go-input" class="input-field" />
<a class="input-item button" id="go">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-search"
viewBox="0 0 16 16"
>
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
/>
</svg>
</a>
</div>
</div>
</main>
</body>
</html>

84
views/room.ejs
View file

@ -12,29 +12,72 @@
src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"
></script>
<script src="/socket.io/socket.io.js" defer></script>
<script src="script.js" defer></script>
<script src="scripts/login.js" defer></script>
<script src="scripts/share.js" defer></script>
<script src="scripts/video.js" type="module" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<title>Video Chat</title>
</head>
<body>
<div id="videos"></div>
<button id="share">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-share"
viewBox="0 0 16 16"
>
<path
d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
/>
</svg>
</button>
<div id="login" class="done">
<h1 class="large-header">Login</h1>
<div>
<input id="name-input" type="text" placeholder="Username" />
<button class="button-circle" id="name">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-pencil"
viewBox="0 0 16 16"
>
<path
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
/>
</svg>
</button>
</div>
</div>
<main><div id="videos"></div></main>
<div id="options" class="card">
<div id="change-name">
<span id="name-display"></span>
<button class="button-circle">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-pencil"
viewBox="0 0 16 16"
>
<path
d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
/>
</svg>
</button>
</div>
<button id="share">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-share"
viewBox="0 0 16 16"
>
<path
d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
/>
</svg>
</button>
</div>
<div id="popup" class="dismissed">
<h1 class="medium-header">Share</h1>
<hr />
<div class="input-group">
<input type="text" id="href" readonly class="input-field" />
<button class="input-item" id="copy">Copy</button>
@ -44,5 +87,12 @@
<button id="close">&#10005;</button>
</div>
<template id="video-template">
<div class="video">
<span class="name card"></span>
<video></video>
</div>
</template>
</body>
</html>