I want to create a video chat app. But My app is not showing others participate video. Please help. When others participate joined. It doesn't show his video on my window. Here is my code. Thanks in advance.
Here is the code for the server. Server.js -
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');
const peerServer = ExpressPeerServer(server,{
debug: true
})
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use('/peerjs', peerServer)
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)=>{
socket.join(roomId);
socket.to(roomId).broadcast.emit('user-connected', userId);
})
})
server.listen(process.env.PORT || 3030);
It is the main script. Script.js-
const socket = io('/')
const videoGrid = document.getElementById('video_grid')
let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true;
var peer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '3030'
});
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)
peer.on('call', call=>{
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream=>{
addVideoStream(video, userVideoStream)
})
})
socket.on('user-connected', userId =>{
connecToNewUSer(userId, stream);
alert('Somebody connect', userId)
})
}
)
peer.on('open', id =>{
socket.emit('join-room', ROOM_ID, id) ;
})
const connecToNewUSer = (userId, stream) => {
const call = peer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream =>{
addVideoStream(video, userVideoStream)
})
}
function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
}
It is the ejs file. room.ejs -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZOOM</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script>
const ROOM_ID = "<%= roomId %>"
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="video_grid">
</div>
<script src="script.js"></script>
</body>
</html>
You need
STUNandTURNserver. These two servers help connect/find users behind the NAT.Here's some basic:
You can setup your own
STUN/TURNserver usingcoturn, it's free and easy installation.I believe that google provide FREE
STUNserver, but I find noone provide freeTURNserver.