В рамках реализации проекта видеоаналитики для велотрека была переработана логика работы событий на платформе SmartPlyer. Ранее логика работы событий привязывалась к одной конкретной трансляции. То есть, для каждой трансляции нужно создавать своё, отдельное событие и переиспользовать его в других трансляциях возможности не было. После переработки появился полноценная категория в разделе «Трансляции» («События трансляций»), в которой можно создавать события и впоследствии привязывать их к нужным трансляциям. Таким образом появлялся логируемый список событий, который можно создавать, настраивать, хранить и привязывать к нужным трансляциям.
В рамках реализации проекта видеоаналитики для велотрека была переработана логика работы событий на платформе SmartPlayer. Ранее логика работы событий привязывалась к одной конкретной трансляции. Для каждой трансляции нужно создавать своё, отдельное событие, и переиспользовать его в других трансляциях нельзя. После переработки появилась категория в разделе «Трансляции» («События трансляций»), в которой можно создавать события и впоследствии привязывать их к нужным трансляциям. Таким образом появляется логируемый список событий, который можно создавать, настраивать, хранить и привязывать к нужным трансляциям.
=== '''Сценарий использования''' ===
=== '''Сценарий использования''' ===
Для правильной работы с событиями рекомендуется придерживаться следующего сценария использования функциональности:
Для правильной работы с событиями рекомендуется придерживаться следующего сценария использования функциональности:
# Подготовить для деальнейших (идентификатор события, API-ключ, json-файл, событие, трансляцию).
# Подготовить для дальнейших (идентификатор события, API-ключ, json-файл, событие, трансляцию).
# Создать событие в категории «События трансляции» (добавить json-файл в качестве ключа и взять из события идентификатор).
# Создать событие в категории «События трансляции» (добавить json-файл в качестве ключа и взять из события идентификатор).
# Подготовить API-ключ из личного кабинета SmartPlayer.
# Подготовить API-ключ из личного кабинета SmartPlayer.
Строка 10:
Строка 10:
# Привязать созданные трансляции к нужным устройствам.
# Привязать созданные трансляции к нужным устройствам.
== '''Важная информация''' ==
== '''Важная информация''' ==
{{Note|Новая логика работы событий реализована параллельно со старой. Со старой логикой работы событий можно ознакомиться [https://wiki.smartplayer.org/index.php/%D0%A2%D1%80%D0%B8%D0%B3%D0%B3%D0%B5%D1%80%D0%BD%D1%8B%D0%B5_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F_%D0%B2_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BB%D1%8F%D1%86%D0%B8%D0%B8 здесь]. В старой логике нельзя использовать в качестве ключа события «Внешний источник». Данный ключ доступен только в новой реализации при условии что событие создается в категории «События трансляции».|warn}}
{{Note|Новая логика работы событий реализована параллельно со старой. Со старой логикой работы событий можно ознакомиться [https://wiki.smartplayer.org/index.php/%D0%A2%D1%80%D0%B8%D0%B3%D0%B3%D0%B5%D1%80%D0%BD%D1%8B%D0%B5_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F_%D0%B2_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BB%D1%8F%D1%86%D0%B8%D0%B8 здесь]. В старой логике нельзя использовать в качестве ключа события «Внешний источник». Данный ключ доступен только в новой реализации при условии, что событие создается в категории «События трансляции».|warn}}
=== '''Приоритеты событий''' ===
=== '''Приоритеты событий''' ===
В личном кабинете SmartPlayer реализована три вида приоритетов:
В личном кабинете SmartPlayer реализовано три вида приоритетов:
# Низкий;
# Низкий;
# Средний;
# Средний;
Строка 20:
Строка 20:
* если текущее событие ниже по приоритету, чем то, которое произошло, то произойдет переключение на событие с более высоким приоритетом.
* если текущее событие ниже по приоритету, чем то, которое произошло, то произойдет переключение на событие с более высоким приоритетом.
* если текущее событие имеет приоритет выше, чем то, которое произошло, то переключения события не произойдет.
* если текущее событие имеет приоритет выше, чем то, которое произошло, то переключения события не произойдет.
* если текущее событие и следующее событие то они проиграются по очереди.
* если текущее событие и следующее событие имеют одинаковый приоритет, то они проиграются по очереди.
== '''Доработка платформы SmartPlayer''' ==
== '''Доработка платформы SmartPlayer''' ==
Для реализации данного проекта разработчикам команды SmartPlayer понадобилось изменить реализацию на стороне:
Для реализации данного проекта разработчикам команды SmartPlayer понадобилось изменить реализацию на стороне:
Строка 29:
Строка 28:
Категория «События трансляций» располагается в личном кабинете в разделе «Трансляция».
Категория «События трансляций» располагается в личном кабинете в разделе «Трансляция».
[[File:События_трансляции.png|thumb|center| Пример отображения категории «События трансляции» в разделе «Трансляции» |800px]]
[[File:События_трансляции.png|thumb|center| Пример отображения категории «События трансляции» в разделе «Трансляции» |800px]]
Перейдя категорию «События трансляции» пользователю откроется главная страница раздела, которая разделена на два блока:
Перейдя в категорию «События трансляции», пользователю откроется главная страница раздела, которая разделена на два блока:
# События трансляции — включает в себя все созданные события.
# События трансляции — включает в себя все созданные события.
# Журнал событий трансляций — список с подробным описанием использования событий.
# Журнал событий трансляций — список с подробным описанием использования событий.
Строка 35:
Строка 34:
{{Note|Выделенные с помощью чекбокса события отображаются в правой части экрана.
{{Note|Выделенные с помощью чекбокса события отображаются в правой части экрана.
[[File:Выделенные_события.png|thumb|center| Пример отображения главной страницы категории «События трансляции»|800px]]
[[File:Выделенные_события.png|thumb|center| Пример отображения главной страницы категории «События трансляции»|800px]]
Для выделенных событий доступна два действия:
Для выделенных событий доступно два действия:
# Отменить выбор — снимает чекбокс (галочку) выделения со всех устройств.
# Отменить выбор — снимает чекбокс (галочку) выделения со всех устройств.
# Удалить — удаляет сущность выделенных события из списка событий, а также записи о событиях с сервера.
# Удалить — стирает сущность выделенных событий из списка, а также записи о событиях с сервера.
[[File:Функционал_для_выделенных_устройств.png|thumb|center| Пример отображения функций для взаимодействия с выделенными устройствами|800px]]|warn}}
[[File:Функционал_для_выделенных_устройств.png|thumb|center| Пример отображения функций для взаимодействия с выделенными устройствами|800px]]|warn}}
=== '''События трансляции''' ===
=== '''События трансляции''' ===
Блок «События трансляции» включает в себя следующую информацию и возможности:
Блок «События трансляции» включает в себя следующую информацию и возможности:
* кнопка «Создать» — позволяет создать событие и в последствии прикрепить его к трансляции;
* кнопка «Создать» — позволяет создать событие и впоследствии прикрепить его к трансляции;
* чекбокс для выделения — выделяет нужное событие;
* чекбокс для выделения — выделяет нужное событие;
* название — отображается текстовое название события;
* название — отображается текстовое название события;
* тип события — отображается тип имеющегося события;
* тип события — отображается тип имеющегося события;
* ключ — отображается ключ используемый для события;
* ключ — отображается ключ, используемый для события;
* кнопка «Отправить» — кнопка которая позволяет протестировать привязанное к трансляции и устройству событие (эмулирует это событие виртуально) и отобразит контент события на экране. При корректной настройки трансляции и события кнопка «Отправить» переключит событие, если его приоритет выше чем у текущего события.
* кнопка «Отправить» — кнопка, помогает тестировать привязанные события к трансляции (эмулирует это событие виртуально) и отображает событие на экране. При корректной настройке трансляции и события кнопка «Отправить» переключит событие, если его приоритет выше, чем у текущего события.
{{Note|Для более удобного поиска событий пользователь может обратится в систему поиска.
{{Note|Для более удобного поиска событий пользователь может обратиться в систему поиска.
[[File:Система_поиск_события.png|thumb|center| Пример отображения системы поиска|800px]]|warn}}
[[File:Система_поиск_события.png|thumb|center| Пример отображения системы поиска|800px]]|warn}}
==== '''Кнопка «Создать»''' ====
==== '''Кнопка «Создать»''' ====
Кнопка «Создать» открывает модальное окно в котором пользователю необходимо заполнить поля для создания события. Доступны следующие основные поля:
Кнопка «Создать» открывает модальное окно, в котором пользователю необходимо заполнить поля для создания события. Доступны следующие основные поля:
* название — прописать текстовое название события;
* название — прописать текстовое название события;
* приоритет — выставить приоритет события. Доступно три вида: низкий, средний, высокий;
* приоритет — выставить приоритет события. Доступно три вида: низкий, средний, высокий;
* тип события — выбрать из раскрывающегося списка нужный тип события (в данном случае «Серверное приложение»)
* тип события — выбрать из раскрывающегося списка нужный тип события (в данном случае «Серверное приложение»)
[[File:Базовая_модалка_создания_событий.png|thumb|center| Пример отображения списка основных параметров|800px]]
[[File:Базовая_модалка_создания_событий.png|thumb|center| Пример отображения списка основных параметров|800px]]
После выбора в качестве типа события значения «Серверное приложение» появится еще один параметр — «Ключ». Это параметр отвечает за то, на какое будет смотреть сервер для поиска события. В текущей реализации необходимо выбрать в качестве ключа «Внешний источник».
После выбора в качестве типа события значения «Серверное приложение» появится ещё один параметр — «Ключ». Это параметр отвечает за поиск события со стороны сервера. В текущей реализации необходимо выбрать в качестве ключа «Внешний источник».
{{Note|В старой логике работы событий такого ключа для события типа «Серверное приложение» нет и его невозможно выбрать.|warn}}
{{Note|В старой логике работы событий такого ключа для события типа «Серверное приложение» нет и его невозможно выбрать.|warn}}
[[File:Выбор_ключа.png|thumb|center| Пример отображения ключа «Внешний источник»|800px]]
[[File:Выбор_ключа.png|thumb|center| Пример отображения ключа «Внешний источник»|800px]]
Выбрав «Внешний источник» в качестве ключа пользователь увидит что модальное окно увеличилось еще больше и появились новые параметры.
Выбрав «Внешний источник» в качестве ключа пользователь увидит, что модальное окно увеличилось ещё больше и появились новые параметры.
[[File:Добавленные_параметры.png|thumb|center| Пример отображения дополнительных прааметров|800px]]
[[File:Добавленные_параметры.png|thumb|center| Пример отображения дополнительных параметров|800px]]
Это параметры:
Это параметры:
* модель выходящих данных — позволяет перенести с помощью drag-n-drop (перетаскивания файла) json-файл, который будет расшифрован и выбрать (с помощью клика по значению) в этом файле нужное поле. Это поле будет ориентиром для сервера и с него он будет получать данные. Клик по значению автоматически заполнит поле «Значение».
* модель исходящих данных — позволяет перенести с помощью drag-n-drop (перетаскивания файла) json-файл, который будет расшифрован и выбрать (с помощью клика по значению) в этом файле нужное поле. Это поле будет ориентиром для сервера для получения данных. Клик по значению автоматически заполнит поле «Значение».
* целевой путь к значению в json — отображает «путь» до значения в добавленном json-файле. Выставляется автоматически по клику на любом значении из подгруженного json-файла. Это поле нельзя изменить.
* целевой путь к значению в json — отображает «путь» до значения в добавленном json-файле. Выставляется автоматически по клику на любом значении из подгруженного json-файла. Это поле нельзя изменить.
* значение — поле в котором необходимо указать значении вручную или с помощью клика по значению в json-файле.
* значение — поле в котором необходимо указать значение вручную или с помощью клика по значению в json-файле.
[[File:Заполненные_поля.png|thumb|center| Пример отображения заполненного поля «Значение»|800px]]
[[File:Заполненные_поля.png|thumb|center| Пример отображения заполненного поля «Значение»|800px]]
{{Note|Поля «Целевой путь» и «Значение» после выделения кликом в json-файле определяются автоматически, но также «Значение» можно ввести вручную.|warn}}
{{Note|Поля «Целевой путь» и «Значение» после выделения кликом в json-файле определяются автоматически, но также «Значение» можно ввести вручную.|warn}}
Строка 74:
Строка 73:
* информация — по клику открывает модальное окно с данными о: названии, типе, целевом пути, ключе и значении события.
* информация — по клику открывает модальное окно с данными о: названии, типе, целевом пути, ключе и значении события.
[[File:Данные_с_инфомрацией.png|thumb|center| Пример отображения данных настройки «Информация»|800px]]
[[File:Данные_с_инфомрацией.png|thumb|center| Пример отображения данных настройки «Информация»|800px]]
* параметры запроса — по клику открывает модальное окно с данными о: имени сервера, методе для запроса, идентификаторе события.
* параметры запроса — по клику открывает модальное окно с данными об имени сервера, методе для запроса, идентификаторе события.
[[File:Данные_с_запросами.png|thumb|center| Пример отображения данных настройки «Параметры запроса»|800px]]
[[File:Данные_с_запросами.png|thumb|center| Пример отображения данных настройки «Параметры запроса»|800px]]
* редактировать — по клику открывает модальное окно с параметрами, которые настраивались при создании события
* редактировать — по клику открывает модальное окно с параметрами, которые настраивались при создании события
В рамках реализации проекта видеоаналитики для велотрека была переработана логика работы событий на платформе SmartPlayer. Ранее логика работы событий привязывалась к одной конкретной трансляции. Для каждой трансляции нужно создавать своё, отдельное событие, и переиспользовать его в других трансляциях нельзя. После переработки появилась категория в разделе «Трансляции» («События трансляций»), в которой можно создавать события и впоследствии привязывать их к нужным трансляциям. Таким образом появляется логируемый список событий, который можно создавать, настраивать, хранить и привязывать к нужным трансляциям.
Сценарий использования
Для правильной работы с событиями рекомендуется придерживаться следующего сценария использования функциональности:
Подготовить для дальнейших (идентификатор события, API-ключ, json-файл, событие, трансляцию).
Создать событие в категории «События трансляции» (добавить json-файл в качестве ключа и взять из события идентификатор).
Подготовить API-ключ из личного кабинета SmartPlayer.
Подготовить POST-запрос по API с идентификатором события.
Создать трансляции с привязкой к событиям.
Привязать созданные трансляции к нужным устройствам.
Важная информация
Новая логика работы событий реализована параллельно со старой. Со старой логикой работы событий можно ознакомиться здесь. В старой логике нельзя использовать в качестве ключа события «Внешний источник». Данный ключ доступен только в новой реализации при условии, что событие создается в категории «События трансляции».
Приоритеты событий
В личном кабинете SmartPlayer реализовано три вида приоритетов:
Низкий;
Средний;
Высокий.
Пример списка приоритетов
Логика работы приоритетов следующая:
если текущее событие ниже по приоритету, чем то, которое произошло, то произойдет переключение на событие с более высоким приоритетом.
если текущее событие имеет приоритет выше, чем то, которое произошло, то переключения события не произойдет.
если текущее событие и следующее событие имеют одинаковый приоритет, то они проиграются по очереди.
Доработка платформы SmartPlayer
Для реализации данного проекта разработчикам команды SmartPlayer понадобилось изменить реализацию на стороне:
личного кабинета;
серверного приложения.
Категория «События трансляций»
Категория «События трансляций» располагается в личном кабинете в разделе «Трансляция».
Пример отображения категории «События трансляции» в разделе «Трансляции»
Перейдя в категорию «События трансляции», пользователю откроется главная страница раздела, которая разделена на два блока:
События трансляции — включает в себя все созданные события.
Журнал событий трансляций — список с подробным описанием использования событий.
Пример отображения главной страницы категории «События трансляции»
Выделенные с помощью чекбокса события отображаются в правой части экрана.
Пример отображения главной страницы категории «События трансляции»
Для выделенных событий доступно два действия:
Отменить выбор — снимает чекбокс (галочку) выделения со всех устройств.
Удалить — стирает сущность выделенных событий из списка, а также записи о событиях с сервера.
Пример отображения функций для взаимодействия с выделенными устройствами
События трансляции
Блок «События трансляции» включает в себя следующую информацию и возможности:
кнопка «Создать» — позволяет создать событие и впоследствии прикрепить его к трансляции;
чекбокс для выделения — выделяет нужное событие;
название — отображается текстовое название события;
тип события — отображается тип имеющегося события;
ключ — отображается ключ, используемый для события;
кнопка «Отправить» — кнопка, помогает тестировать привязанные события к трансляции (эмулирует это событие виртуально) и отображает событие на экране. При корректной настройке трансляции и события кнопка «Отправить» переключит событие, если его приоритет выше, чем у текущего события.
Для более удобного поиска событий пользователь может обратиться в систему поиска.
Пример отображения системы поиска
Кнопка «Создать»
Кнопка «Создать» открывает модальное окно, в котором пользователю необходимо заполнить поля для создания события. Доступны следующие основные поля:
название — прописать текстовое название события;
приоритет — выставить приоритет события. Доступно три вида: низкий, средний, высокий;
тип события — выбрать из раскрывающегося списка нужный тип события (в данном случае «Серверное приложение»)
Пример отображения списка основных параметров
После выбора в качестве типа события значения «Серверное приложение» появится ещё один параметр — «Ключ». Это параметр отвечает за поиск события со стороны сервера. В текущей реализации необходимо выбрать в качестве ключа «Внешний источник».
В старой логике работы событий такого ключа для события типа «Серверное приложение» нет и его невозможно выбрать.
Пример отображения ключа «Внешний источник»
Выбрав «Внешний источник» в качестве ключа пользователь увидит, что модальное окно увеличилось ещё больше и появились новые параметры.
Пример отображения дополнительных параметров
Это параметры:
модель исходящих данных — позволяет перенести с помощью drag-n-drop (перетаскивания файла) json-файл, который будет расшифрован и выбрать (с помощью клика по значению) в этом файле нужное поле. Это поле будет ориентиром для сервера для получения данных. Клик по значению автоматически заполнит поле «Значение».
целевой путь к значению в json — отображает «путь» до значения в добавленном json-файле. Выставляется автоматически по клику на любом значении из подгруженного json-файла. Это поле нельзя изменить.
значение — поле в котором необходимо указать значение вручную или с помощью клика по значению в json-файле.
Пример отображения заполненного поля «Значение»
Поля «Целевой путь» и «Значение» после выделения кликом в json-файле определяются автоматически, но также «Значение» можно ввести вручную.
Выбор события
Выбор события осуществляется по клику. При клике на событие оно подсвечивается серым цветом, а в правой части экрана появляется панель с настройками события.
Пример отображения панели настроек для события
Панель включает в себя следующие настройки:
информация — по клику открывает модальное окно с данными о: названии, типе, целевом пути, ключе и значении события.
Пример отображения данных настройки «Информация»
параметры запроса — по клику открывает модальное окно с данными об имени сервера, методе для запроса, идентификаторе события.
Пример отображения данных настройки «Параметры запроса»
редактировать — по клику открывает модальное окно с параметрами, которые настраивались при создании события
Пример отображения системы поиска
удалить — удаляет выбранное событие.
Журнал событий
Блок «Журнал событий» включает в себя все созданные и передает о них следующую информацию:
название —
тип события —
ключ —
значение —
приоритет —
дата и время —
статус —
Для более удобного поиска событий пользователь может обратится в систему поиска.
Пример отображения системы поиска
В правой части экрана есть оповещение для пользователей, которое передаёт информацию о длительности хранения записей в журнале - 30 дней.
Пример отображения оповещения с информацией
Количество отображаемых событий в личном кабинете
Если пользователю необходимо подготовить и добавить множество событий, можно столкнутся с неудобствами их отображения на странице «Журнал событий». Чтобы этого избежать пользователю необходимо перейти в раздел «Настройки» личного кабинета и найти пункт «События трансляции».
Пример отображения раздела «Настройки» и пункта «События трансляции»
Развернув этот пункт отобразится поле «Отображение меню в правой панели», в котором необходимо установить числовое значение. Какое значение пользователь выставит в поле, столько записей в журнале события будет отображаться.
Пример отображения строки с заполненным значением
Создание трансляции
Пользователь в личном кабинете переходит в раздел «Трансляция» и выбирает категорию «Создать».
Пример отображения раздела «Трансляция» и категории «Создать» в личном кабинете SmartPlayer
Дальше необходимо создать нужное количество страниц и на каждой выбрать зону с помощью функционала «Добавить зону».
Пример отображения добавленных страниц и зон в трансляцию
Настроив количество страниц и зон пользователь должен открыть «Настройки страницы» кликом по иконке.
Пример отображения иконки «Настройки страницы»
В правой части экрана откроется список настроек, в котором необходимо обратить внимание на два параметра:
события — позволяет добавить события к трансляции (в данном случае событие уже было подготовлено ранее в шагах выше);
следующая страница — позволяет выбрать на какую страницу будет происходить переключение или зациклить страницу саму в себе при наличии события.
Пример отображения параметров на странице настроек
Добавление события в трансляцию
Чтобы добавить готовое событие пользователю необходимо кликнуть на иконку «+».
Пример отображения иконки для добавления события
После клика по иконке откроется новое модальное окно в котором необходимо перейти в блок «Выбор события из списка» и кликнуть на нужное событие.
Пример отображения блока «Выбор события из списка»
После выбора нужного события пользователя вернет на страницу с настройками, а ниже добавит отобразится выбранное событие.
Добавленное событие можно удалить по отдельной иконке в виде мусорной корзины.
Пример отображения добавленного события к странице
Для применения настроек необходимо нажать на кнопку «Сохранить» в нижней части экрана. Если выбранные настройки применять не нужно кликнуть на кнопку «Отменить» слева.
Пример отображения кнопки «Сохранить»
Изменение настроек личного кабинета SmartPlayer
Для корректной работы событий пользователям необходимо будет зайти в раздел «Настройки» личного кабинета в двух случаях:
Создания и получения API-ключа для POST-запроса к серверу SmartPlayer.
Настроить количество отображаемых событий в категории «События трансляции».
Изменения серверной логики
Новая реализация подразумевала также и переделку серверного приложения. На данный момент серверное приложение принимает вебхуки (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
В личном кабинете можно получить следующие данные:
ключ события (процесс создания описан в создании события выше)
идентификатор события (процесс описан в параметрах события выше)
получение API-ключа в личном кабинете SmartPlayer (с процессом создания API-ключа можно ознакомиться здесь.
Дополнительная информация
Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.
Пример отображения вкладки «Обсуждения» на wiki-странице
