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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изменение настроек личного кабинета SmartPlayer

Для корректной работы событий пользователям необходимо будет зайти в раздел «Настройки» личного кабинета в двух случаях:

1. Создания и получения API-ключа для POST-запроса к серверу SmartPlayer.
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-странице

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