I am working on a video calling app and so when I am trying to stream my own video, I am getting the following error : socket.io.js:3956 GET http://localhost:3030/socket.io/?EIO=4&transport=polling&t=NfTGefc net::ERR_CONNECTION_REFUSED
I am also getting the warning : DevTools failed to load source map: Could not load content for http://localhost:3030/socket.io/socket.io.js.map: Connection error: net::ERR_CONNECTION_REFUSED
My camera is working fine but still unable to stream the video. I tried various ways to fix this but haven't been able to fix this. I am attaching the codes of the server file and other files
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');
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)=> {
console.log("joined room");
socket.join(roomId);
socket.on(roomId).broadcast.emit('user-connected');
})
})
app.set('view engine', 'ejs');
server.listen(3030);
script.js :
const socket = io('/');
const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement('video');
myVideo.muted = true;
let myVideoStream;
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream);
})
socket.emit('join-room', ROOM_ID);
socket.on('user-connected', ()=>{
connecToNewUser();
})
const connecToNewUser = () => {
console.log('new user');
}
const addVideoStream = (video, stream) => {
video.srcObject = stream;
video.addEventListener('loadmetadata', ()=> {
video.srcObject = stream;
video.addEventListener('loadmetadata', () => {
video.play();
})
})
videoGrid.append(video);
}
room.ejs :
<!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">
<link rel="stylesheet" href="style.css">
<script src="/socket.io/socket.io.js" ></script>
<title>MS_Teams_Clone</title>
<script>
const ROOM_ID = ("<%= roomId %>");
</script>
</head>
<body>
<div id="video-grid">
</div>
<script src="script.js"></script>
</body>
</html>
I would be truly grateful if someone could help me fix this. Thankyou