janis/nodejs-webrtc
1
0
Fork 0
mirror of https://github.com/DerTyp7/nodejs-webrtc.git synced 2025-10-29 12:32:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Janis
2022-07-24 19:08:50 +02:00
commit a538322696
6 changed files with 2606 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/node_modules

2455
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "nodejs-webrtc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devStart": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.1",
"socket.io": "^2.3.0",
"uuid": "^8.1.0"
},
"devDependencies": {
"nodemon": "^2.0.19"
}
}

65
public/script.js Normal file
View File

@@ -0,0 +1,65 @@
const socket = io("/");
const videoGrid = document.getElementById("video-grid");
const myPeer = new Peer(undefined, {
host: "/",
port: "3001",
});
const myVideo = document.createElement("video");
myVideo.muted = true;
const peers = {};
navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(
(stream) => {
addVideoStream(myVideo, stream);
myPeer.on("call", (call) => {
call.answer(stream);
const video = document.createElement("video");
call.on("stream", (userVideoStream) => {
addVideoStream(video, userVideoStream);
});
});
socket.on("user-connected", (userId) => {
connectToNewUser(userId, stream);
});
},
(err) => console.error(err)
);
myPeer.on("open", (id) => {
socket.emit("join-room", ROOM_ID, id);
});
socket.emit("join-room", ROOM_ID, 10);
socket.on("user-connected", (userId) => {
console.log(`User ${userId} connected`);
});
socket.on("user-disconnected", (userId) => {
if (peers[userId]) {
console.log(`User ${userId} disconnected`);
peers[userId].close();
delete peers[userId];
}
});
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream);
const video = document.createElement("video");
call.on("stream", (userVideoStream) => {
addVideoStream(video, userVideoStream);
});
call.on("close", () => {
video.remove();
});
peers[userId] = call;
}
function addVideoStream(video, stream) {
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
});
videoGrid.append(video);
}

32
server.js Normal file
View File

@@ -0,0 +1,32 @@
//* https://www.youtube.com/watch?v=DvlyzDZDEq4
const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = require("socket.io")(server);
const { v4: uuidV4 } = require("uuid");
const port = process.env.PORT || 3000;
app.set("view engine", "ejs");
app.use(express.static("public"));
app.get("/", (req, res) => {
res.redirect(`/${uuidV4()}`);
});
app.get("/:room", (req, res) => {
res.render("room", { roomId: req.params.room });
});
io.on("connection", (socket) => {
socket.on("join-room", (roomId, userId) => {
console.log(`User ${userId} connected to room ${roomId}`);
socket.join(roomId);
socket.to(roomId).broadcast.emit("user-connected", userId);
socket.on("disconnect", () => {
socket.to(roomId).broadcast.emit("user-disconnected", userId);
});
});
});
server.listen(port);

32
views/room.ejs Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/peerjs@1.4.5/dist/peerjs.min.js"></script>
<script>
const ROOM_ID = "<%= roomId %>";
</script>
<script src="/socket.io/socket.io.js"></script>
<script defer src="script.js"></script>
<style>
#video-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div id="video-grid"></div>
</body>
</html>