قیمت این دوره: 120,000 60,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

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

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

اینستاگرام
تلگرام

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

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