WEBRTC 2022 - ایجاد برنامه تماس تلفنی گروهی کوپی زوم

ایجاد چت تصویری گروهی با معماری WebRTC Mesh، واکنش و WebSockets مانند Google Meet و Zoom.

عنوان اصلی : WebRTC 2022 - Create Zoom Clone Video Group Call Application

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

مقدمه:
عملکردهای برنامه
معرفی معماری مش
نظریه - WebRTC چیست؟
سرور سیگنالینگ چیست؟
سرور STUN چیست؟
سرور TURN چیست؟
SDP چیست؟
کاندیداهای ICE چیست؟
چگونه ارتباط مستقیم بین دو همتا برقرار کنیم؟
محیط آماده سازی:
نصب Node.js
ایجاد سرور و نصب وابستگی ها
در حال آماده سازی منطق اصلی سرور ما
راه اندازی برنامه React
در حال آماده سازی پروژه React
پیکربندی فروشگاه با Redux
ایجاد فرانت‌اند اپلیکیشن در React:
شیوه ها و نمادها
آماده سازی اجزای صفحات قبل از افزودن مسیریابی به برنامه ما
افزودن مسیریابی در React
ایجاد صفحه معرفی بدون دکمه
ایجاد دکمه های صفحه مقدمه
در حال ایجاد صفحه عضویت در اتاق
ارسال اولین اقدام در Redux - isRoomHost
نمایش عناوین مختلف بستگی به لوازم جانبی دارد
در حال ارائه ورودی‌های صفحه عضویت در اتاق
رفع اشکال با محتوای اشتباه
ایجاد کادر انتخاب فقط صدا
ذخیره اطلاعات مربوط به نوع اتصال در فروشگاه Redux
مؤلفه ای که مسئول نمایش پیام خطا است ایجاد کنید
ایجاد دکمه‌های صفحه عضویت در اتاق
بررسی وجود اتاق روی سرور
رسیدگی به پاسخ سرور در مورد اطلاعات در صورت وجود اتاق
جداسازی منطقی Joining / Creating room
در حال آزمایش درخواست HTTP ما
ذخیره هویت (نام کاربری) در فروشگاه
ایجاد رابط کاربری صفحه اتاق با React:
تهیه ساختار اولیه اتاق پیج
ایجاد برچسب اتاق
ارسال شناسه اتاق صحیح به مؤلفه برچسب
ایجاد بخش های شرکت کنندگان
نمایش یک شرکت‌کننده
ایجاد ساختار دکمه های اتاق
ایجاد دکمه میکروفون
ایجاد دکمه دوربین
ایجاد دکمه خروج از اتاق
ایجاد دکمه اشتراک‌گذاری صفحه
ایجاد منطق سرور با Socket.IO:
آماده شدن برای اتصال به اتاق
دریافت جریان محلی
ایجاد همپوشانی بارگذاری
ایجاد اتصال با سرور Socket.IO
اتصال به سرور Socket.IO از سمت کلاینت
ارسال یک رویداد به سرور برای ایجاد اتاق جدید
رویداد آزمایشی مسئول ایجاد اتاق جدید است
ایجاد Create New Room Handler
دریافت شناسه اتاق از سرور
نمایش کاربران واقعی متصل به اتاق در فهرست شرکت کنندگان
رفع اشکال با لیست کاربر
در حال ایجاد Join Room Handler
آزمایش اتاق پیوستن
خروج از اتاق
در صورت عدم خروج کاربر، اتاق بسته می شود
ایجاد منطق WebRTC:
معرفی معماری
برای اتصال آماده شوید
رویداد را آماده کنید اتصال را کنترل کنید
شروع با simple-peer
مدیریت رویداد در جریان
مدیریت رویداد سیگنال
ارسال داده های سیگنالینگ به کاربران متصل
انتشار رویداد - شروع اتصال
نمایش پیش‌نمایش محلی
نمایش جریان‌های ورودی
آزمایش اتصال WebRTC
محدودیت ها
امکان بزرگنمایی
عملکرد خروج از اتاق
توضیح کد
اتصال منطق به دکمه‌های اتاق:
عملکرد بی صدا
عملکرد ویدیو را غیرفعال کنید
دکمه های تست
اشتراک گذاری صفحه - پیش نمایش
رفع اشکال با غیرفعال کردن اشتراک‌گذاری صفحه
تغییر مسیری که در اتصال همتا ارسال می کنیم
ایجاد عملکرد چت:
ایجاد رابط کاربری چت
ایجاد کانتینر پیام ها
ایجاد ورودی پیام جدید
در حال آماده سازی فروشگاه برای پیام ها
تبادل پیام با سایر کاربران
اتصال فقط با صدا:
اتصال فقط با صدا
ایجاد برچسب فقط صوتی
رفع اشکال با برچسب فقط صدا
پیشرفت های کوچک
اتصال با سرور TURN:
در حال واکشی اعتبار سرور TURN از Twilio
افزودن سرورهای TURN به اتصال همتا
رفع و چت مستقیم:
رفع اشکال بزرگنمایی
آماده سازی فروشگاه برای چت مستقیم
ایجاد رابط کاربری Chatbox
ایجاد کانتینر پیام ها
ایجاد ورودی پیام جدید
ایجاد مکالمه برچسب انتخاب نشده است
تست UI
انتخاب مکالمه فعال
ارسال پیام به سایر کاربران
تست پیام ها
افزودن پیام به سابقه چت
تنظیم تاریخچه چت صحیح برای نمایش
آزمایش پیام‌های مستقیم
رفع اشکال با نمایش پیام ها و اضافه کردن پیمایش