Giter VIP home page Giter VIP logo

nodejs-zoom-clone's Introduction

Node JS Zoom Clone

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 ๐Ÿ‘‡

Click Here

Made with โค๏ธ by Naz & Youssef

nodejs-zoom-clone's People

Contributors

nazariy995 avatar ykhedher avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nodejs-zoom-clone's Issues

Not working when the attendee belongs to different network.

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.

TypeError: Cannot read property 'emit' of undefined

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

HEROKU APP CRASH PLEASE HELP!!!

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 commandnpm 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

Remove Video Grid When User left

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()
})

Video Stability Issue when multiple user joins

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?

Only host want to see all participants video

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!!!

duplication of joining new user-Reg

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!!!!!!!

Cannot see new user video

the users are able to connect as the chat box is active but they can neither see each other or hear them.

Invalid Frame Header

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/.

APP CRASH PLEASE HELP!!

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!!!

Fails to connect to websockets

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?

Peer js screenshare ?

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.

How can I run it on a local server?

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.

Can not answer the call when new user join room

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 ๐Ÿ‘

Screen share code

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);
       }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.