Google Meet Clone Using NextJS | Best Frontend Projects For Resume 🔥
Vložit
- čas přidán 2. 07. 2024
- NEXT.JS Yatra is here: jscafe.teachcode.in/new-cours...
JS Cafe Learning Portal: jscafe.teachcode.in/
Source Code: github.com/jscafe-dev/google-...
PeerJS Lib: peerjs.com/
Navigator MDN: developer.mozilla.org/en-US/d...
Timestamps:
Start 00:00
0. Introduction & pre-requesit 00:00:14
1. Understanding WebRTC 00:04:27
2. Setting up project & socket.io 00:32:31
3. Setup PeerJs 01:06:53
4. Create Lobby 01:28:26
5. Setup Media Stream & Render in player 01:43:04
6. Signaling 01:56:34
7. Styling Player 02:39:49
8. Control Panels 02:56:49
9. The final showdown 03:41:09
Important Playlists to crack Frontend Interviews 👇🏻
Frontend System Design: • Frontend system design...
DSA in javascript: • DSA in Javascript | Bi...
Javascript Questions: • Frontend Interview que...
Machine Coding Round: • Frontend machine codin...
For any doubts and help follow me on:
Discord: bit.ly/3AYkjFT
LinkedIn: bit.ly/45wQIjJ
Instagram: bit.ly/3ttENTq
Twitter: bit.ly/3M3rFOl
Telegram: bit.ly/45xTOUO
Video Edited By: bit.ly/Kashimedia_corp
Track: Clarx, Debris, 3rd Prototype, Castion, EMDI - Evolution (feat. Harley Bird) [NCS10 Release]
Music provided by NoCopyrightSounds.
Watch: • Clarx, Debris, 3rd Pro...
Free Download / Stream: ncs.io/Evolution
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Check out our Usage Policy on how to use NCS music in your videos: ncs.io/UsagePolicy
Tags and hashtags:
#javascript #javascriptinterviewquestions #JS #js #frontend #frontendDeveloper #software #developer #engineer #softwareengineer #frontendengineer #OOPS #closures #salary #job #placement
Javascript concepts
JS OOPS
Javascript Object Oriented Programming
How OOPS works in Javascript
Prototypes in JS
Javascript _ptoto_
What is a prototype in Javascript
Basics of JS
How to learn javascript
Javascript
Javascript concepts
Frontend Engineer
Frontend Developer
Software Engineer
Software Development Engineer
How to become a frontend engineer
How much salary does a frontend developer make
What is the salary of a frontend engineer
Javascript for a frontend developer
Concepts of javascript
Bootcamp for frontend developers
Roadmap for a frontend engineer
How to get a job as a frontend engineer
How to become a frontend developer
Javascript tutorial
Javascript full course
Javascri[t interview questions
Javascri[t interview questions and answers
Salary of a frontend developer
System Design
Frontend System Design
NEXT.JS Yatra is here: jscafe.teachcode.in/new-courses/9-nextjs-14-yatra-the-complete-fullstack-course
Thank you very mucb ! You really explained the stuff well!!
Great work man 🚀
Finally wait is over ❤
The wait is over❤
Jai Mahakal Vedant Sir!🙏🏽 Another awesome video! Thanks !
Amazing! Thank you so much. I'd been struggling to get my peerjs to work for my react app and this was the push I needed. I was able to use these steps to work in my application with typescript and a node ts backend no problem. You're the man!
Great content, appreciate your effort. Would be great if you included sharing screen, and group call. System balancing and more advanced.
Thank you so much bro❤❤
This person did a great job explaining the idea. Keep it, brother. 👌🤟
Thank you bhaiya for this awesome content....🚀💯✅
Great Content and good explanation in the start of the video which help a lot, and Best of Luck for your upcoming videos and thanks for all of the hard which you did in for this video.
As a subscriber, I can't thank you enough for the incredible effort you put into breaking down complex concepts in such an easy-to-follow manner. Your tutorials have not only honed my frontend skills but also made coding an enjoyable journey. And the fact that you provide this high-quality content for free? Mind-blowing generosity! Thank you for being the coding mentor we all needed🙌.
Bro honestly you have done a great job with coming up with this video. Hopefully you will make more vids like this in the future. These are like trophy on our resumes. Thanks again and I joined your discord too. Need the commnity support as well
Thanks a ton
Thanks Bhaiya...❤🎉
Respect 👏🙌
Are bhiya aap abhi tak kyu nahi mile . Best tutorial ❤🙌
Completed with Part 1 Understood Web RTC.
Got Amazing Knowledge...🚀✅
is it working fine with next 14
Sir this course is ❤ please continue this unique project series and im following you and your tutorials are my only hope to get hired thanks for this tutorial bro ❤
bro where u are learning theorey part for nextjs and backend bro
So much thanks
Subscribed ❤😊
Bro you explain very well, please make another tutorial with group video call with SFU, please ❤
1:18:29 This thing was just out of the box.
Thank you!!!!
Pls make a video on deployment of this app
It truly is beneficial. Could you also explain how to use the waiting area in the lobby?
jai mahakaal , just started watching
Bhhaiya Make a Deployment video of this app
Yes please
Hey i found
czcams.com/video/zZRnvN-dRdI/video.htmlsi=y_E51Q7FqVpreN3F
😂😂
you just have to separate server side code from client side and then deploy it somewhere else and for client side vercel is always there
thanks!
Bro it was a great tutorial, i want if you can make more advance features like sharing screen, recording screen and taking notes o clicking notes take me to the video exact minutes
Yes sir NEXTjs yatra like react js we want it❤️
One more question sir r u going to bring these type of resume level projects for front end in future like 2-3 more?🥹💯
Yes more projects will come 🤟🏻
I am a simple guy! I hear Jay mahakal and I like the video ❤
Plz add screen sharing and recording option also.😅❤
Bhaiya you can use excalidraw if possible for your ease.
Can you please make a video on X(Twitter) clone using react and tailwind for frontend and appwrite for a backend and DB
I'm trying to create build but it keeps processing is there any solution to create a build for deployment
thnks
Please Sir ,if you know how to create video conferencing app for many to many user without using any third party api so pls do share resources for that or create a video on that.
can we add backend to this course ? and if can how ??? just guide with a short description
Thank you so much sir it makes a lot of help to build omegle clone (it's my minor project)☺☺
Bro i just implemented your code. But the issue is sometimes i cant see incoming video stream. Just showing a blank mini player with audio icon..how to solve this?
Is only react and node JS and Postgres knowledge enough to do this project?
bhai nextjs indepth course le aao official documentation wise khuch smjh nhi aaraha parallel routes streaming etc., only frontend things...
2:37:13 Sir, I am not able to see the others user's video stream when i am joining a room. Is anyone facing this issue?
Hi Vedant, I'm from Sri Lanka. Thank you for these amazing tutorials. I have almost completed the React Yatra course. I will surely work on the online drawing tool project and this project after completing the React tutorial. I wanted to ask you if I can host this project on Vercel or Render?
Thank you 🙏🏻 means a lot
How can we implement socket io in it?
bhaiya can I make this project after doing your react course of 11 hrs or I need to do something more to proceed ?? please suggest me
person who dont have knowlegde in nextjs can make this project?
जय महाकाल 🔱
Why are you not using latest NEXT JS 13 or 14 ???
for production, I thought that vercel couldn't do sockets in a serverless enviroment. Don't you have to make an express server to use sockets in next.js
Please someone tell how to deploy this project
Jai Aadinath, Jai Mahaveer🙏🙏
Can we make this a full stack app ?
Great ❤❤
Bhaiya what new features we can implement to make this project completly ours.
1. Add chat feature
2. Nudge users when someone joins a call or leave
3. Call recording
4. Screen sharing
..... And much more ♥️
@@js_cafe 🆒👍🏻
i think you can add screen sharing and file sharing in this projects to make it more complex .
@@detaincoderbro is it only frontend projects or backend also convers anything so for final placments can I add these two project to my resume or do i need to mern stack bro
not able to make the socket api call in next14, it gives Error: xhr poll error
Use NextJs 13
Getting this error in my browser(timestamp is 1:56:10) after setting media player .
error: hydration failed because the initial ui does not match what was rendered on the server.
How did you solve the prob?
hey which free hosting server is best??? to deploy this
It's tricky, however you can try AWS ec2. It will give you a similar environment of your machine
You just went through the signalling module too quick, you should have explained it pretty well especially the client and server parts of socket and also all the calling of peer.js .
but then you don't use webrtc?
pls find a way to deployment
Jay maha kaal 🙏
Sir are you also uploading javascript beginner to advance video on this channel or not?
I'll plan this sometime later. However my ebook already covers what I'll be explaining here
hello Bhaiya currently i am going thtough your video i am here setup peer js server i follow same steps just like you { npm install peerjs } and then whenver i start my server after run this command { peerjs --port 3001 } i got error like [ The term 'peerjs' is not recognized as the name of a cmdlet] what can i do in this situation
Hey you need to install peerjs globally.
@@js_cafe no
@@js_cafe let me install globally
@@js_cafe same problem aa rahi hai bhaiya
all good now server is working properly now thank you Bhaiya
local host pe sb accha chal rha hai but jb maine deploy kiya toh bass room me akela aadmi dikh rha . Anyone facing this issue?
Vercel can't handle websockets 😁
@@js_cafe I had deployed this project using netlify still facing issue - _ -
which platform should I prefer for deployment of this particular project?
tell me real quick@@atharvak1503
peerjs : The term 'peerjs' is not recognized as the name of a cmdlet,
function, script file, or operable program. Check the spelling of the name,
h is correct and try again.
At line:1 char:1
+ peerjs --port 3001
+ ~~~~~~
+ CategoryInfo : ObjectNotFound: (peerjs:String) [], CommandNo
tFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Anyone facing this issue??
Install peerjs globally
same error after installing globally
@@js_cafe
still the same issue@@js_cafe
We want course on NextJS 14.
Yes working on it 💪🏻
@@js_cafe Bhaiya I have understood whole project but I haven't made it from myself. So should I make this project again from myself or what to do next?
Please guide me
This app still contains one bug, i can still see camera and microphone on even after leaving the room czcams.com/video/2hrNrNrSDB0/video.html . Any suggesstion or way to fix this ?
Anyone facing "peerjs is recognizable as an internal or external command"
You need to install peerjs globally.
npm i -g peerjs
@@js_cafe yep already solved
I am using Next js 13.5.6 still getting Error establishing socket Error: xhr poll error
at Polling.onError (transport.js:38:1)
at Request.eval (polling.js:218:1)
at Emitter.emit (index.mjs:136:1)
at Request.onError (polling.js:320:1)
at eval (polling.js:294:1)
Getting this error while establishing connection in socket context
Use NextJs 13
@@js_cafe using 13.5.6
It's not working on either 13.0.0 as well as 13.5.6 , I don't know how it's running on your side? @js_cafe If you have any answer to this please reply or else the video is fun to just watch.....
Error: xhr poll error
at Polling.onError (transport.js:38:1)
at Request.eval (polling.js:218:1)
at Emitter.emit (index.mjs:136:1)
at Request.onError (polling.js:320:1)
at eval (polling.js:294:1)..Pls help I am using Next 14 I got this error on 57:40. @JsCafe
Use NextJs 13
@@js_cafe ok