نوروز مبارک

نوروز مبارک

🔥 جشنواره نوروزی آموزش با ۷۰٪ تخفیف ویژه! 🎉

با آغاز سال نو، فرصتی استثنایی برای یادگیری فراهم شده است! 🌸

🚀 چرا نباید این فرصت را از دست داد؟
✅ دوره‌های متنوع و کاربردی
✅ تدریس توسط اساتید مجرب
✅ یادگیری در هر زمان و هر مکان

📌 همین حالا از این تخفیف فوق‌العاده بهره‌مند شوید! فرصت محدود است!

 

مشاهده دوره و ثبت نام
قیمت این دوره: 120,000 36,000 تومان
  • مدرس دوره : عرفان میرزایی کلخوران
  • تعداد ویدیوها : 45 ویدیو
  • مدت زمان دوره : 11:53:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1402/06/05
ثبتـــ نام در این دوره ثبت نام در دوره
ساخت ویدیو چت با WebRTC

ساخت ویدیو چت با WebRTC

سلام و درود خدمت دوستان عزیزم

در این دوره قصد داریم یک پروژه ویدیو چت از صفر تا صد با حداقل ابزار هایی که در اختیار داریم باهم بتونیم پیاده سازی کنیم

 

پروژه ای که در این دوره من انتخاب کردم بیشتر از چیزی که انتظار دارید نیازتون رو برآورده میکنه ، یعنی در کنار اینکه تمرکزمون روی یاد گیری webRTC هست ما با ابزار های دیگه ای ((socket ,javascript APIs ,node js .. هم آشنا میشیم و باهاشون کار می کنیم

 

شما با تموم کردن این دوره و با دانشی که بهتون منتقل میشه قادرید پروژه های خیلی باحال و جذاب تر پیاده سازی کنید و در کنارشون webRTC رو هم جزو چاشنی درش قرار بدید تا یه سرو گردن بالاتر از بقیه باشید .

من تا حد امکان به زبان خیلی ساده و قابل فهم تمام مفاهیم رو بهتون انتقال دادم تا نگران چیزی نباشید ، اگر مشکلی توی پیاده سازی پروژه هم داشتید همراهتون خواهم بود.

 راستی اگر دوره مقدماتی WebRTC رو هنوز ندیدید پیشنهاد میکنم از دستش ندید چون این دوره در اصل تکمیل کننده دوره مقدماتی WebRTC  هست

 

پیش نیاز هایی که نیاز هست داشته باشید تا بتونید این دوره رو با من پیش برید :(  Html , Css , JavaScript) هست که دانش جاوااسکریپتتون تا حد نسبی هم باشه خیلی عالیه ، من تا جای ممکن خیلی ساده و روان توضیح میدم تا مطالب رو قشنگ متوجه بشید

 

برای اطلاعات بیشتر حتما ویدیو معرفی دوره رو ببینید ..

 

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

پیاده سازی بخش فرانت

پیاده سازی بخش لاجیک پروژه

پیاده سازی بخش websocket

هندل کردن ارسال درخواست کاربر

هندل کردن پاسخ کاربر

فعال کردن بخش وب کم و دکمه های VideoCall

ایجاد کردن کانکشن WebRTC

ارسال offer - answer  با WebRTC

هندل کردن SDP  در WebRTC

هندل کردن اطلاعات مربوط به اینترنت کاربر

تبادل کردن ICE Candidate هر کاربر

پیاده سازی بخش اشتراک گذاری صفحه نمایش

پیاده سازی بخش چت کردن

پیاده سازی بخش چت کردن

پیاده سازی بخش اتصال تصادفی (Stranger)

سخن پایانی – برنامه های آینده



پیش نیاز های دوره :

  1. javascript
  2. css
  3. html

فهرستـــ ویدیوها

مدت زمان دوره 11:53:00
00:00
00:00

  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1

  • معرفی دوره

00:08:00

سلام بچه ها امیدوارم این دوره براتون جذاب باشه .. این ادامه دوره مقدماتی webRTC هست .. هر فایلی که نیاز هست داشته باشید برای این پروژه رو توی همین ویدیو ضمیمه کردم دانلود کنید .. توی دوره من ممکنه توپوق هم زده باشم مسخره نکنید :) فقط از دوره لذت ببرید و در آخر ؛ آدم نمیدونه تا وقتی که شروع کنه .. پس شروع کنید و دنیا رو به جای بهتری تبدیل کنید ..

2

  • پیاده سازی بخش Container - Dashboard

00:15:00

پیاده سازی بخش Container - Dashboard

3

  • پیاده سازی بخش Container - Call

00:22:00

پیاده سازی بخش Container - Call

4

  • پیاده سازی بخش Container - Messenger

00:04:00

پیاده سازی بخش Container - Messenger

5

  • پیاده سازی state management

00:23:00

State management adding our custom store

6

  • بروز رسانی بخش personal code

00:11:00

Updating personal code

7

  • پیاده سازی بخش Coping button

00:13:00

Coping button functionality

8

  • آماده سازی دکمه ها برای ارسال - (send-pre-offer)

00:26:00

Code preparation to send pre offer

9

  • ارسال (pre-offer) به (server)

00:13:00

sending pre offer to server

10

  • هندل کردن (pre-offer)

00:30:00

handling pre offer

11

  • ساخت باکس incoming call dialog - پارت اول

00:19:00

creating incoming call dialog

12

  • ساخت باکس incoming call dialog - پارت دوم

00:04:00

creating incoming call dialog

13

  • ساخت باکس incoming call dialog - پارت سوم

00:26:00

creating incoming call dialog

14

  • ساخت باکس incoming call dialog - پارت آخر

00:05:00

creating incoming call dialog

15

  • نمایش باکس calling dialog در زمان ارسال (pre-offer)

00:15:00

showing calling dialog only when pre offer will come

16

  • ساخت باکس calling dialog - پارت اول

00:13:00

creating calling dialog at caller side

17

  • ساخت باکس calling dialog - پارت آخر

00:06:00

creating calling dialog at caller side

18

  • ارسال (pre-offer-answer) به (Caller)

00:24:00

sending pre offer answer to caller

19

  • هندل کردن (pre-offer-answer)

00:14:00

handling pre offer answer

20

  • نمایش پاسخ در صورت عدم امکان تماس

00:29:00

showing response dialog if call is not possible

21

  • نمایش (elements) تماس مرتبط با نوع تماس

00:26:00

showing call elements related with call type

22

  • دسترسی به دوربین و میکروفون و نمایش آن در مرورگر

00:12:00

getting an access to camera and microphone and showing that in local preview

23

  • ساخت peer connection (webRTC)

00:28:00

creating peer connection

24

  • ارسال (webRTC-offer) به (Callee)

00:36:00

sending WebRTC offer

25

  • هندل کردن (webRTC-answer) در سمت (Caller)

00:14:00

handling WebRTC offer Preparing WebRTC answer and handling it at caller side

26

  • تبادل (ICE candidate) بین (Peers)

00:12:00

exchanging ICE candidates and adding them to peer connection

27

  • هندل کردن دکمه های (Microphone - Camera)

00:23:00

adding functionality to mute and unmute and turn on off camera

28

  • هندل کردن دکمه (screen sharing) - پارت اول

00:19:00

screen sharing functionality

29

  • بازگشت به (Camera) در (screen sharing) - پارت آخر

00:10:00

switching back to camera

30

  • بخش چت مسنجر - ساخت (datachannel)

00:11:00

creating data channel and configuring peer connection

31

  • بخش چت مسنجر - ارسال پیام با استفاده از (datachannel)

00:11:00

sending messages using data channel

32

  • بخش چت مسنجر - نمایش پیام ها - پارت آخر

00:17:00

displaying messages

33

  • بخش ریکوردر - ساخت ابزارهای (recording)

00:21:00

creating recording utils

34

  • بخش ریکوردر - هندل کردن دکمه (recording)

00:09:00

connecting recording utils with buttons

35

  • بخش ریکوردر - هندل کردن بخش (pausing - resuming) - پارت آخر

00:11:00

pausing and resuming recording

36

  • بخش قطع اتصال - هندل کردن (hang up)

00:12:00

preparing for hang up possibilty

37

  • بخش قطع اتصال - هندل کردن (hang up) بین (peers) - پارت آخر

00:22:00

hanging up with connected user

38

  • آماده سازی (call states)

00:11:00

preparing call states

39

  • بخش آخر (call states)

00:25:00

finishing call states

40

  • هندل کردن دکمه (Reject) در سمت (Caller)

00:08:00

adding hang up possibility to calling dialog

41

  • بخش strangers - هندل کردن دکمه (checkbox)

00:15:00

allow connections from strangers checkbox

42

  • بخش strangers - ذخیره سازی کاربرانی که اجازه اتصال از افراد غریبه در سرور را می دهند

00:11:00

storing list of the users which allow connections from strangers at server

43

  • بخش strangers - اتصال تصادفی با افراد غریبه

00:14:00

connecting with stranger

44

  • بخش strangers - هندل کردن (اگر غریبه ای در دسترس نباشد) - پارت آخر

00:05:00

adding information if no Strangers are available

45

  • بخش تکمیلی - (پایان دوره)

00:10:00

بخش تکمیلی - (پایان دوره) - The End

دوره های دیگر مدرس

مشاهده همه دوره ها
اینستاگرام
تلگرام

نظرات کاربران در رابطه با این دوره

لطفا سوالات خود را راجع به این آموزش در این بخش پرسش و پاسخ مطرح کنید به سوالات در قسمت نظرات پاسخ داده نخواهد شد و آن نظر حذف میشود.
جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .
آرش اصغری

آرش اصغری

ارسال شده در 1403/04/06

با سلام خدمت استاد عزیز

با تشکر از دوره خوبتون، فقط انتقادی که من دارم اینکه کسایی که میان سمت این دوره دیگه html و java script  بلد هستن. بلد نیستن مشکل خودشونه. به جر قسمت های اصلی که همشون حداکثر ۱۰ قسمت میشد، ۳۵ قسمت ما رو درگیر طراحی و خوشگل کردن پروژه کردین. ۲ تا دگمه میزاشتین یکی کانکت میکرد و اونیکی قطع اتصال. واقعا لازم نبود این همه  جزيیات . هم خسته میشیم هم وقت نداریم این همه زمان بزاریم برای چیزایی که اصلا به دردمون نمیخوره. ۱۰ تا فایل js که فقط ۳ تاش لازمه . نشستم تمام قسمت ها رو نگاه میکنم تا شاید لا به لای اموزش جاوا اسکریپت و html شاید یه چیزی هم در مورد webrtc بگین و ما چیزی یاد بگیریم.

ممنون

آرش اصغری

عرفان میرزایی کلخوران (مدرس)

ارسال شده در 1403/04/09

سلام و درود

بله حرف شما درسته ، اما اینم باید در نظر داشته باشید که پروژه از صفر تا صد باید پیاده سازی بشه

و خب هم بخش فرانت و هم بخش لاجیک پروژه ، باید کنار همدیگه باشن تا بشه یه پروژه کاملی رو پیاده کرد ..

نمیشه یه بخشی رو نادیده بگیریم و فقط بخش webrtc رو در نظر بگیریم

چون بدون فرانت ، عملا webrtc هم وجود نداره 

و در آخر هم چون تمامی جلسات قرار گرفته و سورس پروژه هم در اختیارتون هست ، شما میتونید جلسات رو با x2 مشاهده کنید ..

 

موفق و پیروز باشید

a.akrami.9046

ارسال شده در 1402/08/02

سلام برای کار کردن  با این دوره ، نیاز به خرید سرور هم داریم؟

عرفان میرزایی کلخوران (مدرس)

ارسال شده در 1402/08/02

سلام و درود خیر نیازی نیست ..

d b

d b

ارسال شده در 1402/07/05

با سلام وقت بخیر

من پروژه web RTC  را خریداری کرده ام ولی در اجرا به مشکل برخورد کردم

نیاز دارم با کد پروژه ام را با پروژه ای که مدرس دوره در ویدئو ها آموزش می دهد مقایسه کنم بلکه متوجه اشتباهم شوم خب بدیهی است همچون سایر دوره ها بایستی پروژه ای که مدرس در ویدئوها انجام می دهد هم همراه با ویدئوها در دسترس باشد ولی در این دوره قرار نگرفته است

لذا خواهشمندم عنایت فرمائید و سورس پروژه را هم جهت دانلود قرار دهید

با تشکر

d b

عرفان میرزایی کلخوران (مدرس)

ارسال شده در 1402/07/05

سورس کد پروژه :

 

https://github.com/M4Hastam/WebRTC-VideoChat

فرزاد حیدری

فرزاد حیدری

ارسال شده در 1402/07/01

سلام خسته نباشید 
این بعد این دوره میشه با asp.net core و signalR یک ویس چت ساخت ؟؟
یا حالا کلا با asp.net core 

فرزاد حیدری

عرفان میرزایی کلخوران (مدرس)

ارسال شده در 1402/07/01

سلام ساختنش که میشه اما من از این ابزار ها استفاده ای نکردم نمیتونم دقیق راهنماییتون کنم ..