Credit to Web Dev Simplified
Want to join the BEST JavaScript Course on the planet and learn how to build the projects like Zoom Clone with JavaScript, NodeJS, and MongoDB?
Check out our Profit With JavaScript Course
๐
Credit to Web Dev Simplified
Check out our Profit With JavaScript Course
๐
Hi how does this work?
and what apps do l need ....
What are the commands to run for it to work/ run.
I got the project up. But in no way could I bind another person. It always shows this error :
peerjs.min.js:64 GET http://localhost:443/peerjs/peerjs/id?ts=15988980531990.30612093669879203 net::ERR_CONNECTION_REFUSED
Could anyone help? @Nazariy995 @CleverProgrammer @ykhedher
For me it did worked while I opened the same link in two tabs which means it works perfectly while attendees are in same network. But once I shared this to my friend who stays around 1km distance which is WAN I guess, we do get connected (I can see the black blank box for video ) but audio and video is not connected. Also, we can send text messages in real-time in the app but audio/video connection is not successful. I do get a black window when the new user enters but its completely black and I am sure that it's not an internet problem (audio / video both feature not working but text messaging working if both the parties belongs to different network). I tried to look for audio/video constraints in console and it shows empty which means the connection isn't successful, while for google meet session , google meet's audio and video constraints are visible. Please help me with this and thanks for your time.
Hi,
I'm getting the following errors on glitch server
socket.to(roomId).broadcast.emit('user-connected', userId);
^
TypeError: Cannot read property 'emit' of undefined
at Socket.socket.on (/app/server.js:29:32)
at Socket.emit (events.js:198:13)
at Socket.emitUntyped (/rbd/pnpm-volume/44505554-16f9-45c7-831e-72017cc1084c/node_modules/socket.io/dist/typed-events.js:69:22)
at process.nextTick (/rbd/pnpm-volume/44505554-16f9-45c7-831e-72017cc1084c/node_modules/socket.io/dist/socket.js:428:39)
at process._tickCallback (internal/process/next_tick.js:61:11)
Any idea?
Thanks
here is the crash
2020-12-25T19:06:54.884368+00:00 app[api]: Initial release by user [email protected] 2020-12-25T19:06:54.884368+00:00 app[api]: Release v1 created by user [email protected] 2020-12-25T19:06:55.191120+00:00 app[api]: Enable Logplex by user [email protected] 2020-12-25T19:06:55.191120+00:00 app[api]: Release v2 created by user [email protected] 2020-12-25T19:12:12.000000+00:00 app[api]: Build started by user [email protected] 2020-12-25T19:12:27.000000+00:00 app[api]: Build succeeded 2020-12-25T19:12:27.097939+00:00 app[api]: Release v3 created by user [email protected] 2020-12-25T19:12:27.097939+00:00 app[api]: Deploy e8338d30 by user [email protected] 2020-12-25T19:12:27.111763+00:00 app[api]: Scaled to web@1:Free by user [email protected] 2020-12-25T19:12:29.135780+00:00 heroku[web.1]: Starting process with command
npm start2020-12-25T19:12:32.547972+00:00 app[web.1]: 2020-12-25T19:12:32.547994+00:00 app[web.1]: > [email protected] start /app 2020-12-25T19:12:32.547995+00:00 app[web.1]: > node server.js 2020-12-25T19:12:32.547995+00:00 app[web.1]: 2020-12-25T19:12:32.848998+00:00 app[web.1]: /app/server.js:36 2020-12-25T19:12:32.849123+00:00 app[web.1]: server.listen(procss.env.PORT || 3030) 2020-12-25T19:12:32.849144+00:00 app[web.1]: ^ 2020-12-25T19:12:32.849145+00:00 app[web.1]: 2020-12-25T19:12:32.849145+00:00 app[web.1]: ReferenceError: procss is not defined 2020-12-25T19:12:32.849163+00:00 app[web.1]: at Object.<anonymous> (/app/server.js:36:15) 2020-12-25T19:12:32.849164+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:999:30) 2020-12-25T19:12:32.849198+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) 2020-12-25T19:12:32.849199+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:863:32) 2020-12-25T19:12:32.849199+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:708:14) 2020-12-25T19:12:32.849225+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) 2020-12-25T19:12:32.849226+00:00 app[web.1]: at internal/main/run_main_module.js:17:47 2020-12-25T19:12:32.849249+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2020-12-25T19:12:32.849250+00:00 app[web.1]: npm ERR! errno 1 2020-12-25T19:12:32.849250+00:00 app[web.1]: npm ERR! [email protected] start:
node server.js2020-12-25T19:12:32.849250+00:00 app[web.1]: npm ERR! Exit status 1 2020-12-25T19:12:32.849251+00:00 app[web.1]: npm ERR! 2020-12-25T19:12:32.849251+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script. 2020-12-25T19:12:32.849279+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2020-12-25T19:12:32.849280+00:00 app[web.1]: 2020-12-25T19:12:32.849281+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2020-12-25T19:12:32.849281+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-12-25T19_12_32_821Z-debug.log 2020-12-25T19:12:32.991026+00:00 heroku[web.1]: Process exited with status 1 2020-12-25T19:12:33.029163+00:00 heroku[web.1]: State changed from starting to crashed 2020-12-25T19:12:33.033216+00:00 heroku[web.1]: State changed from crashed to starting 2020-12-25T19:12:35.931346+00:00 heroku[web.1]: Starting process with command
npm start2020-12-25T19:12:39.123218+00:00 app[web.1]: 2020-12-25T19:12:39.123410+00:00 app[web.1]: > [email protected] start /app 2020-12-25T19:12:39.123411+00:00 app[web.1]: > node server.js 2020-12-25T19:12:39.123412+00:00 app[web.1]: 2020-12-25T19:12:39.583840+00:00 app[web.1]: /app/server.js:36 2020-12-25T19:12:39.583858+00:00 app[web.1]: server.listen(procss.env.PORT || 3030) 2020-12-25T19:12:39.583859+00:00 app[web.1]: ^ 2020-12-25T19:12:39.583859+00:00 app[web.1]: 2020-12-25T19:12:39.583860+00:00 app[web.1]: ReferenceError: procss is not defined 2020-12-25T19:12:39.583863+00:00 app[web.1]: at Object.<anonymous> (/app/server.js:36:15) 2020-12-25T19:12:39.583864+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:999:30) 2020-12-25T19:12:39.583865+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) 2020-12-25T19:12:39.583866+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:863:32) 2020-12-25T19:12:39.583866+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:708:14) 2020-12-25T19:12:39.583876+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) 2020-12-25T19:12:39.583876+00:00 app[web.1]: at internal/main/run_main_module.js:17:47 2020-12-25T19:12:39.615295+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2020-12-25T19:12:39.615666+00:00 app[web.1]: npm ERR! errno 1 2020-12-25T19:12:39.627615+00:00 app[web.1]: npm ERR! [email protected] start:
node server.js2020-12-25T19:12:39.627795+00:00 app[web.1]: npm ERR! Exit status 1 2020-12-25T19:12:39.627981+00:00 app[web.1]: npm ERR! 2020-12-25T19:12:39.628163+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script. 2020-12-25T19:12:39.628650+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2020-12-25T19:12:39.643356+00:00 app[web.1]: 2020-12-25T19:12:39.643828+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2020-12-25T19:12:39.644154+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2020-12-25T19_12_39_633Z-debug.log 2020-12-25T19:12:39.720801+00:00 heroku[web.1]: Process exited with status 1 2020-12-25T19:12:39.784385+00:00 heroku[web.1]: State changed from starting to crashed 2020-12-25T19:15:32.427473+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=murmuring-ravine-11967.herokuapp.com request_id=b436b580-ecdb-493e-8a9a-be87c3ea8c55 fwd="27.57.242.131" dyno= connect= service= status=503 bytes= protocol=https 2020-12-25T19:15:34.481457+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=murmuring-ravine-11967.herokuapp.com request_id=0b160e8c-249c-4f46-b735-925bbc2fdb7a fwd="27.57.242.131" dyno= connect= service= status=503 bytes= protocol=https
I followed each and every step yet this occured please help
In the same room only 5 participants are able to join
How can i increase the count of the participants joined.
Thanks in advance!!!!!!
when i run this program using my ip adreess instead of localhost it doesnot working
Thanks in advance!!
When user left from call his video grid is still showing there ( freeze )
I used this code but not working
peer.on('close', () =>{
video.remove()
})
If more than 4 users joins at the same room the videos are not stable. User videos are getting continuously refreshed and sometimes users are not able to see each other in same room. Is the issue related to peer servers or any load on application?
i got this error anybody please help
In this how can i acheive that host only wants to see all the participants videos and the users don't want to see the others video and also the host video.
please any one help
Thanks in advanceee!!!
In localhost when the new user connects it connects perfectly. But when i host in server the video of the new users gets duplicated. How can i resolve this issue.
Thanks in advance!!!!!!!
index.js:83 WebSocket connection to 'ws://localhost:3030/socket.io/?EIO=3&transport=websocket&sid=gOQKcg43CIzgEjI6AAAE' failed: Invalid frame header
the users are able to connect as the chat box is active but they can neither see each other or hear them.
can you please let me knew how can i add a screen sharing option to it
I am using my Phone as webCam and using Iriun Webcam but I am getting this error can you help me inthis
I install all of the dependencies using npm install. After I have deployed it i get the error: WebSocket connection to 'wss://murmuring-caverns-58328.herokuapp.com/socket.io/?EIO=3&transport=websocket&sid=HT_O7cRoYMTw9BztAAAJ' failed: Invalid frame header. I have socket io installed. Does anybody know why I get Invalid Frame Header error. You can find the app here https://murmuring-caverns-58328.herokuapp.com/.
PS C:\Users\Ryan samaeian\Desktop\Lettters\nodejs-zoom-clone-master\nodejs-zoom-clone-master> nodemon server.js
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
events.js:292
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE: address already in use :::3030
at Server.setupListenHandle [as _listen2] (net.js:1313:16)
at listenInCluster (net.js:1361:12)
at Server.listen (net.js:1447:7)
at Object.<anonymous> (C:\Users\Ryan samaeian\Desktop\Lettters\nodejs-zoom-clone-master\nodejs-zoom-clone-master\server.js:42:8)
at Module._compile (internal/modules/cjs/loader.js:1200:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
at Module.load (internal/modules/cjs/loader.js:1049:32)
at Function.Module._load (internal/modules/cjs/loader.js:937:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
Emitted 'error' event at:
at WebSocketServer.<anonymous> (C:\Users\Ryan samaeian\Desktop\Lettters\nodejs-zoom-clone-master\nodejs-zoom-clone-master\node_modules\peer\dist\src\instance.js:53:13)
at WebSocketServer.emit (events.js:315:20)
at WebSocketServer._onSocketError (C:\Users\Ryan samaeian\Desktop\Lettters\nodejs-zoom-clone-master\nodejs-zoom-clone-master\node_modules\peer\dist\src\services\webSocketServer\index.js:49:14)
at WebSocketServer.<anonymous> (C:\Users\Ryan samaeian\Desktop\Lettters\nodejs-zoom-clone-master\nodejs-zoom-clone-master\node_modules\peer\dist\src\services\webSocketServer\index.js:22:55)
at WebSocketServer.emit (events.js:315:20)
at Server.emit (events.js:315:20)
at emitErrorNT (net.js:1340:8)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
code: 'EADDRINUSE',
errno: -4091,
syscall: 'listen',
address: '::',
port: 3030
}
[nodemon] app crashed - waiting for file changes before starting...
So l get this can someone please help me!!!
Hi, I tried running this on my server <video.example.com> and created an nginx reverse proxy.
However, I am getting this error in the console.
Firefox can't establish a connection to the server at wss://video.example.com/socket.io/?EIO=3&transport=websocket&sid=CqM_U7hMStz1Qw3gAAAA.
Firefox can't establish a connection to the server at wss://video.example.com/peerjs/peerjs?key=peerjs&id=8c4cc4ef-5843-4407-98f6-ebc75ff699b9&token=qmq9ep06q9j.
The nginx config looks like this:
server {
server_name video.example.com;
location / {
proxy_pass http://localhost:3030;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Any idea how this can be fixed?
The project runs completely well. My only issue is trying to do screenshare using peer js . I tried changing the media stream of the webcam video stream to my screen share video stream. But then the video just freezes in the peer connected to my room. It would be of great help if someone could manage to do swap the video mediaStream while our video stream is being transmitted to all the peers connected to us. Thanks again.
What do I need to do in order to run it locally on my machine? Also, what is needed for me to be able to connect to it using another device? I tried running the server and typing my IP address:3030, but there was still just one video frame on the screen.
I'd be grateful if someone could help me.
i am following their tutorial at this point https://youtu.be/ZVznzY7EjuY?t=6023
Before that, everything worked perfectly, but i can not answer the call when new user join room and their is no new video tag appended in the video grid.
This is my 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.roomId })
})
io.on('connection', socket => {
socket.on('join-room', (roomId, userId) => {
socket.join(roomId)
socket.to(roomId).broadcast.emit('user-connected', userId)
})
})
server.listen(3030)
this is my script.js
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myVideo = document.createElement('video')
myVideo.muted = true
var peer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '3030'
})
let myVideoStream
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true
})
.then(stream => {
myVideoStream = stream
addVideoStream(myVideo, stream)
socket.on('user-connected', userId => {
connectToNewUser(userId, stream)
})
peer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})
})
peer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})
function connectToNewUser (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)
}
as i tried to console.log(userMediaStream)
it returned nothing in this code block
peer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})
i dont know how to deal with it, please tell me why, thank you so much ๐
i am trying to add screen share in present code .. but it shows on my screen clearly but unable to see on other user screen
code :-
navigator.mediaDevices.getDisplayMedia({
video: true,
audio:true
}).then(stream => {
const video1 = document.createElement('video');
video1.controls = true;
addVideoStream(video1,stream)
socket.on('user-connected', userId =>{
const call = peer.call(userId, stream)
stream.getVideoTracks()[0].addEventListener('ended', () => {
video1.remove()
});
call.on('close', () => {
})
})
stream.getVideoTracks()[0].addEventListener('ended', () => {
video1.remove()
});
});
}catch(err) {
console.log("Error: " + err);
}
Can any one tell this
upto 2 users it works awsome . but as the third user comes in issues begin
I prepare one portal. In that i want to monitoring the screen of others using nodejs or webrtc.
Thanks in advance !!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.