Это не руководство, а краткое руководство по созданию приложения для текстового, аудио и видео чата.
Если вы, как и я, ленивый читатель, вы можете сразу получить исходный код здесь.
Мы разделим эту тему на три подтемы и рассмотрим основные части каждой подтемы:
- Дизайн страницы
- Настройка сервера сигнализации с использованием Ratchet, библиотеки веб-сокетов PHP
- WebRTC
Дизайн страницы
Поскольку наше коммуникационное приложение будет содержать текст, аудио и видео способ общения, нам нужно спроектировать нашу страницу так, чтобы она соответствовала трем.
Чтобы ускорить дизайн страницы (я отстой в пользовательском интерфейсе), я получил код панели чата HTML и CSS на Bootsnip и немного изменил его в соответствии с моими потребностями.
Для звонков нам понадобится как минимум три кнопки:
- Одна кнопка для вызова видео (включая аудио)
- Другой - для вызова только аудио
- Последняя кнопка для завершения вызова
В дополнение к кнопкам и панели чата нам нужны два HTML-тега видео для отображения как локального, так и удаленного потоков. Удаленный поток был разработан для отображения в полноэкранном режиме, в то время как локальный поток был расположен в правом нижнем углу экрана (на средних и больших экранах) и скрыт на экранах меньшего размера (по понятным причинам).
Настройка сервера сигнализации с использованием Ratchet, библиотеки веб-сокетов PHP
По информации официального сайта:
Ratchet - это слабо связанная библиотека PHP, предоставляющая разработчикам инструменты для создания двунаправленных приложений в реальном времени между клиентами и серверами через WebSockets.
По сути, это библиотека веб-сокетов, написанная на PHP. Если вы не знакомы с веб-сокетами, этот учебник станет хорошим началом.
В нашем приложении Ratchet служит для следующих целей:
- Обмен текстовыми сообщениями. С помощью Ratchet мы можем отправлять данные с сервера клиенту без каких-либо действий со стороны (принимающего) клиента и наоборот. Благодаря этому текстовое общение между пользователями осуществлялось только с помощью Ratchet. Это более надежно для передачи общих данных, чем RTCDataChannel API webRTC. Сообщение пользователя A (отправителя) отправляется на сервер через веб-сокет (на стороне клиента), и такое же сообщение отправляется пользователю B (получателю) через веб-сокет (на стороне сервера). При этом от пользователей не требуется ничего делать, чтобы получать сообщения, предназначенные для них.
- Обмен информацией между двумя пользователями, чтобы они могли общаться с помощью webRTC: чтобы два устройства могли подключаться через webRTC, им необходимо обмениваться некоторой информацией друг с другом. Эта информация была передана с помощью Ratchet (как указано выше). После того, как эта информация будет разделена между устройствами, потоковое аудио и видео между пользователями будет осуществляться исключительно через webRTC.
- Используется для определения того, когда пользователь печатает, и информирования другого пользователя.
- Используется для определения онлайн / офлайн-статуса пользователей.
- Используется для уведомления пользователей, когда пользователь звонит, когда звонок был завершен или получен пользователем.
WebRTC
Это webRTC. Хотел бы я резюмировать, что такое webRTC, но я считаю, что ссылки будет более чем достаточно.
Вот и все.
Краткое изложение основных функций:
- Текстовое общение
- Аудио-аудио связь
- Аудио-видео связь
- Видео-видео общение
- Уведомление в режиме реального времени о статусе удаленного / партнера онлайн и офлайн
- Уведомление, когда удаленный вводит текст
- Общее время, проведенное в «комнате» (не продолжительность разговора)
- Набор и окончание разговоров
- Генерация нескольких комнат
В версию, которую я недавно сделал для клиента, было добавлено несколько дополнений. К ним относятся следующие, поскольку пользователи должны войти в систему, чтобы использовать приложение:
- Пользователи могут отправлять тексты с другого устройства и следить за тем, чтобы они отражались на всех их подключенных устройствах.
- Пользователи получают предупреждение, когда они вводят текст на другом устройстве.
- Пользователи получают предупреждение, когда они подключаются к другому устройству / браузеру.
Следующие будут хорошими дополнениями:
- Совместное использование файлов через webSocket (желательно) или RTCDataChannel API webRTC. Этого можно добиться, загрузив файл на сервер с помощью AJAX и отправив ссылку другому пользователю через веб-сокет. Может потребоваться определение типа файла.
- Переключение между потоковым аудио и видео во время разговора.
Вот и все. Полный исходный код доступен на github. Вы можете скачать и протестировать на своем локальном сервере.
Вы можете посмотреть демо здесь.