آموزش دوره عملی WebRTC: ساخت چت ویدیویی با ری‌اکت - آخرین آپدیت

سرفصل ها و درس ها

مقدمه‌ای بر WebRTC Introduction to WebRTC

• معرفی دوره Course introduction

• تئوری در مورد WebRTC و نحوه ایجاد ارتباط همتا به همتا Theory about WebRTC and how to establish peer-to-peer connection

• الزامات و جزئیات دوره Course requirements and details

• تئوری - WebRTC چیست؟ Theory - What is WebRTC ?

• تئوری - سرور سیگنالینگ چیست؟ Theory - What is signaling server ?

• تئوری - سرور STUN چیست؟ Theory - What is STUN server ?

• تئوری - سرور TURN چیست؟ Theory - What is TURN server ?

• تئوری - SDP چیست؟ Theory - What is SDP ?

• تئوری - نامزدهای ICE چیست؟ Theory - What are ICE candidates ?

• نظریه - نحوه برقراری ارتباط مستقیم بین همتایان Theory - How to establish direct connection between peers

• آماده سازی محیط - سرور Preparing environment - Server

• آماده سازی محیط - واکنش نشان دهید Preparing environment - React

• React Router - قبل از سخنرانی بعدی رد نشوید! React Router - Do not skip before next lecture !

• افزودن مسیریابی به برنامه React Adding routing to React application

• افزودن Redux برای مدیریت دولتی Adding Redux for state management

• Redux - چرا بسیار مفید است Redux - why is so useful

مقدمه ای بر WebRTC Introduction to WebRTC

• مقدمه دوره Course introduction

• نظریه در مورد WebRTC و نحوه برقراری اتصال همتا به همتا (peer-to-peer) Theory about WebRTC and how to establish peer-to-peer connection

• پیش‌نیازها و جزئیات دوره Course requirements and details

• نظریه – WebRTC چیست؟ Theory - What is WebRTC ?

• نظریه – سرور سیگنالینگ چیست؟ Theory - What is signaling server ?

• نظریه – سرور STUN چیست؟ Theory - What is STUN server ?

• نظریه – سرور TURN چیست؟ Theory - What is TURN server ?

• نظریه – SDP چیست؟ Theory - What is SDP ?

• نظریه – کاندیدهای ICE چه کسانی هستند؟ Theory - What are ICE candidates ?

• نظریه – چگونه اتصال مستقیم بین همتاها برقرار کنیم Theory - How to establish direct connection between peers

• آماده‌سازی محیط – سرور Preparing environment - Server

• آماده‌سازی محیط – React Preparing environment - React

• React Router – قبل از درس بعدی آن را نادیده نگیرید! React Router - Do not skip before next lecture !

• افزودن مسیریابی به برنامه React Adding routing to React application

• افزودن Redux برای مدیریت وضعیت (state management) Adding Redux for state management

• Redux – چرا اینقدر مفید است Redux - why is so useful

ایجاد داشبورد VideoTalker Creating VideoTalker dashboard

• ایجاد صفحه ورود Creating login page

• ایجاد طرح بندی داشبورد Creating dashboard layout

• آماده سازی لیست کاربران فعال Preparing active users list

• ذخیره کاربران فعال ما در سرور Storing our active users in server

• ارسال لیست کاربران فعال به همه مشتریان Sending active users list to all clients

• حذف کاربران از سرور در صورت قطع ارتباط Removing users from the server at disconnection

• دریافت جریان محلی Getting local stream

• جریان محلی - getDisplayMedia Local stream - getDisplayMedia

• ایجاد پیش نمایش جریان محلی Creating local stream preview

• اضافه کردن حالت تماس برای مدیریت اجزای ما Adding call states for managing our components

• ایجاد دیالوگ های مرتبط با تماس های مستقیم Creating dialogs related with direct calls

ایجاد داشبورد VideoTalker Creating VideoTalker dashboard

• ایجاد صفحه ورود Creating login page

• ایجاد طرح‌بندی داشبورد Creating dashboard layout

• آماده‌سازی لیست کاربران فعال Preparing active users list

• ذخیره کاربران فعالمان در سرور Storing our active users in server

• ارسال لیست کاربران فعال به تمام کلاینت‌ها Sending active users list to all clients

• حذف کاربران از سرور هنگام قطع اتصال Removing users from the server at disconnection

• دریافت استریم محلی Getting local stream

• استریم محلی – getDisplayMedia Local stream - getDisplayMedia

• ایجاد پیش‌نمایش استریم محلی Creating local stream preview

• افزودن وضعیت تماس برای مدیریت کامپوننت‌هایمان Adding call states for managing our components

• ایجاد دیالوگ‌های مربوط به تماس‌های مستقیم Creating dialogs related with direct calls

پیاده‌سازی WebRTC برای تماس‌های مستقیم WebRTC implementation for direct calls

• پیش پیشنهاد - دریافت اطلاعات در صورتی که تماس گیرنده با تماس مستقیم موافقت کند Pre-offer - getting information if callee will agree for direct call

• به پیش پیشنهاد رسیدگی کنید و پاسخ پیش از پیشنهاد را آماده کنید Handle pre-offer and prepare pre-offer answer

• پاسخ قبل از پیشنهاد را رسیدگی کنید Handle pre-offer answer

• تماس رد شد - گفتگوی رد شده را نشان دهید Call rejected - show rejected dialog

• تماس رد شد - تست Call rejected - test

• ایجاد ارتباط همتا Creating Peer connection

• ارتباط همتا Peer connection

• ایجاد پیشنهاد webRTC Creating webRTC offer

• پیشنهاد WebRTC WebRTC offer

• مدیریت پیشنهاد webRTC و ایجاد پاسخ webRTC Handling webRTC offer and creating webRTC answer

• پاسخ WebRTC WebRTC answer

• پاسخ webRTC را مدیریت کنید Handle webRTC answer

• تبادل نامزدهای ICE Exchanging ICE candidates

• نامزدهای ICE ICE candidates

• بررسی وضعیت اتصال همتا Checking peer connection state

• نمایش جریان از راه دور Displaying remote stream

• ایجاد دکمه های مکالمه Creating conversation buttons

• فعال/غیرفعال کردن دوربین یا میکروفون در اتصال همتا فعال Enabling/Disabling camera or microphone in active peer connection

• اشتراک‌گذاری صفحه - امکان جایگزینی جریان‌ها را اضافه کنید Screen sharing - add possibility to replace streams

• امکان قطع تماس را اضافه کنید Add hang up possibility

• تماس های مستقیم تغییرات جزئی Direct calls minor changes

• اطلاعات داشبورد Dashboard information

پیاده سازی WebRTC برای تماس های مستقیم WebRTC implementation for direct calls

• پیش-پیشنهاد (Pre-offer) – دریافت اطلاعات در مورد اینکه آیا مخاطب برای تماس مستقیم موافقت می‌کند یا خیر Pre-offer - getting information if callee will agree for direct call

• پردازش پیش-پیشنهاد و آماده‌سازی پاسخ پیش-پیشنهاد Handle pre-offer and prepare pre-offer answer

• پردازش پاسخ پیش-پیشنهاد Handle pre-offer answer

• تماس رد شد – نمایش دیالوگ رد تماس Call rejected - show rejected dialog

• تماس رد شد – تست Call rejected - test

• ایجاد اتصال همتا (Peer connection) Creating Peer connection

• اتصال همتا Peer connection

• ایجاد پیشنهاد webRTC Creating webRTC offer

• پیشنهاد WebRTC WebRTC offer

• پردازش پیشنهاد WebRTC و ایجاد پاسخ WebRTC Handling webRTC offer and creating webRTC answer

• پاسخ WebRTC WebRTC answer

• پردازش پاسخ WebRTC Handle webRTC answer

• تبادل کاندیدهای ICE Exchanging ICE candidates

• کاندیدهای ICE ICE candidates

• بررسی وضعیت اتصال همتا Checking peer connection state

• نمایش استریم از راه دور Displaying remote stream

• ایجاد دکمه‌های مکالمه Creating conversation buttons

• فعال/غیرفعال کردن دوربین یا میکروفون در اتصال همتای فعال Enabling/Disabling camera or microphone in active peer connection

• اشتراک‌گذاری صفحه – امکان جایگزینی استریم‌ها را اضافه کنید Screen sharing - add possibility to replace streams

• قابلیت قطع تماس را اضافه کنید Add hang up possibility

• تغییرات جزئی تماس‌های مستقیم Direct calls minor changes

• اطلاعات داشبورد Dashboard information

تماس‌های گروهی با PeerJs Group Calls with PeerJs

• معرفی تماس های گروهی Group calls introduction

• اتصال با سرور peerJs Connecting with peerJs server

• ایجاد لیست اتاق ها Creating rooms list

• افزودن دکمه ایجاد اتاق Adding create room button

• اتاق های ایجاد شده را در سرور ذخیره کنید Store created rooms in server

• ارسال اتاق های فعال برای تمامی مشتریان Sending active rooms to all clients

• افزودن قابلیت ایجاد اتاق Adding create room functionality

• پیوستن به تماس گروهی Joining group call

• تماس با کاربر جدید در تماس گروهی Calling to new user in group call

• آماده سازی منطق برای نمایش جریان های ورودی Preparing logic to display incoming streams

• نمایش جریان های ورودی Displaying incoming streams

• خروج از تماس گروهی Leaving group call

• در حال بستن تماس گروهی به عنوان ایجادکننده اتاق Closing group call as room creator

• تماس های گروهی تغییرات جزئی Group calls minor changes

تماس های گروهی با PeerJs Group Calls with PeerJs

• مقدمه تماس‌های گروهی Group calls introduction

• اتصال با سرور peerJs Connecting with peerJs server

• ایجاد لیست اتاق‌ها Creating rooms list

• افزودن دکمه ایجاد اتاق Adding create room button

• ذخیره اتاق‌های ایجاد شده در سرور Store created rooms in server

• ارسال اتاق‌های فعال به تمام کلاینت‌ها Sending active rooms to all clients

• افزودن قابلیت ایجاد اتاق Adding create room functionality

• پیوستن به تماس گروهی Joining group call

• تماس با کاربر جدید در تماس گروهی Calling to new user in group call

• آماده‌سازی منطق برای نمایش استریم‌های ورودی Preparing logic to display incoming streams

• نمایش استریم‌های ورودی Displaying incoming streams

• خروج از تماس گروهی Leaving group call

• بستن تماس گروهی توسط خالق اتاق Closing group call as room creator

• تغییرات جزئی تماس‌های گروهی Group calls minor changes

کانال‌های داده WebRTC WebRTC data channels

• مقدمه ای بر کانال های داده WebRTC Introduction to WebRTC data channels

• اضافه کردن منطق چت Adding chat logic

• ایجاد پیام رسان کوچک Creating small messenger

کانال های داده WebRTC WebRTC data channels

• مقدمه‌ای بر کانال‌های داده WebRTC Introduction to WebRTC data channels

• افزودن منطق چت Adding chat logic

• ایجاد یک مسنجر کوچک Creating small messenger

اتصال به سرور TURN و استقرار برنامه ما Connecting to TURN server and deployment of our application

• آماده سازی پروژه برای استقرار Preparing project for deployment

• واکشی اعتبار سرور TURN از Twilio Fetching TURN server credentials from Twilio

• واکشی اعتبار سرور TURN از باطن ما Fetching TURN server credentials from our backend

• استقرار باطن برنامه ما Deploying backend of our application

• استقرار frontend برنامه ما Deploying frontend of our application

• رفع اشکال با تجزیه سرورهای TURN و STUN Fixing bug with parsing TURN and STUN servers

• تست اتصال با کاربر متصل به شبکه های مختلف Testing connection with user connected to different network

• کد کامل VideoTalker VideoTalker complete code

اتصال به سرور TURN و استقرار برنامه ما Connecting to TURN server and deployment of our application

• آماده‌سازی پروژه برای استقرار Preparing project for deployment

• دریافت اعتبارنامه سرور TURN از Twilio Fetching TURN server credentials from Twilio

• دریافت اعتبارنامه سرور TURN از بک‌اند ما Fetching TURN server credentials from our backend

• استقرار بک‌اند برنامه ما Deploying backend of our application

• استقرار فرانت‌اند برنامه ما Deploying frontend of our application

• رفع اشکال با تجزیه سرورهای TURN و STUN Fixing bug with parsing TURN and STUN servers

• تست اتصال با کاربر متصل به شبکه متفاوت Testing connection with user connected to different network

• کد کامل VideoTalker VideoTalker complete code

گام‌های بعدی What's next

• بعدش چی What's next

بعدش چی What's next

• گام‌های بعدی What's next