Web components для windows 10

iVMS-4200 3.5.0.7 для Windows 7/8/10 x64

iVMS-4200 AC 1.5.0.7 для устройств контроля доступа

iVMS-4200 3.3.0.5 для устройств c термографией

iVMS-4200 2.0.0.12 для MacOSX

Утилиты для работы с устройствами по сети

SADP — сетевой сканер.

В этой версии для Windows появилась возможность самостоятельно отвязывать устройство от облачной учетной записи.

BatchConfigTool — утилита для пакетной настройки.

Remote Backup — утилита для резервного копирования архива. Windows 7/8/10

Работа с архивом

Local playback 3.0.1.2 — утилита для работы с накопителями которые были извлечены из устройства

Windows 7/8/10

VS Player — плеер для работы с видео файлами

Плагины и фильтры для просмотра в сторонних плеерах

Калькуляторы и инструменты

Калькулятор битрейта и глубины архива.

Утилита для подбора объективов. Windows 7/8/10

Прошивки для оборудования Hikvision

Системные компоненты

Обновления компонентов DirectX

Microsoft .NET Framework 4.5.1

Распространяемый компонент Microsoft Visual C++ для Visual Studio 2017

Магазин мобильных приложений Hikvision

Device Network SDK (for Windows 32-bit)
V6.1.6.3_build20200925
Скачать

Device Network SDK (for Windows 64-bit)
V6.1.6.3_build20200925
Скачать

Device Network SDK (for Linux 32-bit)
V6.1.6.3_build20200925
Скачать

Device Network SDK (for Linux 64-bit)
V6.1.6.3_build20200925
Скачать

Политика по обработке персональных данных
Информация на сайте не является публичной офертой.
Описание товара носит справочный характер.
Производитель оставляет за собой право изменять внешний вид и характеристики товара без предварительного уведомления.

Проблема Hikvision «Нажмите здесь, чтобы загрузить и установить плагин»

Когда вы пытаетесь получить доступ к IP-камере Hikvision или DVR / NVR, вы наткнетесь на сообщение: «Нажмите здесь, чтобы загрузить и установить плагин. Закройте браузер при установке плагина » .

Этот плагин необходимо установить для просмотра вашей системы видеонаблюдения Hikvision .

Проблема в том, что даже если вы установите плагин, сообщение все равно будет отображаться и беспокоить вас каждый раз, когда вам нужно получить доступ к вашей IP-камере / NVR / DVR Hikvision. Плагин установлен, но похоже, что что-то пошло не так, потому что снова и снова появляется сообщение с просьбой установить плагин: «закройте браузер при установке плагина».

Этот подключаемый модуль для видеорегистраторов, сетевых видеорегистраторов и IP-камер Hikvision связан с режимом совместимости в Internet Explorer (IE). Все, что вам нужно сделать, это настроить IE, и ошибка исчезнет.

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

• Как просматривать камеры Hikvision или NVR в Firefox
• Как просматривать камеры Hikvision или NVR в Google Chrome
• Как просматривать камеры Hikvision в Safari (с веб-плагином)

Как исправить: «Нажмите здесь, чтобы загрузить и установить плагин»

Плагин веб-компонента используется Hikvsion для отображения живого изображения с камер, а также для воспроизведения. Если вы не установите его правильно, вы можете видеть камеры (изображение сбой), и вы также не можете воспроизводить. Другие функции могут быть отключены, например, при сохранении настроек они не будут применены.

Шаг 1. Перейдите в раздел «Инструменты» IE и щелкните « Параметры просмотра в режиме совместимости». (Если вы не видите вкладку «Инструменты» вверху, нажмите клавишу ALT на клавиатуре, и она появится).

Шаг 2. В следующем окне укажите IP-адрес регистратора (или ddns) и нажмите «Добавить». Та же процедура для IP-камеры или сетевого видеорегистратора.

Шаг 3. Снова перейдите на вкладку «Инструменты» и на этот раз нажмите « Свойства обозревателя»

.

Шаг 4 . Откройте вкладку «Безопасность» и нажмите « Надежные сайты» .

Шаг 5. Введите IP-адрес устройства и нажмите « Добавить» . Убедитесь, что флажок «Требовать проверку сервера» снят.

Когда эти два шага будут выполнены, вышеупомянутая проблема будет окончательно решена. В следующий раз, когда вы откроете Internet Explorer и попытаетесь увидеть камеры, вы не увидите раздражающего сообщения «Щелкните здесь, чтобы загрузить и установить плагин».

Если по какой-то причине вас снова попросят установить плагин, сделайте следующее:

• Перезагрузите ноутбук или компьютер
• Обновите прошивку рекордера (NVR, DVR) или IP-камеры. На некоторых устройствах Hikvison установлена ​​обновленная прошивка, которая не позволяет правильно установить подключаемый модуль.
• Удалите все оставшиеся плагины Hikvision, которые вы могли установить ранее. Перейдите в Панель управления> Программы> Удалить программу и удалите из списка приложений тот, который называется «веб-компоненты» . Это название плагина Hikvsion. Удалите его и выполните предыдущие шаги, чтобы снова установить плагин.

Настраиваем iVMS-4200 для просмотра видеокамер на компьютере

Для вывода изображения на монитор необязательно использовать с видеорегистратора прямое подключение VGA или HDMI кабеля. В данном случае решение является более экономичным, но бывает когда видеорегистратор расположен где-то в очень далеком и скрытном месте. А нужно смотреть видеокамеры в режиме реального времени и архивы записей, находясь где-то в удаленном месте, да хоть в другом городе или стране не важно или охранику в рабочее помещение. Тогда для этой задачи прекрасно подойдет программа для компьютера IVMS-4200. Данный обзор настройки подходит для видеорегистраторов производителя Hikvision.

Расмотрим установку и настройку её и конечно просмотр видео. И так начнём с установки. Скачиваем саму программу и разархивируем её. Запускаем файл установки iVMS-4200(v2.7.1.9).exe(на текущее время версия 2.7.1.9, поэтому когда-нибудь ссылка на программу изменится, поэтому вы всегда можете скачать свежую версию с официального сайта http://hikvision.ru/download ).

Соглашаемся с лицензионным соглашением и нажимаем Next

Галка должна быть установлена на только Client и нажимаем Next

Оставляем галку, чтобы после установки создался ярлык на рабочем столе и нажимаем Next

Дожидаемся установки, после на рабочем столе появится ярлык для запуска IVMS-4200. Запускаем с правами администратора (правой кнопкой мыши — Запустить от имени администратора). Далее нас попрасят создать админскую учетную запись в программу. Указываем например admin и нужно задать сложный пароль с буквами, заглавными и прописными, например Admin111

Сразу откроется вкладка — Управление устройством. Нажимаем на кнопку с плюсом — Добав

Оставляем точку на Имя IP/домена. В поле псевдоним указываем наименование нашего видеорегистратора, например работа или дача. Далее указываем ip адрес нашего видеорегистратора, тут может быть как внутренний адрес или внешний в зависимости от вашей удаленности от видеорегистратора. В случае, если ваш компьютер находится в той же сети, что и видеорегистратор, то указываете внутренний его ip адрес. В случае, если вы хотите просматривать видеорегистратор где-то удаленно то необходимо указывать внешний ip адрес. Тогда предварительно где установлен видеорегистратор должен настроен проброс портов на роутере , в данном случае проброс должен быть TCP 8000 порта. Указываете логин и пароль к видеорегистратору. Логин и пароль, который указан по умолчанию смотрите в документации к видеорегистратору, как правило это admin/admin. В случае, если вы не знаете ip адрес вашего видеорегистора то следует обратиться к статье о подключении видеорегистратора к роутеру . И в конце нажимаем на кнопку Добав

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

Тут я думаю вы уже сами разберетесь, т.к. интуитивно всё понятно. Слева снизу список ваших камер, два раза по ним щелкаете и нужная камера будет открываться

Теперь посмотрим как посмотреть видеозаписи. В панели управления выбираем Удаленное вопроизведение/загрузка

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

Видеозапись подгрузится, и далее запись можно удобно проматывать и смотреть то, что вам нужно. Думаю по кнопкам объяснять не нужно, IVMS прекрасно переведен на русский язык и всё интуитивно понятно. Будут вопросы пишите ниже в комментариях, буду рад помочь разобраться.

Быстрый старт с WebComponents

Веб-компоненты это набор стандартов определяющих программные интерфейсы для организации компонентной архитектуры. Все они реализованы в современных версиях браузеров, т.е. не требуют подключения библиотек или транспиляторов кода, однако, если нужна совместимость например с Internet Explorer 11, то и библиотеки и транспиляторы использовать видимо все-таки придется.

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

Все эксперименты приводимые далее проверялись в Chrome и Firefox может быть даже не самых новых версий.

Итак начнем.

Для начала создадим директорию для проекта и перейдем в него.

в этом каталоге ответив на все вопросы по умолчанию.

Создадим в каталоге файл index.html с самым простым содержимым.

Добавим тег для элемента, имя должно обязательно содержать дефис, это сигнал для подсистемы CusomElements для попытки определения этого элемента как надстраивающего стандартные.

Добавим класс обработчик в теге script.

В модульном теге script, мы определили новый класс который c помощью метода customElements.define() определили за тегом my-webcomp. А добавив код в метод connectedCallback() мы обеспечили его вызов при добавлении реализации компонента в дерево. Результат уже можно посмотреть в браузере:

Однако, размещать html верстку прямо в код если и удобно для небольших кусочков, то вообще не правильно, что особенно сказывается когда кусочки разрастаются до приличных размеров. Например на форме с 20ю элементами, которую побить на подкомпоненты тоже не всегда может быть удобно. Поэтому мы для начала вынесем верстку в шаблон, который будет располагаться в том же html, хотя ничто не помешает его нам загрузить из отдельного файла при необходимости.

В коде компонента вставку строки c html мы заменили на получение элемента шаблона по id. Импорт, т.е. создание копии этого элемента и прицепление к содержимому текущего.

id назван в нотации camelCase т.к. все айдишники элементов прокидываются в глобальное пространство имен и при использовании дефисов или других спец. символов доступ к ним может быть менее элегантен. Т.е. мы могли бы вместо:

написать в одну строчку:

и этот код работал бы точно так же, но это считается не очень безопасным. Также если мы присвоим id нашему элементу, то сможем обращаться к нему из любой точки контекста как к экземпляру из глобального пространства имен вызывая методы и получая значения свойств.
Например вот так:

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

Теперь повесим обработчик клика мышки для нашего компонента который будет выводить алерт сообщение.

Теперь при нажатии на сообщение у нас будет реакция на действия пользователя.

Аргументом метода showMessage() также объявляется объект event, который хранит данные о событии, например координаты клика или ссылку на сам элемент.

Часто каждый конкретный элемент надо сконфигурировать уникальным для него образом, это можно сделать используя атрибуты.

Добавим второй экземпляр элемента и определим для каждого из них разные свойства greet-name значения которых будут выводиться при нажатии на элемент.

Теперь при нажатии на первый будет выводиться “This is the message for John”, а на второй “This is the message for Josh”.

Может так случиться что атрибут надо будет использовать не в обработке события, а прямо отрендерить в шаблон, для этого мы добавим id целевому элементу и подставим значение из апи сразу после рендеринга копии объекта шаблона.

Получается вот так:

Вместо .textContent может быть .innerHTML или можно вызвать у объекта из селектора тот же метод .insertAdjacentHTML() мы делали в самом начале.

Долгое время использование айдишников считалось дурным тоном, потому что на значительных объемах кода они могли дублироваться, что приводило к коллизиям. Однако, с появлением технологии теневого дерева можно внутреннее содержимое элемента изолировать использовать айдишники, стили и прочие ресурсы без опасений. Для веб-компонентов включается теневое дерево следующим образом:

Теперь правда все DOM обращения к this придется заменить на this.shadowRoot благо их пока не так много.

Визуально работа этого кода опять никак не изменится, но теперь в глобальном пространстве имен не будет никакого helloLabel, а у на странице уже 2 элемента с таким идентификатором. А получить доступ к ним можно будет например вот так:

и то если вы не закроете дерево передав соответствующий атрибут в методе .attachShadow().

У нас получилось довольно много кода и размещать его прямо в html файле тоже не очень правильно. Поэтому создадим файл my-webcomp.js и перенесем в него наш класс предварив инструкцией export, а в теге script добавим импорт этого класса, чтобы получилось вот такое:

На работоспособности это никак не скажется, но теперь вся бизнес логика у нас отдельно в .js, конфигурация осуществляется в html атрибутами, а модульную асинхронную инициализацию берут на себя механизмы модульной и компонентной системы браузера.

Правда с этого момента открывать index.html как локальный для разработки не получится, т.к. браузер заблокирует загрузку скрипта с файловой системы. Если у вас есть nodejs можно поставить простейший веб-сервер:

и запускать его командой http-server в каталоге с проектом, при запуске он подскажет хост и порт с которого можно открывать страницу

Которая и будет отныне адресом отладочной страницы с нашим элементом.

Немаловажным для разработки является написание тестов, они помогают удерживать код работоспособным в ходе развития его компонентов. Для тестирования веб-компонентов можно использовать mocha в режиме запуска из браузера.

Для этого создадим каталог test и добавим в него файл all.html такого содержимого:

Скопируем наш index.html в test/ задав ему имя my-webcomp.tests.html и добавим такое же содержимое head как и в all.html.

Однако, нам обычную инициализацию и манипуляции теперь надо будет заменить на производимую в рамках запуска тестов:

Теперь при заходе на

будет показан отчет о выполнении тестов.

Но может потребоваться запускать тесты автоматизировано и в разных браузеров для этого надо поставить специальную утилиту:

и запускать вот так:

Эту строчку можно добавить в секцию test файла package.json и запускать как:

Рекомендуется тестировать каждый значимый метод класса в рамках отдельного теста. Если надо сделать общую для каждого инициализацию ее следует определить в методе suiteSetup():

На этом наверное хватит для первого раза, мы получили некоторый минимальный проект которому решай он конкретную задачу не стыдно было бы сделать.

Книг на тему пока не так уж много, но вся расширенная документация легко находится по словам Web Components, CustomElements, ShadowDOM, Native Template Tag, Custom Events.

А продолжение темы демонстрирующее способы взаимодействия между компонентами за счет использования событий можно найти вот тут

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.