domenico/chemmazz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First working p2p videochat.

Browse Source 
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:
Domenico Testa
2020-12-29 14:42:38 +01:00
commit 132fb3a3c1
6 changed files with 1703 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored Normal file
View File

@@ -0,0 +1,8 @@
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*
node_modules
bower_components

21
games-party/package.json Normal file
View 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
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff