Функционал моделей событий для видео аналитики

Описание ситуации

В рамках реализации проекта видеоаналитики была переработана и расширена старая логика работы событий. Теперь пользователи могут добавлять события не только в настройках трансляции, а также создавать их в отдельной категории личного кабинета «События трансляций» в разделе «Трансляция». Заранее подготовленные события из «События трансляций» позволяют использовать новые типы событий связанных с серверным приложением, а добавление события по внешнему источнику.
Новая логика позволяет создавать события и переиспользовать их в различных трансляциях, а старая логика событий использовалась только для одной конкретной трансляции и не созданное событие нигде не сохранялось и не могло быть переисопльзовано.
Обе логики сейчас работают и позволяют взаимодействовать с трансляциями более гибко.

Сценарий использования

Для правильной работы с событиями рекомендуется придерживаться следующего сценария использования функциональности:

1. Подготовить для дальнейших (идентификатор события, API-ключ, json-файл, событие, трансляцию).
2. Создать событие в категории «События трансляций» (добавить json-файл в качестве ключа и взять из события идентификатор).
3. Подготовить API-ключ из личного кабинета SmartPlayer.
4. Подготовить POST-запрос по API с идентификатором события.
5. Создать трансляции с привязкой к событиям.
6. Привязать созданные трансляции к нужным устройствам.

Важная информация

Новая логика работы событий реализована параллельно со старой. Со старой логикой работы событий можно ознакомиться здесь. В старой логике нельзя использовать в качестве ключа события «Внешний источник». Данный ключ доступен только в новой реализации при условии, что событие создается в категории «События трансляций».

Приоритеты событий

В личном кабинете SmartPlayer реализовано три вида приоритетов:

1. Низкий;
2. Средний;
3. Высокий.

Пример списка приоритетов

Логика работы приоритетов следующая:

• если текущее событие ниже по приоритету, чем то, которое пришло от сервера клиента, то произойдет переключение на событие с более высоким приоритетом.
• если текущее событие имеет приоритет выше, чем то, которое пришло от сервера клиента, то переключения события не произойдет.
• если текущее событие и следующее событие имеют одинаковый приоритет, то они проиграются по очереди.

Доработка платформы SmartPlayer

Для реализации данного проекта разработчикам команды SmartPlayer понадобилось изменить реализацию на стороне:

• личного кабинета;
• серверного приложения.

Категория «События трансляций»

Категория «События трансляций» располагается в личном кабинете в разделе «Трансляция».

Пример отображения категории «События трансляций» в разделе «Трансляции»

Перейдя в категорию «События трансляций», пользователю откроется главная страница раздела, которая разделена на два блока:

1. События трансляций — включает в себя все созданные события.
2. Журнал событий трансляций — список с подробным описанием использования событий.

Пример отображения главной страницы категории «События трансляций»

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

Пример отображения главной страницы категории «События трансляций»

Для выделенных событий доступно два действия:

1. Отменить выбор — снимает чекбокс (галочку) выделения со всех устройств.
2. Удалить — стирает сущность выделенных событий из списка, а также записи о событиях с сервера.

Пример отображения функций для взаимодействия с выделенными устройствами

События трансляции

Блок «События трансляции» включает в себя следующую информацию и возможности:

• кнопка «Создать» — позволяет создать событие и впоследствии прикрепить его к трансляции;
• чекбокс для выделения — выделяет нужное событие;
• название — отображается текстовое название события;
• тип события — отображается тип имеющегося события;
• ключ — отображается ключ, используемый для события;
• значение — численное значение для события;
• приоритет — отображается текстом приоритет события;
• кнопка «Отправить» — кнопка, помогает тестировать привязанные события к трансляции (эмулирует это событие виртуально) и отображает событие на экране. При корректной настройке трансляции и события кнопка «Отправить» переключит событие, если его приоритет выше, чем у текущего события.

Для более удобного поиска событий пользователь может обратиться в систему поиска.

Пример отображения системы поиска

Кнопка «Создать»

Кнопка «Создать» открывает модальное окно, в котором пользователю необходимо заполнить поля для создания события. Доступны следующие основные поля:

• название — прописать текстовое название события;
• приоритет — выставить приоритет события. Доступно три вида: низкий, средний, высокий;
• тип события — выбрать из раскрывающегося списка нужный тип события (в данном случае «Серверное приложение»)

Пример отображения списка основных параметров

После выбора в качестве типа события значения «Серверное приложение» появится ещё один параметр — «Ключ». Это параметр отвечает за поиск события со стороны сервера. В текущей реализации необходимо выбрать в качестве ключа «Внешний источник».

В старой логике работы событий такого ключа для события типа «Серверное приложение» нет и его невозможно выбрать.

Пример отображения ключа «Внешний источник»

Выбрав «Внешний источник» в качестве ключа пользователь увидит, что модальное окно увеличилось ещё больше и появились новые параметры.

Пример отображения дополнительных параметров

Это параметры:

• модель входящих данных — позволяет перенести с помощью drag-n-drop (перетаскивания файла) json-файл, который будет расшифрован и выбрать (с помощью клика по значению) в этом файле нужное поле. Это поле будет ориентиром для сервера для получения данных. Клик по значению автоматически заполнит поле «Значение».
• целевой путь к значению в json — отображает «путь» до значения в добавленном json-файле. Выставляется автоматически по клику на любом значении из подгруженного json-файла. Это поле нельзя изменить.
• значение — поле в котором необходимо указать значение вручную или с помощью клика по значению в json-файле.

Пример отображения заполненного поля «Значение»

Поля «Целевой путь» и «Значение» после выделения кликом в json-файле определяются автоматически, но также «Значение» можно ввести вручную.

Выбор события

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

Пример отображения панели настроек для события

Панель включает в себя следующие настройки:

• информация — по клику открывает модальное окно с данными о: названии, типе, целевом пути, ключе и значении события.

Пример отображения данных настройки «Информация»

• параметры запроса — по клику открывает модальное окно с данными об имени сервера, методе для запроса, идентификаторе события.

Пример отображения данных настройки «Параметры запроса»

• редактировать — по клику открывает модальное окно с параметрами, которые настраивались при создании события

Пример отображения системы поиска

• удалить — удаляет выбранное событие.

Журнал событий

Блок «Журнал событий» включает в себя все созданные события, и передает о них следующую информацию:

• название — текстовое название события;
• тип события — наименование типа события;
• ключ — тип ключа используемого для события;
• значение — отображается значение ключа зашитое в событие;
• приоритет — выбранные приоритет для события;
• дата и время — дата и время создания события;
• статус — отображается статус работы события.

Для более удобного поиска событий пользователь может обратиться в систему поиска.

Пример отображения системы поиска

В правой части экрана есть оповещение для пользователей, которое передаёт информацию о длительности хранения записей в журнале - 30 дней.

Пример отображения оповещения с информацией

Количество отображаемых событий в личном кабинете

Если пользователю необходимо подготовить и добавить множество событий, можно столкнуться с неудобствами их отображения на странице «Журнал событий». Чтобы этого избежать, пользователю необходимо перейти в раздел «Настройки» личного кабинета и найти пункт «События трансляций».

Пример отображения раздела «Настройки» и пункта «События трансляций»

Развернув этот пункт отобразится поле «Отображение меню в правой панели». В этом поле необходимо установить числовое значение. Какое значение пользователь выставит в поле - столько записей в журнале события будет отображаться.

Пример отображения строки с заполненным значением

Создание трансляции

Пользователь в личном кабинете переходит в раздел «Трансляция» и выбирает категорию «Создать».

Пример отображения раздела «Трансляция» и категории «Создать» в личном кабинете SmartPlayer

Дальше необходимо создать нужное количество страниц и на каждой выбрать зону с помощью функционала «Добавить зону».

Пример отображения добавленных страниц и зон в трансляцию

Настроив количество страниц и зон пользователь должен открыть «Настройки страницы» кликом по иконке.

Пример отображения иконки «Настройки страницы»

В правой части экрана откроется список настроек, в котором необходимо обратить внимание на два параметра:

• события — позволяет добавить события к трансляции (в данном случае событие уже было подготовлено ранее в шагах выше);
• следующая страница — позволяет выбрать на какую страницу будет происходить переключение, или зациклить страницу саму в себе при наличии события.

Пример отображения параметров на странице настроек

Если у пользователя трансляция состоит из нескольких страниц и он хочет их переключать по событиям, ему необходимо настроить переключение страниц следующим образом:

• cтраница 1 — зацикливает саму в себя (то есть выбирает переключение на страницу 1)

Пример отображения настройки страницы 1

• cтраница 2 — это страница с контентом для события (на нее добавляется событие и она переключается на 1 страницу. По завершению проигрывания контента она переключится обратно на страницу 1.

Пример отображения настройки страницы 2

Добавление события в трансляцию

Чтобы добавить готовое событие пользователю необходимо нажать на иконку «+».

Пример отображения иконки для добавления события

После клика по иконке откроется новое модальное окно, в котором необходимо перейти в блок «Выбор события из списка» и кликнуть на нужное событие.

Пример отображения блока «Выбор события из списка»

После выбора нужного события, пользователя вернёт на страницу с настройками, а ниже отобразится выбранное событие.

Добавленное событие можно удалить по отдельной иконке в виде мусорной корзины.

Пример отображения добавленного события к странице

Для применения настроек необходимо нажать на кнопку «Сохранить» в нижней части экрана. Если выбранные настройки применять не нужно, кликнуть на кнопку «Отменить» слева.

Пример отображения кнопки «Сохранить»

Изменения серверной логики

Новая реализация подразумевает также и переделку серверного приложения. На данный момент серверное приложение принимает вебхуки (webhook) через POST-запрос по API, который позволяет серверу клиента отправлять запросы на сервер SmartPlayer. Для формирования POST-запроса на вебхук (webhook) пользователю необходимо передать объект, в котором есть event_id и value для корректной работы событий, а также выбранные в качестве ключа события параметры. Также необходимо добавить API-ключ, который генерируется в личном кабинете SmartPlayer. Токен API-ключа добавляется в POST-запрос параметром "token".
Например: api/v2/broadcast-event?token=smartuser-d86f05c6-2e3a-4c15-931f-2b8f5ec249ab

Запрос по адресу состоит из следующих частей:

• адрес сервера: https://develop.smartplayer.org/
• путь вебхука: api/v2/broadcast-event
• параметр токена: token=smartuser-d86f05c6-2e3a-4c15-931f-2b8f5ec249ab

Из описанных выше частей собирается полноценный запрос показанный в примере.

Пример (отправка POST-запроса): https://develop.smartplayer.org/api/v2/broadcast-event?token=smartuser-d86f05c6-2e3a-4c15-931f-2b8f5ec249ab

В личном кабинете можно получить следующие данные:

• ключ события (процесс создания описан в создании события выше)
• идентификатор (процесс описан в параметрах события выше)
• получение API-ключа в личном кабинете SmartPlayer (с процессом создания API-ключа можно ознакомиться здесь).

Дополнительная информация

Если данная статья не помогает использовать функционал по назначению или после её прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.

Пример отображения вкладки «Обсуждения» на wiki-странице

Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"