آموزش دوره عملی WebRTC. ساخت چت تصویری با React

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

مقدمه ای بر 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 و نحوه ایجاد ارتباط همتا به همتا 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

ایجاد داشبورد 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 - 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

تماس های گروهی با 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

• استقرار 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

بعدش چی What's next

• بعدش چی What's next

بعدش چی What's next

• بعدش چی What's next