Просмотр кода страницы Интеграция SmartPlayer с ivideon/en

== '''Situation Description''' ==
This instruction is intended to provide information on the proper setup of the ivideon service, as well as information for its integration with the SmartPlayer platform.
== '''Usage Scenario for Integration with ivideon''' ==
To understand how the integration between ivideon and SmartPlayer will occur, the following general interaction scenario will be used:
* Register/log in to the ivideon personal account
* Add and configure the camera in the ivideon personal account
* Obtain an API key for integration with SmartPlayer
* Log in to the SmartPlayer personal account
* Create a broadcast in SmartPlayer with two pages
* Page #1 plays background content (idle mode)
* Page #2 plays content that will be triggered by the motion detection camera
* After the content from page #2 is played, it returns (switches back) to page #1
== '''ivideon Setup''' ==
{{Note|If you encounter problems setting up the personal account and devices in ivideon, it is recommended to contact ivideon's technical support specialist. |warn}}
=== '''User Registration/Authorization in ivideon Service''' ===
The first step for the user is to register in the ivideon service. You can register by following this [https://my.ivideon.com/service/login link]. 
To start the registration process, the user needs to follow the link and click on the "Register" button.
[[File:Регистрация_ivideon.png|thumb|center| Example of the "Register" button displayed on the ivideon service page |800px]]
After clicking, a new window will open with a list of information that needs to be provided by the user. This list includes the following information: 
* Name 
* Email address (E-Mail)
* Phone number 
* Password
* Checkbox (checkmark) to accept the terms of service and privacy policy
[[File:Параметры_регистрации_ivideon.png|thumb|center| Example of the required information for registration in the ivideon service |800px]]
{{Note|If the user already has an account in the ivideon service, they need to log in.|warn}}
After logging into ivideon, the user will be presented with the main page of their personal account.
[[File:Стартовая_страница_ivideon.png|thumb|center| Example of the main page of the user's personal account in the ivideon service |800px]]
=== '''Adding a device to the ivideon personal account''' ===
On the main page, the user will be prompted to add a device via a special button in the center of the screen - "Connect Device."
[[File:Подключить_устройство.png|thumb|center| Example of the "Connect Device" button displayed in the ivideon user personal account|800px]]
By clicking the "Connect Device" button, the user will open a list where they need to select the desired device. In this case, it's an IP camera.
[[File:Ip_камера.png|thumb|center| Example of the list of available devices for connection in the ivideon user personal account|800px]]
Next, the user is advised to choose the connection method for the IP camera. ivideon technical support specialists strongly recommend using a wired "Ethernet" connection.
[[File:Подключение_через_кабель_.png|thumb|center| Example of the types of camera connections in the ivideon user personal account|800px]]
At this stage, the user will be asked to provide the device's serial number. If the user does not have this information, it is possible to register the device using the MAC address. By clicking on the special line "Use MAC address," the user will be redirected to a new registration window.
[[File:Серийный_номер_.png|thumb|center| Example of registering a device via serial number and displaying the line for registration via MAC address|800px]]
In the opened registration window, the user needs to enter the MAC address of the device, which can be found on the device itself (IP camera) or on the box in which the device was packaged upon purchase.
[[File:Мак_адрес.png|thumb|center| Example of registering a device via MAC address|800px]]
After entering the MAC address and clicking the "Continue" button, the user's camera will be registered and displayed in their personal account.
=== '''Using the camera's web interface for configuration''' ===
Manufacturers of various cameras provide an internal interface for configuring the camera. To access it, a certain sequence of steps must be followed.<br>
First, the user needs to go to the "Settings" section in the ivideon personal account and proceed to the "Security" category.
[[File:Настройки_безопасности_.png|thumb|center| Example of the "Settings" section and the "Security" category in the ivideon personal account|800px]]
In this category, the user can change the camera password and set the desired one if they do not know it.
[[File:Изменить_пароль.png|thumb|center| Example of the line for changing the device password|800px]]
Next, proceed to the camera information section. To do this, the user needs to click on the three vertical dots in the window of the registered camera and open the list of options for interacting with the camera. In this list, the user selects the line "Camera Information."
[[File:Информация_о_камере.png|thumb|center| Example of the "Camera Information" line in the ivideon personal account|800px]]
In the opened window, information about the camera will be provided. At the bottom of the window, there will be the required block "IP Address" with the line "eth 0". The needed IP address will be listed in this line.
[[File:Ip_адрес_камеры.png|thumb|center| Example of the camera's IP address displayed in the ivideon personal account|800px]]
This IP address is copied and pasted into the browser's address bar to open the camera's settings interface. The opened page will require login credentials for the camera.
After this, in the camera's web interface, go to the "Configuration" section and enable the setting or checkbox for "Enable motion detection."<br>
{{Note|'''Limitation:''' The camera must support the setting for detecting object crossing of a zone; otherwise, the previously mentioned "Enable motion detection" setting may be unavailable in the camera's web interface. An example of a camera that supports the zone-crossing detection setting can be found [here](https://www.dssl.ru/products/ds-2cd2183g2-is-2-8-mm-ip-kamera/). ivideon technical support specialists are always available to assist users with camera settings.|warn}}
Some cameras also offer the option to record and store logs. For this purpose, the camera is equipped with the ability to insert a USB-flash drive. Logs can also be viewed in the camera's web interface (this feature is not available on all devices).
=== '''Event Display in the ivideon Personal Account''' ===
After configuring the camera's web interface in the ivideon personal account, events will begin to appear for the user.
[[File:Список_событий ivideon.png|thumb|center| Example of event display in the ivideon personal account|800px]]
In the "Events" section of the personal account, the user needs to filter events using the provided filters.
[[File:Строка_фильтров.png|thumb|center| Example of event filters in the ivideon personal account|800px]]
From the available filters, the user needs to use the event type filter:
# Line crossing
# Entry into a zone
After applying the filter, only the filtered events described above will be displayed in the personal account.
[[File:Типы_событий.png|thumb|center| Example of filtered events in the ivideon personal account|800px]]
{{Note|'''Limitation:''' If one of the events listed above occurs ("Line crossing" or "Entry into a zone"), it is registered in the personal account. The event registration interval is one event every five minutes. If an event (such as a change in the color of one pixel in the camera's zone) occurs within five minutes of the timer starting, the five-minute timer will reset and start counting again. However, the event will not be sent to the ivideon personal account because the initial five-minute timer has not completed. As a result, the event that the SmartPlayer broadcast should respond to will not be triggered. The five-minute timer limitation cannot be disabled.<br>
It's important to understand that even if the event is not sent to the ivideon personal account, the system still detects and counts it. This means that the five-minute timer will refresh and start again. |warn}}
== '''Integration with SmartPlayer''' ==
For integration with SmartPlayer, the user needs to perform three actions in the SmartPlayer personal account:
# Add the camera to the desired device
# Create an API key in the ivideon personal account and use it to connect to SmartPlayer
# Prepare the server application and broadcast(s) with correctly configured events
Each of these points will be detailed below.
== '''Adding a Camera to the Device Used in a SmartPlayer Broadcast''' ==
To receive information about changes in the camera's status, the user needs to connect it to the device that will be used in the broadcast. This can be done in the SmartPlayer personal account.
{{Note|The device to which the camera will be connected must first be added to the personal account. It will be displayed in the "Devices" section. |warn}}
Initially, the user needs to navigate to the "Devices" section in the personal account.
[[File:Устройства_доступные_в_лк.png|thumb|center| Example of the "Devices" section in the SmartPlayer personal account |800px]]
Next, the user needs to find the required device, click on it, and go to the "Settings" section in the right-hand toolbar.
[[File:Настрйоки_тулбара.png|thumb|center| Example of the "Settings" section in the device settings list|800px]]
In the settings section, they need to find the "Camera" category and open it.
[[File:Настройка_камера.png|thumb|center| Example of the "Camera" category in the device settings|800px]]
Once the "Camera" category is opened, the user must click the "Add Camera" button and fill in the following fields:
* Camera Name - enter the camera's name
* Camera Identifier - this can be obtained from the ivideon personal account, in the "Camera Information" section (Camera ID)
{{Note|Using the "Add Camera" button, the user can add multiple cameras to one device.|warn}}
[[File:Id_камеры.png|thumb|center| Example of the Camera ID in the ivideon personal account|800px]]
== '''Receiving Data in SmartPlayer via the ivideon API Key''' ==
To connect to SmartPlayer and receive events from ivideon, the user needs to obtain an API key from the ivideon personal account. After obtaining the API key, it must be added to the settings in the SmartPlayer personal account.
=== '''Creating an API Key in the ivideon Personal Account''' ===
{{Note|To obtain an API key, the ivideon user must have a special subscription plan. |warn}}
To obtain the API key, the user needs to navigate to the "Settings" section in the ivideon personal account and go to the "Access and Security" category.
[[File:Настройки_безопасности.png|thumb|center| Example of the "Settings" section and "Access and Security" category in the ivideon personal account |800px]]
On the opened page, the user needs to find the "For Developers" block and click the "Open" button next to the "API Access Keys" line.
[[File:Для_разработчиков.png|thumb|center| Example of the functionality for creating an API key in the ivideon personal account|800px]]
On the new page, the user must create a new API key. To do this, they need to click the "Create Key" button in the upper right corner. It is also possible to delete all keys on this page by clicking the "Delete All Keys" button.
[[File:Создать_ключ.png|thumb|center| Example of the "Create Key" button|800px]]
In the opened window, the user must enter a name for the key and click the "Continue" button. The "Continue" button will be inactive until the user enters the key name.
[[File:Тестовый_ключ_2.png|thumb|center| Example of the "Continue" button and the field for entering the key name|800px]]
The next window will display the new key, which the user must copy by clicking the special icon next to the line where the key is shown. The user must also check the checkbox "I have copied the key." Otherwise, the user will not be able to complete the creation of the API key, as the "Done" button will remain inactive.
[[File:Созданный_ключ.png|thumb|center| Example of the window with the created API key|800px]]
Clicking the "Done" button will return the user to the page with the list of keys, where the new key will be displayed for use in connecting to SmartPlayer.
[[File:Готовый_ключ.png|thumb|center| Example of the created API key|800px]]
=== '''Applying the API Key for Integration with SmartPlayer''' ===
The API key obtained in the ivideon personal account must be added to the SmartPlayer personal account. To do this, the user needs to log in to the SmartPlayer personal account and navigate to the "Settings" section.
[[File:Настройки_для_api_ключа.png|thumb|center| Example of the "Settings" section in the SmartPlayer personal account|800px]]
In the "Settings" section, the user needs to go to the "Integrations" block.
[[File:Интеграции_.png|thumb|center| Example of the "Integrations" block in the settings |800px]]
In this block, the user needs to configure the following parameters:
* Activate the checkbox
* Enter the API key value (must be copied from the ivideon personal account)
* Select the type of events that will be used in the broadcast. In this case, only the values for "line crossing" and "zone entry" will be used.
[[File:Параметры_интеграции.png|thumb|center| Example of the filled-out parameters in the "Integrations" block |800px]]
== '''Creating a Broadcast for Playback in SmartPlayer with the Necessary Settings''' ==
To receive data from the ivideon service and make SmartPlayer correctly respond to these events, the user must create a broadcast with specially configured parameters.
{{Note|This functionality is available in the following versions of the SmartPlayer client application:
* Windows - ver. 2.41.7
* Linux - ver. 2.41.7
* Android - ver. 1.74.2 and above.<br>
It is currently not implemented in the Web OS and Tizen OS client applications.|warn}}
==='''Server Application Setup:'''===
* Create a personal account on the required server application. When creating the personal account, the role must be set to "admin" with video analytics.
* Manually create a broadcast in the personal account and configure the transitions for the required content and event values (actions for events).
'''Programming Part:'''
* When implementing the programming part, "''socket.io v.2''" must be used. This solution is available at the following [https://socket.io/ link].<br>
''Personal Account:''
* Interaction with the personal account occurs via the ''http(s)'' and ''webSocket'' protocols. Information about "''socket.io v.2''" is provided above.<br>
''Protocol Information:''
* restApi - used mostly for authorization and file handling.
* Socket.io - used by most methods to interact with the personal account.
''Authorization:''
* Information on obtaining the necessary tokens can be found at this [https://dev.smartplayer.org/api-page/pages/1 link].
* Information on properly configuring "join" can be found at this [https://dev.smartplayer.org/api-page/events/28 link].
'''Receiving the Broadcast:'''
* A specific event can be used to get the list of broadcasts. Information on obtaining this event is available at this [https://dev.smartplayer.org/api-page/events/367 link].<br>
After receiving the data, the user needs to select the desired event. From this object, they must take the ID, which will be used in the event described below.<br>
'''Sending a Response Event:'''
* The next step is to send another event, available at this [https://dev.smartplayer.org/api-page/events/367 link], with the necessary parameters.<br>
The event with the correct parameters should switch the pages in the broadcast grid.
=== '''Creating a Broadcast in the Personal Account''' ===
After configuring the server part, the user can start preparing events for playback in the broadcast.<br>
To begin working with events in the broadcast, the user must first log into the personal account.<br>
The next step is to find the "Broadcasts" section in the personal account and select the "Create" category.
[[File:Транлсяция_категория_создать_.png|thumb|center| Example of the "Broadcasts" section and "Create" category in the personal account |800px]]
After clicking on the "Create" category, a new window will open, displaying the entire interface for creating a broadcast.
[[File:Создание_страниц.png|thumb|center| Example of the broadcast creation interface in the personal account|800px]]
Next, the user must create the required number of pages, depending on their needs. This action is done in the lower-left part of the screen by clicking a special icon in the form of a large "+" symbol.
[[File:доабвление страниц.png|thumb|center| Example of the ready pages and the icon for adding new pages in the personal account |800px]]
After creating the required number of pages, the user must select a content zone on each page. This is done using a special icon in the form of a rectangle at the top of the screen.
[[File:Добавить_зону.png|thumb|center| Example of the icon for creating a content zone |800px]]
When creating a zone, a toolbar with zone settings will open, allowing the user to configure the zone parameters.
[[File:Тулбар_настроек_зоны.png|thumb|center| Example of the toolbar with zone settings |800px]]
After selecting the content zone, the user can individually customize the zone based on their needs.<br>
Once the above steps are completed, the user needs to select the page with the content and open the page settings by clicking on the icon in the lower-left part of the personal account. The page settings will also open in the right toolbar, just like the content zone settings.
[[File:Иконка настройки_страницы.png|thumb|center| Example of the icon for accessing the page settings |800px]]
In the page settings, the user needs to find the row with the "Event" parameter and click on the "+" icon.
[[File:События_для_страницы.png|thumb|center| Example of the row with the "Event" parameter |800px]]
This action will open a new window with a list of events for this page.
=== '''Event Setup''' ===
After completing the actions described earlier, a window with event selection options will open for the user. There will be three available options in this window:
# Face recognition
# RFID tag
# Server application (the required option)
[[File:Событие_серверное_приложение.png|thumb|center| Example of event options during broadcast creation |800px]]
The user selects the "Server application" event, and a new row for filling out the "Key" will be added. In this row, select the option "By payload."
[[File:Выбрать_ключ.png|thumb|center| Example of the "Key" field and its value |800px]]
After selecting this key, another row - "Value" - will become available. In this row, the user must specify one of the special values:
{| class="wikitable"
|+ Value Table
|-
! Name !! Value
|-
| Line crossing || ivs.vca.line_detection.event/started
|-
| Entering the zone || ivs.vca.field_detection.event.enter/started
|}
[[File:Значение_ивента.png|thumb|center| Example of the field with the specified value |800px]]
After completing all fields in the window, the user needs to click the "Save" button in the center of the screen.
== '''Related Information''' ==
For further completion of broadcast setup, it is recommended to review the following Wiki pages:
* [[Раздел "Трансляции"]]
* [[Раздел "Расписание"]]
== '''Result''' ==
After completing the setup of the ivideon personal account, integration with the SmartPlayer server application, and configuring the broadcast using the event-driven model in the SmartPlayer personal account, the solution should start functioning. This setup will trigger and change the content whenever a person approaches the designated and configured zone on the camera.
== '''Video Instruction''' ==
[https://www.youtube.com/watch?v=NpgP-P1Q6f4 ivideon and SmartPlayer Integration Setup]
== '''Additional Information''' ==
If this article does not help use the functionality as intended or if there are still questions after reading, you can raise those questions in the "Discussion" section at the top of the page.
[[File:Обсуждение_интеграции_с_ivideon.png|thumb|center| Example of the "Discussion" tab on the wiki page |800px]]
Additional information can also be found on the page [[How to interact with the user in the "Discussion" section]].