Skip to content

Mastering webRTC - make a video chat app

  • 01. Введение

001 - Что такое WebRTC и что он делает
002 - Получение базы кода для конкретного видео
003 - Как я пишу код
004 - Почему я использую WebRTC вместо SDK (например, Zoom)
  • 02. Базовый проект

005 - Настройка файлов проекта
006 - getUserMedia - с чего всё начинается
007 - Воспроизведение потока, getTracks() и MediaStreamTracks
008 - Несколько обновлений UI
009 - Обзор ограничений
010 - Изменение разрешения, частоты кадров, соотношения сторон
011 - Запись потока - MediaRecorder и WebRTC
012 - Обновление кнопок
013 - Захват экрана
014 - Получение доступных входных-выходных устройств - Часть 1
015 - Загрузка параметров входных-выходных устройств - Часть 2
  • 03. Потоковое видео (peer-to-peer)

016 - Демонстрация и обзор раздела
017 - rtcPeerConnection и сигнализация
018 - Сигнализация - SDP
019 - Сигнализация - ICE (и STUN)
020 - Структура файлов
021 - Локальное RTC
022 - setLocalDescription()
023 - Настройка Socket.io и HTTPS
024 - Список задач подключения - Часть 1
025 - Список задач подключения - Часть 2
026 - emit newOffer
027 - Emit iceCandidates
028 - Загрузка существующих и новых предложений
029 - Создание ответа
030 - Обработка ошибок в процессе сигнализации
031 - Отправка ответа
032 - Прослушивание ответа и setRemoteDescription(answer)
033 - Применение ICE кандидатов - Часть 1
034 - Применение ICE кандидатов - Часть 2
035 - Добавление треков от удалённого пира
036 - Загрузка на другое устройство в той же сети
  • 04. Обзор процесса WebRTC

037 - Процесс на доске
038 - Обзор кода
  • 05. Проект TeleLegal - React

039 - Демонстрация проекта
040 - Структура проекта и настройка фронтенда
041 - Настройка бэкенда
042 - Создание JWT и ссылка для имитации планирования
043 - Добавление React-Router для фронтенда
044 - Настройка маршрута и получение декодированных данных
045 - Добавление стартовых компонентов
046 - Подключение redux и создание reducer для состояния звонка
047 - Добавление кнопок действий, bootstrap и fontawesome
048 - getUserMedia() и сохранение потока в redux
049 - Создание peerConnection и сохранение его в redux
050 - Размышления о том, где должны располагаться наши функции
051 - Добавление локального видеопотока
052 - Добавление наших треков в peerConnection
053 - Включение и отключение локального видеопотока
054 - Отображение входных видеоустройств (опции камеры)
055 - Установка нового видеоустройства
056 - replaceTracks()
057 - Абстрактный компонент DropDown
058 - Настройка компонента AudioButton
059 - Переключение входных и выходных аудио устройств
060 - Запуск, отключение и включение аудио
061 - Организация предложений на бэкенде и добавление uuid
062 - createOffer() после того как треки переданы
063 - Добавление разметки Dashboard для профессионала
064 - Обзор разметки
065 - Аутентификация
066 - Рефакторинг socket
067 - Реструктуризация данных назначения
068 - Извлечение данных назначения
069 - Прослушивание предложений на клиенте
070 - Создание маршрута join video
071 - Добавление информации о звонке на страницу видео
072 - Создание ответа и установка описаний
073 - Обзор списка задач
074 - Отправка ответа на сервер
075 - Прослушивание нового ответа на клиенте
076 - Отправка ICE кандидатов на сервер
077 - Отправка ICE кандидатов клиентам
078 - Добавление ICE кандидатов в peerConnection
079 - AddTracks и тестовое приложение
080 - Исправление ошибок
081 - Сделать так, чтобы HangupButton что-то делал
082 - ReplaceTracks при смене устройства
083 - Активация кнопок видео и аудио
  • 06. Развертывание приложения на AWS

084 - Рисуем и объясняем процесс
085 - Настройка AWS сервера для запуска нашего приложения
086 - Получение домена и настройка сервера
087 - Загрузка файлов на сервер с github и сборка React
088 - Vhost - Указание Apache, где находятся наши сайты
089 - HTTPS и обратный прокси Vhost
  • 07. Заключение

090 - Масштабирование WebRTC