mirror of
https://github.com/DerTyp7/nodejs-webrtc.git
synced 2025-10-29 12:32:14 +01:00
first commit
This commit is contained in:
Janis
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/node_modules
|
||||
2455
package-lock.json
generated
Normal file
2455
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal 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
65
public/script.js
Normal 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
32
server.js
Normal 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
32
views/room.ejs
Normal 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>
|
||||
Reference in New Issue
Block a user