آموزش تسلط بر WebRTC: ارتباطات بلادرنگ با جاوااسکریپت - آخرین آپدیت

مقدمه‌ای بر WebRTC Introduction to WebRTC

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

• معرفی WebRTC WebRTC - an introduction

• اولین تماس ویدئویی WebRTC بین Firefox و Chrome 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 و دو جنبه بسیار مهم WebRTC The RTCPeerConnection function, "new" and the 2 most important aspects of WebRTC

تئوری WebRTC WebRTC Theory

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

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

• نمایش جریان رسانه‌ای در تگ video Displaying a media stream inside of a 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 چیست و 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

• رویداد onicecandidate The onicecandidate event

• ایجاد یک Offer در WebRTC Creating a WebRTC offer

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

• مدیریت WebRTC توسط توضیحات نشست (Session Descriptions) WebRTC is managed by session descriptions

• توضیحات نشست از راه دور (Remote Session Description) Remote 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 به شیء 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

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

• بررسی دقیق اتصال WebRTC WebRTC Detailed Connection Overview

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

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

• مروری بر HTML HTML overview

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

• تعریف وضعیت در فرانت‌اند و Setterها 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

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

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

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

• ایجاد اتاق: پردازش Chunkها در سرور و استخراج بدنه درخواست 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: it's the "return" keyword)

• تخریب اتاق: ارسال POST AJAX Fetch برای تخریب اتاق Destroy Room - sending a POST AJAX Fetch to destroy a room

• تخریب اتاق: منطق سرور برای تخریب اتاق قبل از پیوستن کاربر دوم 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 با استفاده از طرح data URI Fixing the favicon error by using the data URI scheme

• پیوستن به اتاق: ارسال درخواست Join از طریق 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 برای برقراری اتصال مستقیم همتا به همتا Use WebRTC to establish a direct peer-to-peer connection

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

• مرحله ۱: راه‌اندازی سرورهای تنظیمات STUN STAGE 1 - setting up STUN configuration servers

• فعال‌سازی فرآیند WebRTC Triggering the WebRTC process

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

• ایجاد شیء اتصال همتا (Peer Connection) 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

• اجرای تابع برای ایجاد یک Data Channel Trigger a function to create a Data Channel

• مروری بر WebRTC Data Channel WebRTC Data Channel Overview

• ایجاد یک Data Channel در WebRTC و تنظیم Event Listener ondatachannel Creating a WebRTC data channel, and setting up ondatachannel event listener

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

• ایجاد یک Offer در WebRTC Creating a WebRTC offer

• تنظیم Local Description و گوش دادن به کاندیداهای ICE Set local description and listen for ice candidates

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

• راه‌اندازی تابع ارسال Offer Setting up function to send an offer

• ارسال Offer به سرور Signaling (پایان مرحله ۱) Sending an offer to the signaling server (end of Stage 1)

• مرحله ۲: تنظیم مسیرهای تابع و ارسال Offer به کاربر دوم Stage 2 - setting up function routes, and sending offer to PEER2

• شروع مرحله ۳: دریافت Offer توسط کاربر دوم Stage 3 begins - PEER2 receiving an offer

• رفع باگ و تایید دریافت Offer توسط کاربر دوم Fixing a bug, and confirming that PEER2 has received the offer

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

• ایجاد شیء اتصال همتا برای کاربر دوم Create PEER2's peer connection object

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

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

• تنظیم Remote Description با Offer کاربر اول Set remote description with PEER1's offer

• ایجاد WebRTC Answer و تنظیم Local Session Description با آن پاسخ Create WebRTC answer, and set local session description with that answer

• بهبودهای نهایی Touchups

• ارسال WebRTC Answer به سرور Signaling Send WebRTC answer to signaling server

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

• شروع مرحله ۴: دریافت پاسخ و کاندیداهای ICE توسط سرور Stage 4 begins - server receiving answer and ice candidates

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

• شروع مرحله ۵: دریافت پاسخ و کاندیداهای ICE توسط کاربر اول Stage 5 begins - PEER1 receiving an answer and ice candidates

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

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

• مدیریت کاندیداهای ICE دریافت شده Handle ice candidates received

• تنظیم Remote Description با پاسخ و پیمایش در بافر 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 Data Channel Sending a message on a WebRTC Data Channel

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

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

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

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

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

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

• تحلیل WebRTC در Wireshark Analyzing WebRTC in Wireshark