Скачать или смотреть Как стримить видео без серверов: WebRTC на практике

В этом видео рассмотрим, как настроить стриминг видеопотока с помощью WebRTC — без серверов, проброса портов или сложных конфигураций.

Вы узнаете:
✅ Что такое WebRTC и как оно работает
✅ Как создать стрим между браузерами без бэкенда
✅ Как подключить WebSocket для автоматического обмена сигналами
✅ Как реализовать двустороннюю трансляцию

Всё на практике: на HTML, JS и с использованием SimplePeer.

Исходный код находится здесь:
https://github.com/easy-linux/Vanilla...

Таймкоды:
00:00 — Введение и что такое WebRTC
00:28 — Примеры использования и преимущества
00:51 — Демонстрация без серверов и NAT
01:15 — Архитектура проекта: Vite, HTML-файлы
02:34 — Сборка проекта и запуск сервера
02:58 — Пример peer-to-peer соединения без сервера
03:35 — Настройка стримера и выбор источника
04:23 — Отправка сигнала от стримера
05:04 — Подключение Viewer вручную
05:43 — Двусторонняя трансляция с двумя вкладками
07:27 — Ошибки при подключении и их устранение
08:56 — Пример полноценной двусторонней трансляции
09:25 — Обмен сигналами: вручную и через WebSocket
10:00 — Анализ примера Simple HTML + JS
11:01 — Создание стримера и вьювера с SimplePeer
12:10 — События и логика peer-соединения
13:24 — Обработка сигналов, получение стрима
14:24 — Viewer: получение сигнала и подключение
15:16 — Итог: как P2P соединение работает
15:50 — Пример использования WebSocket-сервера
16:45 — Демонстрация подключения через WebSocket
17:35 — Как WebSocket автоматизирует обмен сигналами
18:12 — Обработка протоколов и подключение к WebSocket
19:29 — Автоматическое определение адреса
19:59 — Многопользовательская поддержка: несколько клиентов
20:58 — Отправка сигналов через WebSocket
21:57 — Обработка событий и сообщений WebSocket
22:20 — Viewer: реакция на сигналы от стримера
23:43 — Универсальная функция createPeer
24:27 — Заключение: WebRTC с SimplePeer в браузере

🔔 Подписывайтесь на канал, чтобы не пропустить новые видео
💎 Сериал "Создание SPA приложения на чистом JS":
   • SPA приложение на чистом JS - часть 1 #eas...  

💎 Полезные видео для лучшего понимания JS:
Стрелочные функции 1 -    • Стрелочные функции | Arrow functions  
Стрелочные функции 2 -    • Особенности стрелочных функций  #easyit #n...  
Макро и микро задачи -    • Макро и Микро задачи в JavaScript  #easyit...  
Web worker -    • Web worker  - как распараллелить вычислени...  
Service worker -    • Service worker  - управление обработкой за...  
Debouncing/throttling -    • Debouncing/Throttling - разгрузка обработч...  

💎 Видео по работе с vite.js:
   • Знакомимся с Vitejs. Портирование проекта,...  

💎 Полезные видео по настройке webpack:
Минимальная конфигурация -    • Настраиваем сборку проекта с помощью webpack  
Настройка горячей перезагрузки -    • Webpack 5 Настройка горячей перезагрузки |...  
Настройка сборки проекта с подгрузкой файлов css/scss/изображений -    • Webpack 5 Настройка сборки проекта с подгр...  
Настройка сборки мультистраничного сайта -    • Пример конфигурации сборки мульти-страничн...  

💎 Самый простой способ установить nodejs на Linux и Mac:
   • Установка Nodejs на Linux и MacOS.  

#easyit #javascript #js #vanillajs @EasyITChannel ​