To create a video chatting and screen sharing application requires three major setup
Basic React setup for handling UI.
Needs Backend (...
For further actions, you may consider blocking this person and/or reporting abuse
The Connection class is defined in connection.js, but it is not used in connection.js and it is not exported from connection.js. What part of the code uses it?
The Connection class is an ES6 class, but all its methods are assigned as instance fields. This is surprising when using a class because you would normally expect a class to have prototype methods. What I mean is I would normally expect to see this:
And instead you have this:
Explaining why you are doing it this way would help the reader :)
Putting a language tag on your code fences would make it much easier to read!
(I couldn't figure out how to escape code fences here on dev.to, so I used single quotes place of backticks.)
connection class is used in step-7, by calling createSocketConnectionInstance() - also this just rough code with all functionalities to create video and screen sharing application
The code as written says this:
Should that be
new Connection(settings)instead?yes
new SocketConnection(settings) is used in the code instead of new Connection(settings) in createSocketConnectionInstance()
Would be great if you could share your working demo on GitHub
This is great one.
I am facing an issue while handling peerjs in cpanel based vps.
It gives me handshake failed with additionally wss://site url. Com××××× like that.
Do you have any solution for this situation?
are you running the peerjs server with sslkey and sslcert as args?
hi thank you for the prompt reply, Sorry i didnt know, how to do that, give me a guidance to do it inside cpanel, to peerjs.
Excellent article, thank you for this.
I have a question if you know (or anybody else), why we need WebSocket? I understand that webRtc doesn't use SIP (signaling protocol), and we need the WebSocket for the connection. But I saw this
RTCPeerConnection()in the webRtc API, and I don't fully understand what it means? Can't we accomplice connection withRTCPeerConnection()?Everyone is making tutorials about p2p which exposes IP to everyone. I want a tutorial for a different topology (one discord uses)
Good job though!
You can look into APIs that Twilio / Frozen Mountain / Pexip provides for Network topologies other than P2P. Twilio & FM supports SFU and MCU for handling larger attendees.
Not sure what you mean by IP exposing...
Still a shame there is no full tutorial for beginners. peer to peer exposes everyone's IP address to each other. I will take a look thanks.
I came across this post while searching for a way to handle an issue. I implemented a video chat for my web app using peerjs. But I've ran into a bit of an aggravating issue - if a peer connects WITHOUT video. In other words, they do not have a camera, there are two tracks created for video and audio, but the video track is null. If that person wants to share their screen, simply replacing the null track with the new video track does not work.
I am trying to figure out a solution without having to re-establish the connection between all peers.
Has anyone else ran into this? I see a lot of these examples of video chat apps, but they all assume all peers have a camera. Well, as we all know, that's never the case in real life situations.
Check out the "replaceStream" function, it might give you some idea
This is awxm...
If anyone could post working demo... That would be great👍
vichat.netlify.app/
check this working demo
That's working... Little bit of ui design and that is good to go.. Great work. I'll probably build it when I'm free...good work. ✌
Screen sharing is not implemented
Hey i have just cloned you both repo's, but i am getting peer id error.
My peer is running on port 5002.
Can you please help me sort out this.
this is your deployed request: wss://vichat-peerjs.herokuapp.com/peerjs?key=peerjs&id=a6bb940c-bf96-4251-a8a3-55b358f91a69&token=1ga5gbsgsn7
but in my case it is different even if peer is running
undefined/peerjs/id?ts=16191558869..., this is what i am receiving
Try to use endpoint directly when initializing the peers connection
here is the error screenshot.
Try to use the endpoint directly when initializing peer connection
Awesome content, thanks for posting! I thought this post about writing an easy automated test for a WebRTC application would be a nice add to it: dev.to/loadero/how-to-set-up-an-au...
is it works with more than two users?
yes
fantastic
excellent work. I found it helpfull.
An EC2 micro with 1 GB ram can handle how many concurrent socket connection load 😊
Can you please tell me, why you choose peerjs over simple-peer. Any pros ?
No, just familiar and easy for me to implement
great.
Hello brother, your article is awesome. But can you help how to deploy it??
sure, for deploying your frontend(React) you can use netlify, and for peerjs server and socket backend you can use heroku.
If you don't mind can I have the complete source code of this project for production.. It will be great help...
you havent specified of stun and turn servers, your app is not working over different networks.
I doubt anyone can make it work with this tutorial, the code is all over the place with missing import and stuff. It would be much easier if you just share it on git hub so people can check around.
how to play this live chatting in any web site.
The demo made me save the post. Great Article 👌👌👌
You have a typo on that last picture, the onclick should call your toggleScreenShare but its calling reInitializeStream.
Hey , can you please help me with screen share in my project?