Skip to end of metadata
Go to start of metadata

Содержание страницы:

Чтобы выводить видеопоток с настроенной видеоаналитикой Insentry на свой сайт через NPM плеер, нужно авторизоваться в API и получить токен и URL, по которым доступны службы Insentry. Токен присваивается автоматически при авторизации на сервере Watch. Список камер можно указать в явном виде либо получить через API.

Для запуска плеера потребуются значения следующих элементов API:

  • userToken — токен для авторизации,
  • spotUrl — адрес для подключения к службе Spot,
  • liveUrl — адрес для трансляции живого видео с камеры,
  • cameraId — идентификатор камеры.

Каждый запрос подписан токеном. Токен становится недействительным через три часа, если по нему не было запросов. Если токен недействителен, то API инициирует на своей стороне переподключение с новым токеном. Лучшее решение — регулярно запрашивать статус, чтобы работать через один токен без переподключения. 

Установка плеера

Для установки плеера через NPM-репозиторий используется команда:

npm install web-video-player


Если репозиторий недоступен, то можно установить плеер офлайн. Для этого скачайте артефакт и положите его в папку проекта, после этого установите плеер командой:

npm install web-video-player@21.1.11.tgz

Внедрение видеоплеера в React приложении

1) Импортируйте React и VideoPlayer:

import React from 'react';
import VideoPlayer from 'web-video-player';


2) Передайте с помощью элемента props необходимые для запуска плеера зависимости:

<VideoPlayer
 sync={boolean}
 debug={boolean}
 sceneInfo={Array}
 spot={function}
 spotUrl={string}
 className={string}
 onPlay={function}
 onError={function}
 cameraId={string}
 userToken={string}
 liveUrl={string}
 width={number}
 height={number}
/>


3) Для показа видеоаналитики импортируйте объект с подключением к Spot службе и настройте его взаимодействие с плеером:

import { SpotConnection } from 'web-video-player';
 
const spotConnection = new SpotConnection(spotUrl, errorCallback, successCallback) где spotConnection функция, которую необходимо передать плееру в качестве spot prop

Потом во время рендера передайте инстанс spotConnection плееру в качестве spot prop:

<VideoPlayer {...otherProps} spot={spotConnection} />


4) Для показа видеоаналитики с локализованным текстом передайте массив с расшифровкой параметров аналитики в sceneInfo prop:

<VideoPlayer {...otherProps} sceneInfo={/* Массив с переводами сообщений от детекторов */} />


5) Для авторизации в службах Spot и Cast используется токен,. Так же для подключения необходимо передать UUID камеры, который ей присвоил Watch:

<VideoPlayer {...otherProps} userToken={/* токен пользователя */} cameraId={/* UUID камеры */} />

Токен можно получить из localStorage или из заголовка запроса к серверу.


6) Адреса служб Cast и Spot можно получить из localStorage или сформировать их самостоятельно ws://{host}:{port}/{serviceName}

Если авторизация прошла успешно, то номера портов служб приходят в ответе на запрос авторизации в формате JSON: api/webclient/login.
Так же в localStorage можно узнать токен пользователя  —
/api/webclient/login /api/webclient/login /api/api/webclient/login/webclient/login



<VideoPlayer {...otherProps} liveUrl="ws://demo.insentry.io:3301/live" spotUrl="ws://demo.insentry.io:8081/spot" />


7) Дополнительные параметры:

ПараметрОписаниеОбязательный
width Ширина окна плеераДа
height Высота окна плеераДа
onPlay Функция коллбек, будет вызвана после получения и воспроизведения видеопотока
Да
onError Функция коллбек, будет вызвана после неудачной попытки начать воспроизведение видеопотокаДа
className Дополнительный класс для кастомизации плеераНет
sync

Выключает синхронизацию аналитики от Spot и видео с Cast службы. Значение по умолчанию — true

Нет
debug 

Режим дебага аналитики и воспроизведения видеопотока.

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

Значение по умолчанию — false

Нет
  • No labels