Skip to content

WebRTC Practical Course. Create Video Chat Application

  • 01. Презентация приложения

001 - Предпросмотр курса
002 - Технологический стек и введение
003 - Предпросмотр приложения - Прямые видеозвонки
004 - Предпросмотр приложения - Мессенджер
005 - Предпросмотр приложения - Случайные собеседники
006 - Теория - Что такое WebRTC
007 - Теория - Что такое сигнальный сервер
008 - Теория - Что такое STUN-сервер
009 - Теория - Что такое TURN-сервер
010 - Теория - Что такое SDP
011 - Теория - Что такое ICE-кандидаты
012 - Теория - Как установить прямое соединение между участниками
  • 02. Среда и сервер

013 - Инициализация сервера
014 - Добавление nodemon для отслеживания изменений
015 - Подключение нашего сервера к Socket.IO
016 - Подключение к Socket.IO со стороны клиента
017 - Хранение массива подключённых пользователей на сервере
  • 03. Создание фронтенда

018 - Импорт файлов в проект и создание основного предпросмотра
019 - Создание контейнера для личного кода
020 - Создание поля ввода личного кода и кнопок подключения
021 - Создание кнопок для подключения со случайным собеседником
022 - Добавление чекбокса для случайных подключений
023 - Исправление стилей панели и добавление блокировки дашборда
024 - Создание контейнера звонка и удалённого видео
025 - Добавление предпросмотра локального видео
026 - Создание кнопок для общения
027 - Создание кнопки завершения соединения
028 - Создание кнопок и панели записи
029 - Добавление поля для нового сообщения и кнопки
  • 04. Подготовка логики приложения

030 - Управление состоянием
031 - Обновление кода
032 - Функционал кнопки копирования
033 - Код для отправки запроса на вызов
034 - Отправка запроса на вызов на сервер
035 - Отправка запроса на вызов вызываемому пользователю
036 - Исправление ошибки с запросом на вызов
037 - Обработка запроса на вызов
038 - Создание диалога входящего звонка
039 - Отображение диалога вызова
040 - Решение проблемы с отсутствием запроса
041 - Создание диалога вызова на стороне вызывающего
042 - Отправка ответа на запрос вызова вызывающему
043 - Обработка ответа на запрос вызова
044 - Отображение диалога ответа, если вызов невозможен
045 - Интерфейс, связанный с типом вызова
046 - Установка положения элемента удалённого видео
  • 05. WebRTC-соединение

047 - Получение доступа к камере и микрофону
048 - Создание соединения
049 - Отправка WebRTC-предложения
050 - Тестирование WebRTC-предложения
051 - Подготовка WebRTC-ответа
052 - Обмен ICE-кандидатами
053 - Добавление функционала для микрофона и камеры
054 - Реализация функции демонстрации экрана
055 - Возврат обратно к камере
  • 06. WebRTC-каналы данных

056 - Создание канала данных
057 - Отправка сообщений через канал данных
058 - Отображение сообщений
  • 07. MediaRecorder API

059 - Создание утилит для записи
060 - Подключение утилит записи к кнопкам
061 - Приостановка и возобновление записи
  • 08. Завершение приложения

062 - Подготовка логики завершения звонка
063 - Завершение звонка с подключённым пользователем
064 - Завершение соединения
065 - Подготовка состояний вызова
066 - Завершение состояний вызова
067 - Исправление ошибки состояния вызова
068 - Добавление возможности завершить звонок из диалога вызова
069 - Разрешить соединения со случайными пользователями
070 - Хранение списка пользователей
071 - Получение socket-id случайного пользователя
072 - Ошибка при получении случайного socket-id
073 - Подключение к случайному собеседнику
074 - Отображение интерфейса в зависимости от типа вызова
075 - Добавление уведомления, если нет случайных собеседников
  • 09. Развёртывание приложения

076 - Деплой приложения на Heroku