[mWebRTC] Видеочат админа с клиентом.

Данный компонент реализует видеочат в формате админ/гость, т.е. сидит админ на сайте и любой пользователь может связаться с ним. Своеобразная консультация/техподдержка с возможностью подключения видеокамеры.
Возможности
  • Видеочат между пользователем и администратором сайта
  • Пуш-уведомления в качестве оповещения
  • Очередь между пользователями
  • Также присутствует простенький чат для клиентов в очереди

Настройка

Во-первых, нужно поместить `/assets/components/mwebrtc/js/sw.js` в корень сайта. Подробнее об этом файле будет ниже в описании настройки Service Worker.

Шаблон mWebRTC.main содержит jquery и js-скрипты для анимаций и дизайна. Если вам нужен лишь функционал, то можете обойтись и без него.

Пока что в компоненте лишь 2 сниппета: mwebrtcAdmin и mwebrtcClient. Каждый из них загружает чанк для соответствующего пользователя, а также обрабатывает его запросы, связанные с компонентом.

Системные настройки

  • Service Worker — Путь к Service Worker'у, который будет обрабатывать пуш-уведомления компонента. По умолчанию `/sw.js`. Важно: service worker будет перехватывать пуш-уведомления только тех файлов, которые расположены в том же каталоге или в подкаталогах этого каталога. Соотвественно если service worker расположен в корне сайта, то он будет контролировать запросы всех файлов данного сайта. Если же у вас уже есть service worker, то тогда вставьте код моего файла в свой или используйте importScripts.
  • Admin URL и Client URL — Ссылки, которые будут открываться при нажатии на уведомления. Можно ввести как URL, так и id страницы. Эти настройки необязательны.
  • публичный и приватный VAPID ключи — Технология web push использует стандарт VAPID для ограничения валидности подписок на пуш-уведомления на конкретный сервер приложения (т.е., имея свой уникальный VAPID, только ваш сервер сможет отправлять уведомления подписчикам). Поэтому я крайне рекомендую сгенерировать свои VAPID ключи. это можно сделать здесь или с помощью вот такого php-скрипта:
    require_once MODX_CORE_PATH.'components/mwebrtc/web_push/vendor/autoload.php';
    use Minishlink\WebPush\VAPID;
    
    var_dump(VAPID::createVapidKeys());
  • VAPID субъект — Эта строка должна быть либо URL, либо email адресом. Эта часть информации на самом деле будет отправлена web push сервису как часть запроса для срабатывания push'а. Это сделано для того, чтобы если web push сервису нужно будет связаться с отправителем, будет для этого какая-либо информация.
Свойства сниппетов

  • animModal — Определяет анимации дизайна. Список анимаций находится в сниппетах.
  • icon — Иконка дизайна.
  • group — Только для mwebrtcAdmin. Группа пользователей имеет статус админа компонента и соответствующий доступ к его функционалу.
Пользование

  1. С самого начала, админ должен подписаться на рассылку уведомления, нажав на кнопку subscribe. Если браузер попросит права на уведомления, принимайте. Подписываться нужно лишь один раз.
  2. Как только клиент нажмёт на кнопку open_room, он будет добавлен в очередь ожидания. Ему также нужно разрешить отправку уведомлений.
  3. Как только клиент зайдёт в очередь, на все браузеры, которые подписаны, придёт уведомление. Его нужно закрыть в течение минуты, иначе компонент посчитает, что все админы недоступны, клиент будет выкинут из очереди и ему будет предложено оставить заявку на обратный звонок.
  4. В этот момент админы могут общаться с клиентами через простенький встроенный текстовый чат.
  5. Чтобы создать WebRTC комнату и пригласить клиента на видеозвонок, нужно нажать на кнопку call_button рядом с его именем. Браузер запросит доступ к микрофону и камере. Потом через пару секунд, клиент получит уведомление о приглашении.
  6. После того, как клиент получит приглашение, на его странице появится кнопка call. После её нажатия также будет запрос на камеру и микрофон. После этого начнётся соединение.
  7. Соединение должно занять несколько секунд. Как только админ и клиент соединятся, они увидят камеру друг друга и смогут разговаривать с помощью микрофона. Каждый сможет отключиться, нажав на кнопку hangup.
  8. Клиент может переподключиться после отсоединения. Но админ будет являться хостом и его отключение будет закрывать комнату.
Скачать компонент можно на modstore или на github.
Дмитрий
07 ноября 2018, 22:18
8
325
+16

Комментарии: 8

Jury
07 ноября 2018, 22:53
+2
Огонь, я так понял ещё и Node не нужен, очень актуально в медицинской сфере, тестирую…
    Дмитрий
    07 ноября 2018, 23:02
    +1
    Тут не используются сокеты для соединения пользователей, поэтому да, Node не нужен.
Sergionicl
09 ноября 2018, 10:20
+1
Нормально давно ждал что-нибудь такого. Будем тестить
Прохор
09 ноября 2018, 10:27
+1
На модсторе будет дополнение?
    Дмитрий
    09 ноября 2018, 17:19
    0
    Да, компонент уже отправлен на модерацию.
Leonid Krylov
09 ноября 2018, 12:18
0
Выкладывайте у нас :-)
Василий Столейков
11 ноября 2018, 23:15
0
Вот бы расширить функционал до связи любого пользователя с любым пользователем. То есть чтобы любой из пользователей мог быть админом, и к нему в очередь записывались другие пользователи на видеоконсультацию например.
    Дмитрий
    11 ноября 2018, 23:32
    1
    +1
    По идеи, это можно сделать. У сниппета mwebrtcAdmin есть свойство group, которое определяет группу пользователей, которые будут иметь доступ к функционалу админа. Соответственно, если туда указать ту группу, в которую входят все пользователи, то любой пользователь сможет принимать звонки.