I am new to use Peerjs. While I am using my customer Peerjs server (w/ or w/o ssl) the on stream event is not triggering in non-debug mode. But when I put a debugger in dev mode in browser to see the problem, no problem observed and the event triggered.
Please find the code snippet below for your reference and kindly help me on the same.
app.js
const express = require('express');
const app = express();
const fs = require("fs");
const https = require("https");
const opts = {
key: fs.readFileSync('./certificates/key.pem', 'utf-8'),
cert : fs.readFileSync('./certificates/cert.pem', 'utf-8'),
}
const httpsServer = https.createServer(opts, app);
const io = require("socket.io")(httpsServer);
app.set("view engine", "ejs");
app.use(express.static("public"));
app.get("/" , (req,res)=>{
res.redirect("1")
});
app.get("/:room" , (req,res)=>{
res.render("index", {roomID: req.params.room})
});
io.on('connection' , (socket)=>{
socket.on('join-room' , (roomID, userID) => {
socket.join(roomID);
socket.broadcast.emit("user-connected" , userID);
socket.on("disconnect", () => {
socket.broadcast.emit("user-disconnected" , userID);
})
});
});
httpsServer.listen(5000 , ()=>{
console.log("Server running on port 5000");
})
peer-server.js
const { PeerServer } = require('peer');
const fs = require("fs");
const opts = {
key: fs.readFileSync('./certificates/key.pem', 'utf-8'),
cert : fs.readFileSync('./certificates/cert.pem', 'utf-8'),
}
const peerServer = PeerServer({
debug: true,
key: 'peerjs',
port: 5001,
path: '/myapp',
ssl: opts
});
peerServer.listen(() => {
console.log("Peer Server is listening on port 5001");
})
package.json
"name": "videocallingapp",
"version": "1.0.0",
"description": "Video Calling App",
"main": "app.js",
"scripts": {
"vcserver": "nodemon app.js",
"peerserver": "nodemon peer-server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.1",
"nodemon": "^2.0.7",
"peer": "^0.6.1",
"socket.io": "^4.0.1",
"uuid": "^8.3.2"
}
}
client-script.js
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
secure: true,
host: 'localhost',
port: '5001',
path: '/myapp'
})
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
$(document).ready(function() {
debugger;
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).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 => {
console.log("User Connected " + userId)
connectToNewUser(userId, stream)
})
})
socket.on('user-disconnected', userId => {
if (peers[userId]) peers[userId].close()
})
myPeer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})
function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', function (userVideoStream) {
console.log("Called");
addVideoStream(video, userVideoStream)
})
call.on('close', function () {
console.log("Closed");
video.remove()
})
peers[userId] = call
}
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
})
index.ejs
<!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">
<script>
const ROOM_ID = "<%= roomID %>"
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="index.js" defer></script>
<title>Zoom Clone Video Chat</title>
<style>
#video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 300px);
grid-auto-rows: 300px;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id="video-grid"></div>
</body>
</html>
Project Structure:
videocallapp
certificates
cert.pem
key.pem
node_modules
public
client-script.js
views
index.ejs
app.js
package.json
package-lock.json
peer-server.js