🔔 با توجه به بهبود نسبی اینترنت، آمادهسازی دورهها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دورهها ممکن است با کمی تأخیر انجام شود. مدت اشتراکهای تهیهشده محفوظ است.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش ساخت اپلیکیشن تماس ویدیویی با جاوا اسکریپت، Supabase و WebRTC
- آخرین آپدیت
دانلود Building Video Call App with Javascript, Supabase and WebRTC
نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
آموزش ساخت اپلیکیشن تماس ویدیویی با جاوااسکریپت، WebRTC و Supabase
آیا به دنبال ساخت یک اپلیکیشن تماس ویدیویی مشابه Zoom یا WhatsApp هستید؟ این دوره جامع و پروژه محور، شما را در ساخت یک اپلیکیشن تماس ویدیویی بلادرنگ با استفاده از جاوااسکریپت، HTML، CSS، Socket IO، WebRTC و Supabase راهنمایی میکند.
این دوره فرصتی عالی برای تقویت مهارتهای برنامه نویسی و بهبود دانش فنی شما در زمینه ارتباطات شبکه بلادرنگ است.
آنچه در این دوره خواهید آموخت:
مبانی WebRTC: شناخت موارد استفاده، محدودیتهای فنی و ویژگیهای اصلی WebRTC.
نحوه کار WebRTC در اپلیکیشن تماس ویدیویی: از گرفتن مدیا کاربر تا ایجاد اتصال همتا به همتا، تبادل فراداده، و استریم مدیا.
ویژگیهای اپلیکیشن تماس ویدیویی: احراز هویت کاربر، ارتباط صوتی و تصویری بلادرنگ، سیستم تایید درخواست پیوستن توسط میزبان، و بیصدا کردن صدا و تصویر.
ساخت اپلیکیشن تماس ویدیویی با Socket IO و WebRTC: گام به گام از پیادهسازی Backend تا Frontend.
نصب و راهاندازی Express JS و Socket IO.
ایجاد سرور Socket و منطق پیوستن به اتاق.
ایجاد تبادل پیشنهاد و پاسخ SDP با استفاده از Socket IO.
راهاندازی فضای ذخیرهسازی Supabase برای احراز هویت کاربر.
ساخت سیستم احراز هویت کاربر پایه.
ایجاد توابع برای ورود، ثبت نام و خروج.
ایجاد توابع برای شروع تماس ویدیویی و دسترسی به مدیا کاربر.
ایجاد تابع برای پیوستن به اتاق تماس ویدیویی و ساختار گردش کار تایید میزبان.
ایجاد اتصال همتا به همتا WebRTC و ارسال پیشنهاد SDP.
ایجاد توابع برای مدیریت پیشنهاد و پاسخ SDP.
ایجاد توابع برای تولید شناسه اتاق ملاقات، بیصدا کردن صدا و بیصدا کردن ویدیو.
طراحی داشبورد اپلیکیشن تماس ویدیویی.
طراحی صفحه ورود و ثبت نام.
طراحی رابط کاربری اپلیکیشن تماس ویدیویی با CSS.
انجام تست عملکرد و تست کارایی.
پیشنیازها:
عدم نیاز به تجربه قبلی در WebRTC.
دانش پایه در جاوااسکریپت و HTML.
چرا باید یک اپلیکیشن تماس ویدیویی با WebRTC بسازیم؟
این پروژه، درک شما را از ارتباطات بلادرنگ تقویت میکند و شما را در معرض فناوریهای اصلی مورد استفاده پلتفرمهایی مانند Zoom، Google Meet و Microsoft Teams قرار میدهد. مهارتهایی که یاد میگیرید، مانند تنظیم اتصالات همتا به همتا، مدیریت سیگنالینگ و پیادهسازی احراز هویت امن کاربر، تنها به اپلیکیشنهای تماس ویدیویی محدود نمیشوند. آنها را میتوان در پروژههای دیگر از جمله سیستمهای گفتگوی زنده، پلتفرمهای پخش زنده و نرمافزارهای آموزش الکترونیکی نیز به کار برد. اینها مهارتهای بسیار مورد تقاضا هستند که درها را به روی انواع مسیرهای شغلی در صنایع فناوری و رسانه باز میکنند.
توضیحات بیشتر:
پس از راهاندازی Backend، با استفاده از پروتکلهای WebRTC، اتصال همتا به همتا را برقرار خواهیم کرد. این به کاربران این امکان را میدهد که مستقیماً و بدون تکیه بر یک سرور رسانه متمرکز، به هم متصل شده و با هم ارتباط برقرار کنند و از تاخیر کم و پخش با کیفیت بالا اطمینان حاصل شود. پس از آن، توابعی را ایجاد خواهیم کرد تا به کاربران امکان داده شود در حین تماس، جریانهای صوتی و ویدیویی خود را بیصدا و از حالت بیصدا خارج کنند. این ویژگی به کاربران کنترل کامل بر ارتباطات و حریم خصوصی خود در طول جلسه میدهد. پس از آن، یک رابط تمیز و کاربرپسند با استفاده از HTML و CSS طراحی خواهیم کرد. این تضمین میکند که استفاده از برنامه آسان و از نظر بصری جذاب است. در نهایت، در پایان دوره، برنامه تماس ویدیویی را با استفاده از دو روش آزمایش، تست عملکرد و تست عملکرد آزمایش خواهیم کرد. با این کار، میتوانیم اطمینان حاصل کنیم که برنامه به طور روان تحت شرایط مختلف اجرا میشود و تمام ویژگیها به طور منظم کار میکنند.
سرفصل ها و درس ها
مقدمه دوره
Introduction to the Course
معرفی
Introduction
فهرست مطالب
Table of Contents
این دوره برای چه کسانی مناسب است؟
Whom This Course is Intended for?
ابزارها، IDE و پایگاه داده
Tools, IDE, and Database
ابزارها، IDE و پایگاه داده
Tools, IDE, and Database
مقدمه ای بر WebRTC
Introduction to WebRTC
مقدمه ای بر WebRTC
Introduction to WebRTC
WebRTC چگونه در اپلیکیشن تماس ویدیویی کار می کند؟
How WebRTC Works in Video Call App?
WebRTC چگونه در اپلیکیشن تماس ویدیویی کار می کند؟
How WebRTC Works in Video Call App?
ویژگی های اصلی اپلیکیشن تماس ویدیویی
Video Call App Main Features
ویژگی های اصلی اپلیکیشن تماس ویدیویی
Video Call App Main Features
ایجاد پوشه پروژه، نصب Express و Socket IO
Creating Project Folder, Installing Express, and Socket IO
ایجاد پوشه پروژه، نصب Express و Socket IO
Creating Project Folder, Installing Express, and Socket IO
ایجاد سرور Socket و منطق Join Room
Creating Socket Server & Join Room Logic
ایجاد سرور Socket و منطق Join Room
Creating Socket Server & Join Room Logic
ایجاد تبادل SDP Offer Answer با استفاده از Socket IO
Creating SDP Offer Answer Exchange Using Socket IO
ایجاد تبادل SDP Offer Answer با استفاده از Socket IO
Creating SDP Offer Answer Exchange Using Socket IO
راه اندازی Supabase Storage برای احراز هویت کاربر
Setting Up Supabase Storage for User Authentication
راه اندازی Supabase Storage برای احراز هویت کاربر
Setting Up Supabase Storage for User Authentication
ساخت سیستم احراز هویت کاربر پایه
Building Basic User Authentication System
ساخت سیستم احراز هویت کاربر پایه
Building Basic User Authentication System
ایجاد توابع برای ورود، ثبت نام و خروج
Creating Functions for Login, Signup, and Logout
ایجاد توابع برای ورود، ثبت نام و خروج
Creating Functions for Login, Signup, and Logout
ایجاد توابع برای شروع تماس ویدیویی و دسترسی به رسانه کاربر
Creating Functions to Start Video Call & Access User Media
ایجاد توابع برای شروع تماس ویدیویی و دسترسی به رسانه کاربر
Creating Functions to Start Video Call & Access User Media
ایجاد توابع برای پیوستن به اتاق تماس ویدیویی و ساختاربندی جریان تایید میزبان
Creating Functions for Joining Video Call Room & Structuring Host Approval Flow
ایجاد توابع برای پیوستن به اتاق تماس ویدیویی و ساختاربندی جریان تایید میزبان
Creating Functions for Joining Video Call Room & Structuring Host Approval Flow
ایجاد اتصال WebRTC Peer و ارسال SDP Offer
Creating WebRTC Peer Connection & Sending SDP Offer
ایجاد اتصال WebRTC Peer و ارسال SDP Offer
Creating WebRTC Peer Connection & Sending SDP Offer
ایجاد توابع برای مدیریت SDP Offer & Answer
Creating Functions to Handle SDP Offer & Answer
ایجاد توابع برای مدیریت SDP Offer & Answer
Creating Functions to Handle SDP Offer & Answer
ایجاد توابع برای تولید شناسه اتاق جلسه، قطع صدا و قطع تصویر
Creating Functions to Generate Meeting Room ID, Mute Audio, and Mute Video
ایجاد توابع برای تولید شناسه اتاق جلسه، قطع صدا و قطع تصویر
Creating Functions to Generate Meeting Room ID, Mute Audio, and Mute Video
طراحی داشبورد اپلیکیشن تماس ویدیویی
Designing Video Call App Dashboard
طراحی داشبورد اپلیکیشن تماس ویدیویی
Designing Video Call App Dashboard
طراحی صفحه ورود و ثبت نام
Designing Login & Signup Page
طراحی صفحه ورود و ثبت نام
Designing Login & Signup Page
استایل دهی به رابط کاربری اپلیکیشن تماس ویدیویی با CSS
Styling Video Call App User Interface with CSS
استایل دهی به رابط کاربری اپلیکیشن تماس ویدیویی با CSS
Styling Video Call App User Interface with CSS
نمایش نظرات