آموزش تسلط بر webRTC - ویدیو و اشتراک گذاری صفحه نمایش در زمان واقعی

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

مقدمه ای بر webRTC Introduction to webRTC

• یک نکته کوتاه قبل از تماشای ویدیوی بعدی... A brief note before you watch the next video...

• معرفی Introduction

• همه کدهای من (لینک github) All my code (github link)

• دریافت پایگاه کد برای یک ویدیوی خاص Getting the codebase for a specific video

• نحوه کدنویسی How I code

• webRTC چیست و چه کاربردی دارد؟ What is webRTC and what does it do?

• اما سال 2023 است: چرا باید از webRTC روی SDK (Zoom) استفاده کنم؟ But it's 2023: Why would I use webRTC over an SDK (Zoom)?

پروژه - زمین بازی getUserMedia - پروژه (لنگ) که اصول اولیه را به شما می آموزد Project - getUserMedia playground - (lame) project that teaches you the basics

• راه اندازی فایل پروژه Project file setup

• getUserMedia - جایی که همه چیز شروع می شود getUserMedia - where everything starts

• فید، getTracks() و MediaStreamTracks را پخش کنید Play the feed, getTracks(), and MediaStreamTracks

• چند به روز رسانی رابط کاربری A few UI updates

• نمای کلی محدودیت ها - getSupportedConstraints() و getCapabilities() Constraints overview - getSupportedConstraints() and getCapabilities()

• تغییر وضوح، نرخ فریم، نسبت ابعاد - applicationConstraints() Changing resolution, framerate, aspect ratio - applyConstraints()

• ضبط فید - MediaRecorder و webRTC Recording a feed - MediaRecorder and webRTC

• دکمه های به روز رسانی Update buttons

• گرفتن صفحه نمایش Capturing the screen

• دریافت ورودی/خروجی های موجود با enumerateDevices() Getting available input/outputs with enumerateDevices()

• در حال بارگیری گزینه های ورودی/خروجی Loading up input/output options

rtcPeerConnection - پخش ویدئو، همتا به همتا rtcPeerConnection - Stream video, peer to peer

• بخش نسخه ی نمایشی و نمای کلی Section Demo & Overview

• rtcPeer اتصال و سیگنالینگ rtcPeerConnection and signaling

• سیگنالینگ قسمت 1 - SDP Signaling Part 1 - SDP

• قسمت 2 سیگنالینگ - ICE (و STUN) Signaling Part 2 - ICE (and STUN)

• ساختار فایل File Structure

• RTC محلی local RTC

• setLocalDescription() setLocalDescription()

• راه اندازی Socket.io و HTTPS Socket.io and HTTPS setup

• لیست وظایف اتصال Connection TaskList

• لیست وظایف اتصال - قسمت 2 Connection TaskList - part 2

• ارائه جدید پیشنهاد emit newOffer

• انتشار iceCandidates Emit iceCandidates

• پیشنهادات موجود و جدید را برای همه مشتریان بارگیری کنید Load existing and new offers on all clients

• پاسخ ایجاد کنید Create answer

• خطا در مدیریت فرآیند سیگنالینگ Error handling the signaling process

• در حال انتشار پاسخ Emitting answer

• گوش دادن به پاسخ و setRemoteDescription (پاسخ) Listening for answer and setRemoteDescription(answer)

• درخواست نامزدهای ICE - قسمت 1 Apply ICE candidates - Part 1

• درخواست نامزدهای ICE - قسمت 2 Apply ICE candidates - Part 2

• اضافه کردن آهنگ از همتا از راه دور - MAGIC! Add tracks from remote peer - MAGIC!!

• بارگیری روی دستگاه دیگری در همان شبکه Loading on another device on the same network

webrtc و React - یک سایت TeleLegal webrtc and React - a TeleLegal site

• نسخه ی نمایشی پروژه Project Demo

• ساختار پروژه و راه اندازی Front-end Project Structure and Front-end Setup

• راه اندازی Back-end Back-end Setup

• ایجاد JWT و پیوند برای شبیه سازی زمان بندی Creating a JWT & link to simulate scheduling

• React-Router را برای قسمت جلویی خود اضافه کنید Add React-Router for our front-end

• مسیر Join-Video را راه اندازی کنید و داده های رمزگشایی شده را در React دریافت کنید Setup Join-Video route and get the decoded data in React

• اجزای شروع را اضافه کنید Add starting components

• redux را سیم کشی کنید و کاهنده وضعیت تماس را ایجاد کنید Wire up redux and make callStatus reducer

• دکمه های اکشن، بوت استرپ و fontawesome را اضافه کنید Add action buttons, bootstrap, and fontawesome

• getUserMedia() و استریم را در redux ذخیره کنید getUserMedia() and store the stream in redux

• peerConnection را ایجاد کنید و آن را در redux ذخیره کنید Create peerConnection and store it in redux

• فکر کردن در مورد اینکه توابع ما به کجا تعلق دارند (و چند رفع اشکال) Thinking through where our functions belong (& a few bug fixes)

• چکیده کردن دکمه های ویدیو و صدا Abstracting the Video and Audio buttons

• افزودن فید ویدیوی محلی Adding the local video feed

• آهنگ های ما را به peerConnection اضافه کنید Add our tracks to the peerConnection

• فید ویدیوی محلی را فعال و غیرفعال (بی صدا) کنید Enable and disable (mute) the local video feed

• نمایش ورودی های ویدیوی محلی (گزینه های دوربین) Display local video inputs (camera options)

• دستگاه ویدیویی جدید را در حالت انتخابی تنظیم کنید Set new video device on select

• ()placeTracks replaceTracks()

• جزء کشویی چکیده Abstract DropDown component

• کامپوننت AudioButton را تنظیم کنید Set up AudioButton component

• دستگاه های ورودی و خروجی صدا را تغییر دهید Switch Audio Input and Output Devices

• شروع، بی صدا، لغو صوت Start, mute, unmute audio

• پیشنهادات را در backEnd سازماندهی کنید و uuid را اضافه کنید Organize offers on backEnd and add uuid

• پس از اشتراک گذاری آهنگ ها ()creativeOffer createOffer() once the tracks are shared

• علامت گذاری داشبورد را برای حرفه ای اضافه کنید Add Dashboard markup for professional

• اختیاری - مروری بر نشانه گذاری Optional - Overview of markup

• احراز هویت حرفه ای Authenticate professional

• بازسازی سوکت socket refactoring

• سازماندهی مجدد داده های قرار Reorganize Appointment Data

• داده های قرار را بکشید Pull Appointment Data

• به پیشنهادات مشتری گوش دهید Listen for offers on the client

• مسیر ویدیویی پیوستن را برای حرفه ای ایجاد کنید Create join video route for professional

• اطلاعات تماس را به صفحه ویدیوی حرفه ای اضافه کنید Add Call Info to Professional Video Page

• پاسخ ایجاد کنید و توضیحات را تنظیم کنید Create Answer and set Descriptions

• فهرست وظایف را مرور کنید و پیشرفت ما را تشویق کنید Review Task List and Cheer for Our Progress

• ارسال پاسخ به سرور Emit Answer Up To Server

• برای پاسخ جدید در مورد مشتری گوش دهید Listen for New Answer On the Client

• ارسال کاندیدهای یخ به سرور Emit Ice Candidates To Server

• کاندیداهای یخ را برای مشتریان ارسال کنید Send Ice Candidates to clients

• نامزدهای یخ را به اتصال همتا اضافه کنید Add Ice Candidates to Peer Connection

• AddTracks و... پیروزی!!! (برنامه آزمایشی) AddTracks and... VICTORY!!! (test app)

• رفع 2 اشکال کوچک Fix 2 small bugs

• HangupButton را وادار به انجام کاری کنید! Make the HangupButton do something!

• ReplaceTracks در تغییر دستگاه ReplaceTracks on change device

استقرار برنامه ما در AWS Deploying Our App To AWS

• ترسیم و توضیح فرآیند Drawing Out And Explaining The Process

• هشدار... این بخش در حال استقرار است، نه WebRTC و ممکن است سخت باشد :) Warning... this section is deploying, not WebRTC and might be hard :)

• راه اندازی یک سرور AWS (امیدوارم) رایگان برای اجرای برنامه ما Setting up a (hopefully) free AWS server to run our app on

• دریافت دامنه و تنظیم آن به سرور ما و نصب آپاچی Getting a Domain &Setting It To Point At Our Server & Install Apache

• کشیدن فایل ها روی سرور ما از github و ساختن React Pulling files onto our server from github and building React

• فایل htaccess و vhost برای سخنرانی بعدی htaccess file and vhost for next lecture

• Vhost - به آپاچی می گوییم که سایت های ما کجا هستند Vhost - Telling Apache Where Our Sites Are

• Reverse Proxy Vhost - برای باطن Reverse Proxy Vhost - For the backend

• HTTPS و پروکسی معکوس Vhost HTTPS and Reverse Proxy Vhost