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

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

В рамках реализации проекта видеоаналитики для велотрека была переработана логика работы событий на платформе SmartPlyer. Ранее логика работы событий привязывалась к одной конкретной трансляции. То есть, для каждой трансляции нужно создавать своё, отдельное событие и переиспользовать его в других трансляциях возможности не было. После переработки появился полноценная категория в разделе «Трансляции» («События трансляций»), в которой можно создавать события и впоследствии привязывать их к нужным трансляциям. Таким образом появлялся логируемый список событий, который можно создавать, настраивать, хранить и привязывать к нужным трансляциям.

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

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

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-странице

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