Камеры keno ip как просматривать через браузер
Обновлено: 02.07.2024
В наш век современных технологий, есть множество полезных функций. Одна из которых возможность подключиться к сетевой видеокамере. У каждого цифрового устройства есть свой web-интерфейс. Возникает вопрос как зайти на камеру по ip-адресу?
Чтобы войти на камеру по ip, требуется выполнить ряд условий:
- камера должна быть подключена к локальной сети (некое сетевое устройство с разъемом rj45, это может быть роутер, коммутатор или просто компьютер) и на нее должно подаваться питание;
- необходимо узнать ip-address цифровой видеокамеры;
- необходимо знать данные аутентификации, логин и пароль;
- цифровая видеокамера видеонаблюдения должна находиться в одной сети с устройством с которого будем заходить в веб-интерфейс, для примера пусть это будет персональный компьютер.
Веб-интерфейс ip-камеры
Web-интерфейс представляет собой совокупность средств, которые помогают пользователю взаимодействовать с любым приложением или сайтом. Также веб-интерфейс применяется для управления сетевыми устройствами, в нашем случаи ip-камерой.
Выделим основные возможности веб-интерфейса:
Последовательность действий
Узнаем адрес видеокамеры и данные аутентификации (логин и пароль).
Если ip-камера новая из коробки, то смотрим в инструкции.
Если же она установлена давно, то скорее всего стандартный ip-address у нее был изменен. Для этого устанавливаем программное обеспечение, так называемые универсальные сканеры сети, например Angy IP Scanner.
Данные аутентификации смотрим в инструкции. Стандартные логин: admin пароль: admin
Далее изменяем адрес ПК, так чтобы камера и компьютер были в одной сети.
Пример. У видеокамеры ipv4 192.168.1.3, на ПК ставим 192.168.1.99 с маской 255.255.255.0.
Открываем браузер. Вводим в адресную строку ip-адрес ip-камеры.
Если не получается войти, то пробуем добавить порт. Пример 192.168.1.3:81 или так 192.168.1.3:82
В этой статье покажем 7 технологически разных способов отображения видеопотока с IP-камеры с поддержкой RTSP на web-странице браузера.
Браузеры, как правило, не поддерживают RTSP, поэтому поток будет конвертироваться для браузера через промежуточный сервер.
Способ 1 — RTMP
RTMP протокол браузеры не поддерживают, но его поддерживает старый добрый Flash Player, который работает неплохо, хоть и не во всех браузерах, и может отобразить видеопоток.
Код плеера в этом случае будет построен на Action Script 3 и выглядеть примерно так:
rtmp://192.168.88.59/live — это адрес промежуточного сервера, который заберет RTSP видеопоток с камеры и конвертирует его в RTMP
rtsp://192.168.88.5/live.sdp — это RTSP адрес самой камеры.
Немного избыточный вариант кода плеера на Flex и AS3 доступен здесь.
Выглядит это так:
Способ 2 — RTMP с оберткой HTML5
Желающих кодить на Action Script 3 все меньше. Специально для этого придуман способ с HTML5 оберткой, которая позволяет управлять RTMP-плеером из JavaScript. В этом случае флэшка подгружается на HTML-страницу только для того чтобы отобразить картинку и выдать в динамики звук.
Полный код плеера находится здесь. А выглядит это так:
Способ 3 — RTMFP
Протокол RTMFP также работает внутри флэш плеера. Разница с RTMP в том, что RTMFP работает поверх протокола UDP и тем самым является более пригодным для получения трансляции с низкой задержкой.
Код плеера на AS3 в этом случае полностью идентичен используемому в RTMP, добавлена одна буква F в строке протокола подключения к серверу.
Для порядка дадим скриншот с RTMFP
Способ 4 — RTMFP c оберткой HTML5
Этот способ идентичен пункту 2, с той разницей, что мы при инициализации в JavaScript устанавливаем RTMFP протокол для использования в нижележащей флэшке (swf-объекте).
Способ 5 — WebRTC
В данном случае Flash не используется совсем и видеопоток проигрывается средствами самого браузера, без использования сторонних плагинов. Это работает и в Android Chrome и Android Firefox — мобильных браузерах, где Flash не установлен. WebRTC дает самую низкую задержку — менее 0.5 секунды.
Код плеера тот же:
Автоматически определяется поддержка WebRTC, и если поддерживается то поток играет по WebRTC.
Способ 6 — Websockets
WebRTC и Flash не покрывают все браузеры и платформы. Например, в браузере iOS Safari эти технологии не поддерживаются.
На iOS Safari можно доставить видеопоток по транспорту Websocket (TCP соединению между браузером и сервером). В этот туннель можно завернуть сконвертированный с RTSP видеопоток. После того, как бинарные данные придут их можно декодировать с помощью JavaScript и отрисовать на Canvas HTML5-элементе.
Именно этим занимается Websocket — плеер при работе в браузере iOS Safari, а его код снаружи выглядит также:
Это чем-то похоже на подход с флэшкой, когда под HTML5 лежит swf-элемент. В данном случае, под HTML5-страницей лежит не swf-объект, а JavaScript-приложение, которое тянет данные по вебсокетам, декодирует и отрисовывает на Canvas в нескольких потоках.
Так выглядит RTSP поток на Canvas в браузере iOS Safari
Способ 7 — HLS
При конвертации RTSP в HLS, видеопоток разбивается на сегменты, которые благополучно скачиваются с сервера и отображаются в HLS-плеере.
В качестве HLS-плеера мы используем video.js. Код плеера можно скачать здесь.
Как выглядит плеер:
Способ 8 — Android приложение, WebRTC
Приложение забирает поток с сервера по WebRTC. Задача сервера в этом случае — сконвертировать RTSP в WebRTC и скормить мобильному приложению.
Java-код плеера для Android находится здесь и выглядит так:
Тестовое мобильное приложение плеера можно установить из Google Play, а исходники приложения скачать здесь.
Так выглядит воспроизведение RTSP потока по WebRTC на планшете Asus под Android:
Способ 9 — iOS приложение, WebRTC
Приложение также как и в случае Android забирает поток с сервера по WebRTC.
А из App Store можно установить тестовое приложение, которое использует показанные выше куски кода. Его работа с RTSP-потоком выглядит так:
Результаты
Подведем итоги и объединим полученные результаты в табличку:
| Способ отображения | Применение | Задержка | |
| 1 | RTMP | Там, где важно использование legacy — флэш клиента, Flex или Adobe Air | medium |
| 2 | RTMP + HTML5 | В браузерах IE, Edge, Mac Safari, если там установлен Flash Player | medium |
| 3 | RTMFP | Там, где важно использование legacy — флэш клиента, Flex или Adobe Air и важна низкая задержка | low |
| 4 | RTMFP + HTML5 | В браузерах IE, Edge, Mac Safari, если там установлен Flash Player и важна низкая задержка. | low |
| 5 | WebRTC | В браузерах Chrome, Firefox, Opera на десктопах и мобильных браузерах под Android, где важна real-time задержка. | real-time |
| 6 | Websocket | В браузерах, где нет Flash и WebRTC, но нужна средняя или низкая задержка. | medium |
| 7 | HLS | Во всех браузерах. Где не важна задержка. | high |
| 8 | Android app, WebRTC | В нативных мобильных приложениях под Android, где требуется real-time задержка. | real-time |
| 9 | iOS app, WebRTC | В нативных мобильных приложениях под iOS, где требуется real-time задержка. | real-time |
Для тестирования мы использовали сервер Web Call Server 5, который конвертирует RTSP поток для раздачи в 9 перечисленных направлениях.
Ссылки
Web Call Server 5 — сервер для раздачи RTSP потока
Flash Streaming — пример swf приложения, проигрывающего потоки по RTMP и RTMFP. Способы 1 и 3.
Source — исходный код swf приложения на Flex / AS3.
Player — пример web-приложения, которое воспроизводит RTSP поток по RTMP, RTMFP, WebRTC, Websocket. Способы 2,4,5,6.
Source — исходный код веб-плеера.
HLS плеер — пример web-плеера, играющего HLS. Способ 7.
Source — исходный код HLS плеера.
Android плеер WebRTC — пример мобильного приложения, которое играет поток по WebRTC. Способ 8.
Source — исходный код мобильного приложения.
iOS плеер WebRTC — пример мобильного приложения, которое играет WebRTC поток. Способ 9.
Source — исходный код мобильного приложения.
Век цифровых технологий открывает перед пользователями всё новые и новые двери в мир уникальных возможностей. Одна из них – подключение к сетевому устройству видеоконтроля. Любой цифровой гаджет оснащен собственным web-интерфейсом.
В данной статье мы разберемся, как зайти на IP-камеру посредством уникального идентификатора устройства. Проще говоря – по IP-адресу. При этом нужно понимать, что реализация данной идеи невозможна без соблюдения целого ряда условий. Внимательно ознакомьтесь с мерами, которым нужно предпринять в обязательном порядке. Они представлены ниже.
Что нужно сделать, чтобы войти на цифровую камеру:
- Подключить устройство к сети питания и локальной сети при помощи RJ45 кабеля. Камера может быть подключена к ПК или роутеру – на усмотрение владельца.
- Узнать IP-адрес конкретного устройства и порт подключения.
- Иметь при себе необходимую информацию для прохождения аутентификации (логин и пароль).
Важно! Чтобы попасть в веб-интерфейс устройства, необходимо подключить компьютер (в данной статье возьмем за пример именно его) и цифровую камеру видеонаблюдения к одной локальной сети.
Web-интерфейс цифровой камеры видеонаблюдения
Веб-интерфейс IP-камеры создан для управления сетевым устройством, а также для взаимодействия пользователя с различными сайтами и приложениями.
Рассмотрим его ключевые возможности:
Реализуем задачу
Еще раз вернемся к отправной точке данной процедуры. Итак, первое, что нужно сделать пользователю – это узнать точный IP-адрес цифрового устройства и данные аутентификации.
Адрес новой IP-камеры можно посмотреть в руководстве, которое есть в коробке с оборудованием и его комплектующими. Если устройство не новое, и уже использовалось прежде, существует высокая вероятность того, что его адрес был изменен. В этом случае адрес с коробки не пригодится. Где искать новый адрес?
Чтобы получить актуальную информацию, скачайте и установите на свой компьютер любой приглянувшийся сканер сети. К примеру, Angy IP Scanner. На просторах Интернета можно отыскать целое множество аналогов этого софта. Выбирайте программу на собственное усмотрение, хотя трудно найти принципиальную разницу в ПО данного типа.
Скачиваем сканнер на ПК.
Устанавливаем программу и запускаем.
ВАЖНО! Программа требует java, без этого компонента она работать не будет.
Двигаемся дальше. Логин и пароль также можно посмотреть в руководстве. Обычно в строке логина вводится слово «admin». Пароль – аналогичный. Это стандартные данные аутентификации, предоставленные производителем.
Чтобы компьютер и цифровая камера были подключены к одной локальной сети, нужно изменить адрес ПК. Например: у IP-камеры ipv4 192.168.200.1, на компьютере указываем значение от 2 до 253, главное требование, чтобы IP был уникальным в локальной сети.
Назначим ПК адрес 192. 168. 200.2 с маской подсети 255.255.255.0.
Далее необходимо открыть на компьютере веб-обозреватель. Чтобы иметь дело с обширным функционалом, лучше всего использовать для этих целей популярный браузер Internet Explorer. Он примечателен тем, что позволяет устанавливать различные плагины оборудования для видеоконтроля.
В адресной строке необходимо ввести IP-адрес камеры и порт.
Что делать, если не получается войти в камеру через браузер?
Для начала следует перепроверить правильность ввода информации. Если IP-адрес и другие данные прописаны верно, а зайти в устройство не получается, нужно действовать по плану Б.
В некоторых случаях для входа в IP-камеру может потребоваться добавление порта в адресной строке веб-обозревателя. Его нужно прописать после введения IP-адреса цифровой видеокамеры. Как это будет выглядеть на практике? Пример: 192. 168. 1.3:81 (или 82).
В этом разделе мы покажем вам как просматривать камеру видеонаблюдения с помощью веб-браузера, такого как IE , Firefox , Chrome или Safari . Здесь в качестве примера мы рассмотрим IE.
Рассмотренные ниже шаги базируются на предположении, что вы уже подключили вашу IP -камеру к маршрутизатору или маршрутизатору с модемом, которые подключены к Интернет.
1. Зайдите на веб-интерфейс настройки камеры, введя IP -адрес камеры в адресную строку вашего браузера. Если вы не знаете IP- адрес камеры , нажмите здесь .
3. После изменения номера порта, пройдите НАСТРОЙКИ->БАЗОВЫЕ->Система->Инициализировать. Для того, чтобы новый номер порта вступил в силу, вам необходимо выполнить перезагрузку камеры.
Затем нам на маршрутизаторе необходимо выполнить настройки проброса портов. Настройка зависит от используемой модели маршрутизатора, обратитесь к технику маршрутизатора соответственно. Здесь, в качестве примера, мы рассмотрим TL - WR 941 ND .
1. Зайдите на маршрутизатор . Перейдите Проброс портов->Виртуальные серверы и нажмите Добавить…, чтобы создать новую запись о виртуальном сервере.
2. Введите IP -адрес и порт, используемые камерой в соответствующие поля. Что касается поля Протокол, мы рекомендуем вам выбрать ВСЕ. Нажмите Сохранить для создания этой новой записи.
3. Теперь на вашем маршрутизаторе для камеры открыт порт 3333.
4. Перейдите на страницу Состояние, чтобы посмотреть WAN IP -адрес маршрутизатора.
Чаще всего для видеонаблюдения используется браузер Enternet Explorer. Связано это с тем, что только этот браузер имеет настройки ActiveX, позволяющие устанавливать различные плагины оборудования для видеонаблюдения.
ActiveX позволяет видеорегистратору, подключенному к сети интернет через статический адрес, получить доступ к видео с камер наблюдения. Дело в том, что без ActiveX вы этого сделать не сможете, даже если введете ip адрес устройства и порт в строку поиска. Оказавшись в веб-интерфейсе вашего регистратора, даже при правильном вводе логина и пароля видеокамеры отображаться не будут. Проблема в том, что у вас нет нужного плагина для конкретного оборудования.
Что же делать в этом случае. Все просто. В правом верхнем углу находим значок шестеренка он же «Сервис». И делаем все, как показано ниже:
Настройка Enternet Explorer
Заходим в настройки IE:
Настраиваем пункты, связанные с работой ActiveX элементов следующим образом:
Если все сделано верно, то при попадании на web интерфейс устройства, нам предложат пройти установку плагина, после которой ваша система видеонаблюдения начнет работать и отображать видео с камер. Для этого нужно:
Если все правильно, видим результат:
Настройка Google Chrom и Mozilla FireFox
Существует возможность просмотра видео с камер наблюдения и через через другие браузеры. Однако вам потребуется установить в них специальное расширение IE Tab.
Установка дополнения IE Tab для Google Chrom
Для этого открываем значок «три точки» — настройки управление Google Chrome. Выбираем строку «Дополнительные инструменты» в выпадающем меню кликаем на расширения.
В открывшемся окне «Расширения» в левом верхнем углу жмем на значок три черточки и находим «Магазин Сhrome».
В окне поиска ищем необходимое нам расширение «IE TAB». Жмем установить.
После установки в правом Верхнем углу появится значок IE TAB при нажатии на который нам предложат установить специальный плагин ietabhelper.exe, после установки которого под основной строкой поиска появится дополнительная строка, в которой необходимо указать адрес нашего устройства.
Установка дополнения IE Tab для Mozilla Firefox
Вы можете как сразу перейти к установке расширения IE Tab по ссылке в конце статьи, так и найти данное дополнение самостоятельно через встроенный магазин дополнений Firefox. Для этого щелкните в правом верхнем углу браузера по кнопке меню интернет-обозревателя и во всплывшем окошке выберите раздел «Дополнения».
В левой области окна пройдите ко вкладке «Расширения», а в правой верхней области окна в строке поиска введите наименование искомого расширения – IE Tab.
Первым же по списку отобразится искомый нами результат поиска – IE Tab V2. Щелкните правее от него по кнопке «Установить», чтобы добавить его в Firefox.
Для завершения инсталляции вам потребуется перезапустить браузер. Вы сможете это сделать, как согласившись с предложением, так и выполнить перезапуск веб-обозревателя самостоятельно.
Как пользователя IE Tab?
Принцип работы IE Tab заключается в том, что для тех сайтов, где необходимо открытие страниц с помощью Internet Explorer, дополнение будет имитировать в Firefox работу стандартного веб-обозревателя от компании Microsoft.
Для того, чтобы настроить список сайтов, для которых будет активирована имитация Internet Explorer, щелкните в правом верхнем углу Firefox по кнопке меню, а затем пройдите к разделу «Дополнения».
В левой области окна пройдите ко вкладке «Расширения». Около IE Tab щелкните по кнопке «Настройки».
Во вкладке «Правила отображения» около графы «Сайт» пропишите адрес сайта, для которого будет активирована имитация Internet Explorer, а затем щелкните по кнопке «Добавить».
Когда все необходимые сайты будут добавлены, щелкните по кнопке «Применить», а затем и «ОК».
Проверим действие дополнения. Для этого перейдем на страницу сервиса, который автоматически определит используемый нами браузер. Как видите, несмотря на то, что нами используется Mozilla Firefox, браузер определяется как Internet Explorer, а значит, дополнение успешно функционирует.
IE Tab – дополнение не для всех, но оно непременно станет полезным для тех пользователей, кто хочет обеспечить себе полноценный веб-серфинг даже там, где требуется использование Internet Explorer, но при этом не хочет запускать стандартный браузер, известный не с самой положительной стороны. Для видеонаблюдения через браузер, увы, без этого не обойтись.
Читайте также: