آموزش بهترین دوره WebRTC - بسیار آموزنده - ۲۰۲۵ - آخرین آپدیت

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

معرفی WebRTC Introduction to WebRTC

• محدودیت‌های HTTP سنتی Traditional HTTP has limitations

• WebRTC - یک معرفی WebRTC - an introduction

• WebRTC نیازمند جاوااسکریپت است WebRTC requires JavaScript

• اولین تماس ویدیویی WebRTC بین فایرفاکس و کروم First WebRTC video call between Firefox and Chrome

• WebRTC تحت نظارت یک مشخصات (W3C) و بسیاری از RFCها است WebRTC is governed by a specification (W3C) and many RFCs

• موارد استفاده WebRTC (برخی از موارد استفاده ممکن است شما را شگفت زده کند) WebRTC use cases (some of the use cases may surprise you)

• کد منبع WebRTC WebRTC source code

• تابع RTCPeerConnection، "new" و 2 جنبه مهم WebRTC The RTCPeerConnection function, "new" and the 2 most important aspects of WebRTC

• راه‌اندازی اتصال WebRTC WebRTC Connection Setup

• اصول WebRTC WebRTC Fundamentals

تئوری WebRTC WebRTC Theory

• دسترسی به دستگاه ویدئویی کاربر (GUM) Accessing a user's video device (GUM)

• استفاده از متد enumerateDevices() برای دسترسی به یک ID دستگاه خاص Using the enumerateDevices() method to access a specific device ID

• نمایش یک جریان رسانه‌ای در داخل تگ <video> Displaying a media stream inside of a <video> tag

• چگونه خود را شناسایی می‌کنید (ipconfig، netstat و IPهای عمومی) How do you identify yourself (ipconfig, netstat and public IPs)

• NAT چیست؟ What is NAT?

• معرفی کاندیداهای HOST و STUN Introduction to HOST and STUN candidates

• گردش کار WebRTC به صورت تصویری WebRTC workflow visualized

• نقش سرورهای ICE The role of ICE servers

• فریم‌ورک Ice چیست و Ice Agent کیست؟ What is the Ice Framework and who is the Ice Agent?

• بررسی شی RTCPeerConnection Examining the RTCPeerConnection object

• معرفی chrome://webrtc-internals و about:webrtc Introduction to chrome://webrtc-internals and about:webrtc

• آیا می‌دانستید؟ Did you know?

• رویداد onicecandidate The onicecandidate event

• ایجاد یک پیشنهاد WebRTC Creating a WebRTC offer

• روش‌های مختلف برای برخورد با Promises و توابع در جاوااسکریپت The different ways to deal with Promises and functions in JavaScript

• WebRTC توسط توضیحات جلسه مدیریت می‌شود WebRTC is managed by session descriptions

• توضیحات جلسه از راه دور Remote session description

• توضیحات جلسه چیست؟ What is a Session Description?

• پروتکل ایجاد جلسه جاوااسکریپت (JSEP) JavaScript Session Establishment Protocol (JSEP)

• استفاده از getTracks() و setTrack() برای افزودن رسانه ویدئویی به اتصال همتا Using getTracks() and setTrack() to add video media to your peer connection

• استفاده از getStats() برای مشاهده گزارش‌های آماری مربوط به اتصال WebRTC Using getStats() to view statistic reports related to the WebRTC connection

• یک OFFER دقیقا چه چیزی را نشان می‌دهد، و چگونه SDP را سفارشی کنیم؟ What exactly does an OFFER indicate, and how to customize the SDP ?

• تولید کاندیداهای HOST ice Generating HOST ice candidates

• گوش دادن به رویداد onnegotiationneeded Listening for the onnegotiationneeded event

• توضیح ویژگی candidate، sdpMid، sdpMLineIndex و غیره Explaining the candidate property, sdpMid, sdpMLineIndex and more

• سرورهای STUN چیست What are STUN servers

• اطلاعات بیشتر درباره STUN More about STUN

• افزودن تنظیمات STUN به شی RTCPeerConnection Adding STUN configurations to our RTCPeerConnection object

• استفاده از Wireshark برای تجزیه و تحلیل درخواست و پاسخ STUN Using Wireshark to analyze a STUN request and response

• چرا STUN گاهی اوقات با شکست مواجه می‌شود؟ Why does STUN sometimes fail?

• سرورهای TURN چیست What are TURN servers

• سرور سیگنالینگ و انواع مختلف (SIP، XMPP، WebSockets، AJAX و غیره) Signaling server and the different types (SIP, XMPP, WebSockets, AJAX, etc)

• کد خود را بیش از حد پیچیده نکنید Don't over complicate your code

• مرور کلی اتصال مفصل WebRTC WebRTC Detailed Connection Overview

• آخرین مرحله - بررسی‌های اتصال The final step - connectivity checks

• فایل‌های کدنویسی و تصویر نمودار Coding files and diagram image

• زیرساخت WebRTC WebRTC Infrastructure

آماده‌سازی محیط و راه‌اندازی سرور Node Prepare environment and set up Node Server

• چه کسی باید این بخش را انجام دهد؟ Who should do this section?

• مرور کلی HTML HTML overview

• راه‌اندازی پوشه‌ها، اسکریپت، ماژول‌ها و محاسبه یک ID منحصر به فرد Setting up folders, script, modules, and calculating a unique ID

• تعریف وضعیت در فرانت‌اند و setters Defining state on the frontend, and setters

• استفاده از جاوااسکریپت برای فعال کردن modal Using JavaScript to enable the modal

• بستن modal با افزودن یک event listener روی شی window Closing the modal by adding an event listener on the window object

• بهبود نام‌گذاری عنصر modal و حذف کلاس hidden Improving the naming of our modal element, and removing the hidden class

• کد سرور - شروع یک پروژه Node و نصب وابستگی‌ها Server Code - initiating a Node project and installing dependencies

• راه‌اندازی سرور HTTP Node و ارائه فایل‌های فرانت‌اند Spinning up Node's HTTP server, and serving the frontend files

• نصب Nodemon و تنظیم اسکریپت "start" Installing Nodemon, and setting up a "start" script

• گوش دادن به اتصال WebSocket و استخراج پارامترهای query Listening for a WebSocket connection, and extracting query parameters

• ایجاد وضعیت سرور برای کاربران متصل Creating server state for connected users

• شروع یک درخواست WebSocket در سمت کلاینت با استفاده از API بومی WebSocket Initiating a WebSocket request on the client side using the native WebSocket API

• سمت سرور - منطق قطع اتصال و مدیریت‌کننده رویداد پیام Server side - disconnection logic and message event handler

• سمت کلاینت - به‌روزرسانی وضعیت و ثبت event listenerهای WebSocket Client side - updating state and registering WebSocket event listeners

• سمت کلاینت - تعریف یک logger سفارشی Client side - define a custom logger

• سمت کلاینت - تعریف یک فایل ثابت و تست logger سفارشی Client side - defining a constants file and testing custom logger

• سمت کلاینت - تعریف event listenerهای فرانت‌اند WebSocket Client side - defining WebSocket frontend event listeners

• تعریف یک getter برای شی وضعیت Defining a getter for our state object

• آزمون راه‌اندازی محیط Environment Setup Quiz

پیاده‌سازی منطق اتصال به اتاق قبل از WebRTC Implement room connection logic before WebRTC

• چه کسی باید این بخش را انجام دهد؟ Who needs to do this section?

• ایجاد اتاق - تنظیم event listener کلیک فرانت‌اند Create Room - set up frontend click event listener

• ایجاد اتاق - ارسال یک درخواست POST AJAX Fetch به سرور Create Room - send a POST AJAX Fetch request to the server

• ایجاد اتاق - پردازش chunks در سرور و استخراج req body Create Room - process chunks on the server and extract the req body

• ایجاد اتاق - ارسال یک پاسخ از سرور به کلاینت Create Room - send back a response from the server, to the client

• ایجاد اتاق - برخورد با پاسخ سرور در فرانت‌اند Create Room - dealing with the server response on the frontend

• ایجاد اتاق - به‌روزرسانی رابط کاربری برای ایجادکننده یک اتاق Create Room - updating the user interface for the creator of a room

• افزودن یک رویداد keypress و بهبود کد Adding a keypress event, and improving code

• رفع باگ (اسپویل: کلمه کلیدی "return" است) Fixing the bug (spoiler alert: its the "return" keyword)

• حذف اتاق - ارسال یک POST AJAX Fetch برای حذف یک اتاق Destroy Room - sending a POST AJAX Fetch to destroy a room

• حذف اتاق - منطق سرور برای حذف یک اتاق قبل از اینکه peer2 ملحق شود Destroy Room - server logic to destroy a room before peer2 has joined

• حذف اتاق - پایان دادن به منطق در فرانت‌اند Destroy Room - finishing logic on the frontend

• افزودن منطق سرور برای حذف یک اتاق زمانی که یک کاربر قطع می‌شود Adding server logic for removing a room when a user disconnects

• رفع خطا Fixing error

• رفع خطای favicon با استفاده از طرح URI داده Fixing the favicon error by using the data URI scheme

• پیوستن به اتاق - ارسال یک درخواست پیوستن WebSocket Join Room - sending a WebSocket join request

• پیوستن به اتاق - تنظیم دستورات switch برای مسیریابی درخواست‌های مختلف Join Room - setting up switch statements to route different requests

• پیوستن به اتاق - بررسی اینکه آیا اتاق وجود دارد یا خیر، و اگر وجود ندارد، ارسال یک پیام خطا Join Room - check whether the room exists, and if not, send a failure message

• تعریف یک تابع ارسال WebSocket عمومی (همچنین برای WebRTC استفاده می‌شود) Define a generic WebSocket send function (also used for WebRTC)

• پیوستن به اتاق - بررسی اینکه آیا اتاق پر است یا خیر، و اگر چنین است، ارسال یک پیام خطا Join Room - check whether the room is full, and if so, send a failure message

• پیوستن به اتاق - ارسال یک پاسخ موفقیت‌آمیز و پیام اطلاع‌رسانی Join Room - sending a successful response and notification message

• پیوستن به اتاق - تنظیم دستورات switch برای رسیدگی به پیام‌های ورودی WebSocket Join Room - setting up switch statements to handle incoming WebSocket messages

• پیوستن به اتاق - تعریف منطق موفقیت در فرانت‌اند Join Room - defining success logic on the frontend

• پیوستن به اتاق - اطلاع‌رسانی به کاربر دیگر که یک همتا به اتاق آن‌ها ملحق شده است Join Room - notifying the other user that a peer has joined their room

• پیوستن به اتاق - رفع خطا و به‌روزرسانی ظرف پیام Join Room - fixing error and updating the message container

• خروج از اتاق - ارسال یک پیام WebSocket برای خروج از یک اتاق Exit Room - sending a WebSocket message to exit a room

• خروج از اتاق - پردازش درخواست خروج در سرور WebSocket Exit Room - process the exit request on the WebSocket server

• خروج از اتاق - رسیدگی به پاسخ از سرور Exit Room - handling the response from the server

• تست برنامه Testing the application

• افزودن منطق قطع اتصال در سرور Add disconnection logic on the server

• افزودن منطق قطع اتصال در فرانت‌اند Add disconnection logic on the frontend

• لمس‌های نهایی و فایل‌های منبع Final touch-ups and source files

• منطق پروژه قبل از WebRTC Project logic prior to WebRTC

استفاده از WebRTC برای ایجاد یک اتصال همتا به همتا مستقیم Use WebRTC to establish a direct peer-to-peer connection

• خلاصه فرآیند WebRTC و فایل .md WebRTC process recap and .md file

• مرحله 1 - تنظیم سرورهای پیکربندی STUN STAGE 1 - setting up STUN configuration servers

• راه‌اندازی فرآیند WebRTC Triggering the WebRTC process

• به‌روزرسانی UI و نمایش دکمه‌ها Updating UI and displaying buttons

• ایجاد یک شی اتصال همتا Creating a peer connection object

• event listenerهای connectionstatechange و signalingstatechange The connectionstatechange and signalingstatechange event listeners

• تکمیل منطق مدیریت‌کننده رویداد Completing event handler logic

• به‌روزرسانی UI پس از اینکه یک کاربر روی یک دکمه کلیک می‌کند Updating UI after a user clicks a button

• تست کد ما Testing our code

• راه‌اندازی یک تابع برای ایجاد یک کانال داده Trigger a function to create a Data Channel

• مروری بر کانال داده WebRTC WebRTC Data Channel Overview

• ایجاد یک کانال داده WebRTC و تنظیم event listener ondatachannel Creating a WebRTC data channel, and setting up ondatachannel event listener

• تست و مشاهده webrtc-internals کروم Testing and viewing Chrome's webrtc-internals

• ایجاد یک پیشنهاد WebRTC Creating a WebRTC offer

• تنظیم شرح محلی و گوش دادن به کاندیداهای ice Set local description and listen for ice candidates

• تست تولید ice Testing ice generation

• تنظیم تابع برای ارسال یک پیشنهاد Setting up function to send an offer

• ارسال یک پیشنهاد به سرور سیگنالینگ (پایان مرحله 1) Sending an offer to the signaling server (end of Stage 1)

• مرحله 2 آغاز می‌شود - تنظیم مسیرهای تابع و ارسال پیشنهاد به PEER2 Stage 2 - setting up function routes, and sending offer to PEER2

• مرحله 3 آغاز می‌شود - دریافت یک پیشنهاد توسط PEER2 Stage 3 beings - PEER2 receiving an offer

• رفع یک باگ و تأیید اینکه PEER2 پیشنهاد را دریافت کرده است Fixing a bug, and confirming that PEER2 has received the offer

• نمایش دکمه‌های PEER2 Showing PEER2 buttons

• ایجاد شی اتصال همتای PEER2 Create PEER2's peer connection object

• ثبت رویداد ondatachannel روی شی pc PEER2 Registering the ondatachannel event on PEER2's pc object

• Timeout - مشاهده listener ondatachannel در شی pc Timeout - viewing the ondatachannel listener on the pc object

• تنظیم توضیحات از راه دور با پیشنهاد PEER1 Set remote description with PEER1's offer

• ایجاد پاسخ WebRTC و تنظیم شرح جلسه محلی با آن پاسخ Create WebRTC answer, and set local session description with that answer

• بهینه‌سازی‌ها Touchups

• ارسال پاسخ WebRTC به سرور سیگنالینگ Send WebRTC answer to signaling server

• ارسال کاندیداهای ice به سرور سیگنالینگ Send ice candidates to signaling server

• مرحله 4 آغاز می‌شود - سرور دریافت پاسخ و کاندیداهای ice Stage 4 beginnings - server receiving answer and ice candidates

• ایجاد یک تابع پیام‌رسانی سیگنالینگ عمومی برای پیام‌های WebRTC Creating a generic signaling message function for WebRTC messages

• با کمی فکر ... On second thoughts ...

• مرحله 5 آغاز می‌شود - PEER1 دریافت پاسخ و کاندیداهای ice Stage 5 beginnings - PEER1 receiving an answer and ice candidates

• Timeout - تست کد Timeout - testing code

• ارسال کاندیداهای ice به PEER2 Sending ice candidates to PEER2

• رسیدگی به کاندیداهای ice دریافت شده Handle ice candidates received

• کاندیداهای Ice و شرح از راه دور Ice candidates and the remote desription

• تنظیم شرح از راه دور با پاسخ و حلقه زدن از طریق بافر ice Setting remote description with the answer, and looping through ice buffer

• نقطه عطف - تست اتصال WebRTC MILESTONE - testing the WebRTC connection

• به‌روزرسانی UI و نمایش عناصر ورودی پیام Update UI and show message input elements

• افزودن پیام‌های خروجی به UI فرستنده Add outgoing messages to the sender's UI

• ارسال یک پیام در یک کانال داده WebRTC Sending a message on a WebRTC Data Channel

• گوش دادن به پیام‌های ورودی در dataChannel و به‌روزرسانی UI Listen for incoming messages on the dataChannel, and update UI

• بستن یک اتصال همتا و کانال داده هنگام خروج از یک اتاق Closing a peer connection and data channel when exiting a room

• تست بسته شدن WebRTC برای کاربری که از اتاق خارج می‌شود Testing WebRTC closure for the user exiting the room

• چرا تنظیم یک متغیر روی null به جمع‌آوری زباله کمک می‌کند؟ Why does setting a variable to null, help with garbage collection?

• بستن یک کانال داده Closing a Data Channel

• استفاده از webrtc-internals برای تجزیه و تحلیل کل فرآیند WebRTC Using webrtc-internals to analyze the entire WebRTC process

• بستن اتصال همتای دوم Closing the second peer's connection

• بستن یک اتصال همتا Closing a Peer Connection

• WebRTC می‌تواند بدون سرور کار کند WebRTC can work without the server

• اگرچه WebRTC می‌تواند بدون سرور کار کند، اما به طور کلی هنوز به یک سرور نیاز دارید Although WebRTC can work without a server, generally you still need a server

• تجزیه و تحلیل WebRTC در Wireshark Analyzing WebRTC in Wireshark

• گواهی‌ها Certificates

• ویژگی SCTP شی pc SCTP property of the pc object

• تمام شد! Done and dusted!

تست WebRTC WebRTC Test

• تست استاد بزرگ WebRTC WebRTC Grandmaster Test

پایان Outro

• بعد به کجا؟ Where to next?