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

В этом видео рассмотрим, как настроить стриминг видеопотока с помощью WebRTC — без серверов, проброса портов или сложных конфигураций. Вы узнаете: ✅ Что такое WebRTC и как оно работает ✅ Как создать стрим между браузерами без бэкенда ✅ Как подключить WebSocket для автоматического обмена сигналами ✅ Как реализовать двустороннюю трансляцию Всё на практике: на HTML, JS и с использованием SimplePeer. Исходный код находится здесь:
Таймкоды: 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 ​