First working p2p videochat.
I've integrated a simple react express backend with a Peerjs server. It can be published under a simple "ngrok.io" tunnel for testing on internet.
This commit is contained in:
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
.DS_*
|
||||
*.log
|
||||
logs
|
||||
**/*.backup.*
|
||||
**/*.back.*
|
||||
|
||||
node_modules
|
||||
bower_components
|
||||
21
games-party/package.json
Normal file
21
games-party/package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "games-party",
|
||||
"version": "1.0.0",
|
||||
"description": "A WebRTC playroom",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"devel": "nodemon server.js"
|
||||
},
|
||||
"author": "Domenico Testa",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ejs": "^3.1.5",
|
||||
"express": "^4.17.1",
|
||||
"peer": "^0.6.1",
|
||||
"socket.io": "^3.0.4",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^2.0.6"
|
||||
}
|
||||
}
|
||||
74
games-party/public/app.js
Normal file
74
games-party/public/app.js
Normal file
@@ -0,0 +1,74 @@
|
||||
const socket = io('/')
|
||||
const videoGrid = document.getElementById('video-grid')
|
||||
const myPeer = new Peer(undefined, {
|
||||
host: location.hostname,
|
||||
path: '/peerjs/domingo'
|
||||
})
|
||||
|
||||
|
||||
const myVideo = document.createElement('video')
|
||||
myVideo.muted = true
|
||||
myVideo.setAttribute("playsinline", true);
|
||||
|
||||
const peers = {}
|
||||
|
||||
var facingMode = "user";
|
||||
|
||||
navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
facingMode: facingMode
|
||||
},
|
||||
audio: true // TODO: set to true
|
||||
}).then(stream => {
|
||||
addVideoStream(myVideo, stream)
|
||||
|
||||
myPeer.on('call', call => {
|
||||
call.answer(stream)
|
||||
|
||||
const video = document.createElement('video')
|
||||
video.setAttribute("playsinline", true);
|
||||
call.on('stream', userVideoStream => {
|
||||
addVideoStream(video, userVideoStream)
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('user-connected', userId => {
|
||||
connectToNewUser(userId, stream)
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('user-disconnected', userId => {
|
||||
console.log("User disconnected: ", userId)
|
||||
if (peers[userId]) peers[userId].close()
|
||||
})
|
||||
|
||||
myPeer.on('open', id => {
|
||||
socket.emit('join-room', ROOM_ID, id)
|
||||
})
|
||||
|
||||
socket.on('user-connected', userId => {
|
||||
console.log('User connected: ', userId)
|
||||
})
|
||||
|
||||
function addVideoStream(video, stream) {
|
||||
video.srcObject = stream
|
||||
video.addEventListener('loadedmetadata', () => {
|
||||
video.play()
|
||||
})
|
||||
videoGrid.append(video)
|
||||
}
|
||||
|
||||
function connectToNewUser(userId, stream) {
|
||||
const call = myPeer.call(userId, stream)
|
||||
const video = document.createElement('video')
|
||||
video.setAttribute("playsinline", true);
|
||||
call.on('stream', userVideoStream => {
|
||||
addVideoStream(video, userVideoStream)
|
||||
})
|
||||
|
||||
call.on('close', () => {
|
||||
video.remove()
|
||||
})
|
||||
|
||||
peers[userId] = call
|
||||
}
|
||||
41
games-party/server.js
Normal file
41
games-party/server.js
Normal file
@@ -0,0 +1,41 @@
|
||||
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 { ExpressPeerServer } = require('peer');
|
||||
|
||||
app.enable('trust proxy');
|
||||
app.set('view engine', 'ejs')
|
||||
app.use(express.static('public'))
|
||||
|
||||
app.get('/', (request, response) => {
|
||||
// create a room
|
||||
// redirect to a room
|
||||
response.redirect(`/r/${uuidV4()}`)
|
||||
})
|
||||
|
||||
app.get('/r/:room', (request, response) => {
|
||||
response.render('room', { roomId: request.params.room })
|
||||
})
|
||||
|
||||
io.on('connection', socket => {
|
||||
socket.on('join-room', (roomId, userId) => {
|
||||
socket.join(roomId)
|
||||
socket.to(roomId).broadcast.emit('user-connected', userId)
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
socket.to(roomId).broadcast.emit('user-disconnected', userId)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Connection broker
|
||||
const peerServer = ExpressPeerServer(server, {
|
||||
debug: true,
|
||||
path: '/domingo'
|
||||
})
|
||||
|
||||
app.use('/peerjs', peerServer)
|
||||
|
||||
server.listen(3000, '0.0.0.0')
|
||||
33
games-party/views/room.ejs
Normal file
33
games-party/views/room.ejs
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script>
|
||||
const ROOM_ID = "<%= roomId %>"
|
||||
</script>
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js" defer></script>
|
||||
<script src="/app.js" defer></script>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<style>
|
||||
#video-grid {
|
||||
display: grip;
|
||||
grid-template-rows: repeat(auto-fill, 300px);
|
||||
grid-auto-rows: 300px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="video-grid"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1526
games-party/yarn.lock
Normal file
1526
games-party/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user