webdevsimplified / zoom-clone-with-webrtc Goto Github PK

The following are the issues with my video grid in this app:

1. I am failing to see any video in chrome and opera mini, i am only seeing video feed when i run the app in safari and even then, the feed is frozen.

2. I am also getting a message in the console which reads DevTools: failed to load SourceMap: Could not load content for https://unpkg.com/peerjs.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE.

Any idea on how to solve these issues? Your assistance would be greatly appreciated.

In my system the video is getting appended only when I open the link in another tab within 3-5 seconds, else it is not being added.
And this is not working for firefox or different browsers

Hi i hosted in aws server with STUN and TURN server its working fine on Chrome broser on windows but if we switch browser from different side its show blacksceen and not streaming.

Hello,

I tried to run the project but the remote video stream doesn't display. Only local video is displaying. I saw on the youtube video that lots of people had the same issue. Any idea where it can come from?

It seems that the call doesn't get through and the myPeer.on('call') event lsitener is not firing.

I'm facing an issue where I can't hear anyone

how to record screen while video call ?

Hi 👋🏻

I came across this project and I don't really know how to use, it will be great if you included a README file

Cheers!

I've followed the tutorial exactly and am able to see my video with one browser window open. However, for some reason my node server crashes when I open up another browser window with the same localhost address as the original browser to simulate multiple users being in one room together.

Has anyone gotten these same errors and found a way to resolve them?

At the 'broadcast' line of code added in the video at T=14.12 - as far as I can tell something about the socket object being overwritten.

Testing at T=14.36 crashes the app. Please help

Bro please add a option to share my screen instead of my cam

It doesn't work if another user connects to(same) room from another's browser's window.
In yt tutorial it's showed in same browser, but another of it's separated tabs.

connecting via ip address over the same network does not ask for user media permissions, because of which I am not able to connect it via mobile browser, or any other browser.

Local connection with localhost:3000 works just fine.
But connection over IP address is not asking for UserMedia permissions

The app is well and good but it doesnt have a ui. This makes the app less appealing to the audience. Being a react developer I can build a beautiful ui to make it more nice.Kindly reply If you want this feature.

So this is not an issue. I'm new on GitHub so I don't know how to ask a question in another way.
So I followed your tutorial on YouTube. The Zoom-Clone was working without any problem. But how can my friends join to the chat?

I solved it

I just download the repo, installed the dependencies and serve. I see that my phone gets connected to the peer server and got an id but there is nothing displaying.

I am getting this error in brave browser and microsoft edge browser error is DOMException: Could not start video source and in firefox browser error is Failed to allocate video source. please help

Have the program started And peerJS started on port 3001.
I go to http://localhost:3000. I see my webcam. Then open a second tab and go the the same site with the same id. Nothing happens. The Webcam is shown on both tabs. But just my own. Not the other tabs webcam. The streams are not sending. What could be wrong?

Whenever we close the tab of the user who joined first..The screen of that user is not removed from the latter joined user's screen

Hey Web-Dev-Simplified!
You did great work by making a video on making a zoom clone and doing very great work by making its source code public on Github.
I really really appreciate you but my dear brother,
I'm facing an error while opening this project(zoom clone) in Google Chrome. :
Uncaught (in promise) DOMException: Could not start video source

In your video, you were also running this in chrome but I don't know why this isn't working in my Google Chrome,

I need your help to resolve this issue...
I hope you'll help me because you are a good man who is doing lots of great work for web developers
Thank you!

When you have 2 or more users and one user leaves, then no other user is able to join the room (or at least there is no more video added).

I cloned the repository and installed the packages . after that i initialised a peer server and then used " nodemon server.js " but it is stuck . I Dig into deeper and i think its the problem of server variable

can I use it on PHP server?
if yes can u please show me how? thank you

Bug: Broadcasting of "user-connected" event is done only for previous nodes. If a connection is made in future, it won't have any record of previous users. So if I close one of my previous connection, the stream of that user on connections that have been made after that connection will be freeze and user needs to refresh the browser to clear it.

socket.on("user-disconnected", (userId) => {
  if (peers[userId]) {
    console.log(userId, " closed");
    peers[userId].close();
  }
});

peers[userId] will show undefined behaviour since peers don't have record of previous connections.

Here is the link---->https://baby-kill.herokuapp.com/. Please let me know.

Everything works fine on chrome

Mozilla creates the connection successfully.

the issue starts when you try to connect a new user. I don't know how or why,
but the render is not reaching this console provided on the image.

1. Could you tell me, the nature of this behavior

2. Could you tell me more about how the tutorial started? when you were using your phone. I can't seem to connect my mobile phone to the localhost:3000, can you help?

Can anyone kindly help on how to deploy this on IIS ?

when the user leaves the room the video gets stuck and doesn't clear out after some time.

When the user clicks on an event fetched from the DB (using a Spring Boot backend), if it is the first one, it becomes host. If not, then it becomes a simple user. When a user enters the room, the host have to refresh the page(like to reconnect to the room) and so does the user, in order to be both connected. Why is so? You can find my code in the thread that I posted on the stack overflow and no-one answered until now. Can I have a bit of help here, please? (the backend runs on port 8080)

https://stackoverflow.com/questions/66483474/why-do-i-have-to-refresh-the-page-in-order-to-connect-to-the-peer-system

show this error on the same room in different browser

Can someone clarify why I get this error on a remote server?

socket.io.js:4304 WebSocket connection to 'wss://testserver.dev/socket.io/?EIO=4&transport=websocket&sid=dwA8loUIYHYCG7DTAAAA' failed: Error during WebSocket handshake: Unexpected response code: 400

The code is on Plesk server with some minor changes deployed.

such as:
server.js

const express = require('express'); const app = express(); const server = require('http').Server(app); const io = require('socket.io')(server, { pingInterval: 30000, pingTimeout: 20000, secure: true, cookie: 'smfio' });

script.js

let socket = io({ reconnection: false, 'forceNew': true });

I can see myself though. The other users which are to the same room connected see also only themself, but I can see in console that they are connected. What is the cause of this?

socket.on('user-connected', userId => { loggedUserCount++ console.log('connected: ' + userId) })

How to deploy this app on Heroku or other cloud based deployement service.

Anyone knows how to configure this app so that I can access it though my mobile within the same network?

I get this error in the console when I go to my localhost app, and it is blocking me from being able to view other people's videos. The only thing I did different from the tutorial was install peerJS without the -g, since I am unable to install anything globally on my computer.

Hi, when I do localhost:3000 i can see my own camera. But when i open a new tab or go on new device and do publicip:3000, I cant see any camera. And on localhost no new camera pops up.
When I click on inspect in chrome with link localhost:3000 I see these errors:
Failed to load resource: net::ERR_CONNECTION_REFUSED :3001/peerjs/id?ts=16144187843870.6479763634269047:1

and on second tab with public ip i get these errors:
Uncaught TypeError: Cannot read property 'getUserMedia' of undefined
at script.js:10
Failed to load resource: net::ERR_CONNECTION_REFUSED :3001/peerjs/id?ts=16144187843870.6479763634269047:1

Anyone getting this error? I'm stuck I don't know what to do

Is this not possible for Mobile Users?

Hi I have installed this JS script on my website at slingyo.com.
However, it is not working at all, Node JS has been installed at server by tech support.
I am very beginner and struggling for make this JS program to up & running at my cloud web address slingyo.com
Please help me out

I have download your code but it's only showing one video

I also face this issue and I am on arch linux.
i followed every step while creating my own clone on my localhost and even tried by cloning this repository.
The issue is when opening the same link on two different firefox windows they both ask for camera and mic permissions that's fine but after that they both don't get connected to each other I mean they can't see each other.

Originally posted by @rishitpandey in #1 (comment)

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

Uncaught TypeError: Cannot read property 'getUserMedia' of undefined at script.js:11

This is the error I am facing now

I run the code locally, use chrome to vist http://localhost:3000/ , and it redirect to the room address 'http://localhost:3000/fe3b88cb-8749-44a4-ab6e-aed79bd23fe4' .
then I open another tab in incognito mode with the same room address, but I can only see one video element in each tab .

F12, open my devtool , and add breakpoint on this line (in both two tab) ,refresh one of the page.

  socket.on('user-connected', userId => {
   connectToNewUser(userId, stream) //add breakpoint 
  })

the program stop at this line ,I resume. then there are two video element, it works!

I was thinking there migth be a race problem. the connectToNewUser get executed before the myPeer.on('call') , so I add a setTimeout method.

  socket.on('user-connected', userId => {
    setTimeout(connectToNewUser,1000,userId,stream)
  })

function connectToNewUser(userId, stream) {
  //send my own stream to other user
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  //receive remotestream from someone else 
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })

  peers[userId] = call
}

and this time , without adding the breakpoint , there are two video elements in each tab.

does anyone have any ideas about what's happening here or is there a better solution in this case?
cause it seems setTimeout it's a bad practice .

How to access this app from other devices/outside? I already have trouble if I try to access it with the ip adress of my computer instead of localhost. It throws the error: Uncaught TypeError: Cannot read property 'getUserMedia' of undefined at script.js:11.
I guess thats due to the fact, that it is not running with https, but how to fix this?