Это не руководство, а краткое руководство по созданию приложения для текстового, аудио и видео чата.

Если вы, как и я, ленивый читатель, вы можете сразу получить исходный код здесь.

Мы разделим эту тему на три подтемы и рассмотрим основные части каждой подтемы:

  1. Дизайн страницы
  2. Настройка сервера сигнализации с использованием Ratchet, библиотеки веб-сокетов PHP
  3. WebRTC

Дизайн страницы

Поскольку наше коммуникационное приложение будет содержать текст, аудио и видео способ общения, нам нужно спроектировать нашу страницу так, чтобы она соответствовала трем.

Чтобы ускорить дизайн страницы (я отстой в пользовательском интерфейсе), я получил код панели чата HTML и CSS на Bootsnip и немного изменил его в соответствии с моими потребностями.

Для звонков нам понадобится как минимум три кнопки:

  1. Одна кнопка для вызова видео (включая аудио)
  2. Другой - для вызова только аудио
  3. Последняя кнопка для завершения вызова

В дополнение к кнопкам и панели чата нам нужны два HTML-тега видео для отображения как локального, так и удаленного потоков. Удаленный поток был разработан для отображения в полноэкранном режиме, в то время как локальный поток был расположен в правом нижнем углу экрана (на средних и больших экранах) и скрыт на экранах меньшего размера (по понятным причинам).

Настройка сервера сигнализации с использованием Ratchet, библиотеки веб-сокетов PHP

По информации официального сайта:

Ratchet - это слабо связанная библиотека PHP, предоставляющая разработчикам инструменты для создания двунаправленных приложений в реальном времени между клиентами и серверами через WebSockets.

По сути, это библиотека веб-сокетов, написанная на PHP. Если вы не знакомы с веб-сокетами, этот учебник станет хорошим началом.

В нашем приложении Ratchet служит для следующих целей:

  1. Обмен текстовыми сообщениями. С помощью Ratchet мы можем отправлять данные с сервера клиенту без каких-либо действий со стороны (принимающего) клиента и наоборот. Благодаря этому текстовое общение между пользователями осуществлялось только с помощью Ratchet. Это более надежно для передачи общих данных, чем RTCDataChannel API webRTC. Сообщение пользователя A (отправителя) отправляется на сервер через веб-сокет (на стороне клиента), и такое же сообщение отправляется пользователю B (получателю) через веб-сокет (на стороне сервера). При этом от пользователей не требуется ничего делать, чтобы получать сообщения, предназначенные для них.
  2. Обмен информацией между двумя пользователями, чтобы они могли общаться с помощью webRTC: чтобы два устройства могли подключаться через webRTC, им необходимо обмениваться некоторой информацией друг с другом. Эта информация была передана с помощью Ratchet (как указано выше). После того, как эта информация будет разделена между устройствами, потоковое аудио и видео между пользователями будет осуществляться исключительно через webRTC.
  3. Используется для определения того, когда пользователь печатает, и информирования другого пользователя.
  4. Используется для определения онлайн / офлайн-статуса пользователей.
  5. Используется для уведомления пользователей, когда пользователь звонит, когда звонок был завершен или получен пользователем.

WebRTC

Это webRTC. Хотел бы я резюмировать, что такое webRTC, но я считаю, что ссылки будет более чем достаточно.

Вот и все.

Краткое изложение основных функций:

  1. Текстовое общение
  2. Аудио-аудио связь
  3. Аудио-видео связь
  4. Видео-видео общение
  5. Уведомление в режиме реального времени о статусе удаленного / партнера онлайн и офлайн
  6. Уведомление, когда удаленный вводит текст
  7. Общее время, проведенное в «комнате» (не продолжительность разговора)
  8. Набор и окончание разговоров
  9. Генерация нескольких комнат

В версию, которую я недавно сделал для клиента, было добавлено несколько дополнений. К ним относятся следующие, поскольку пользователи должны войти в систему, чтобы использовать приложение:

  1. Пользователи могут отправлять тексты с другого устройства и следить за тем, чтобы они отражались на всех их подключенных устройствах.
  2. Пользователи получают предупреждение, когда они вводят текст на другом устройстве.
  3. Пользователи получают предупреждение, когда они подключаются к другому устройству / браузеру.

Следующие будут хорошими дополнениями:

  1. Совместное использование файлов через webSocket (желательно) или RTCDataChannel API webRTC. Этого можно добиться, загрузив файл на сервер с помощью AJAX и отправив ссылку другому пользователю через веб-сокет. Может потребоваться определение типа файла.
  2. Переключение между потоковым аудио и видео во время разговора.

Вот и все. Полный исходный код доступен на github. Вы можете скачать и протестировать на своем локальном сервере.

Вы можете посмотреть демо здесь.