Как посмотреть rtsp поток в браузере
У меня есть IP-камера, которая обеспечивает прямую и RTSP видео поток. Я могу использовать VLC медиа плеер для просмотра корма, обеспечив его URL-адрес:
Но мне нужно, чтобы отобразить канал на веб-странице. Поставщик камера поставляется элемент управления ActiveX, который у меня работает, но он реально глючит и заставляет браузер часто зависает.
Кто-нибудь знает о каких-либо альтернативных видео-плагинов, которые я мог использовать, которые поддерживают RTSP?
Камера может быть настроена на поток в кодек H264 или MPEG4.
VLC также поставляется с плагин ActiveX, который может отобразить канал в веб-страницу:
Ориентировочно вы можете иметь 3 варианта для отображения протокола RTSP видео поток на веб-странице:
- Приложение RealPlayer
- QuickTime-плеер
- VLC плеер
Вы можете найти код для размещения элемента через поиск Google.
Насколько я знаю, существуют некоторые ограничения для каждого игрока.
Это не легко для отображения потокового видео с IP-камеры на веб-страницу, потому что вам нужен широкополосный интернет и отличный видео-плеер, который совместим с основными браузерами.
Но, к счастью, есть несколько облачных услуг, которые могут сделать эту работу для нас. Одним из лучших является IPCamLive. Эта служба может получать протоколы RTSP/H264 видео потока от IP-камеры и транслировать его зрителям. IPCamLive имеет компонент Flash/HTML5 видео плеер, который будет отображать видео на ПК, Mac, планшета или мобильного. Самое главное, что этот сайт создает необходимый фрагмент HTML для встраивания видео вроде этого:
Поэтому нам нужно просто скопировать и вставить его в наш html-файл без каких-либо изменений.
Если вы хотите, чтобы поток РЦП непосредственно на веб-страницу, то, боюсь, ваш единственный вариант заключается в использовании просмотра элемент управления ActiveX, который поставляется с камерой. Это прямое подключение IP-камеры -> у зрителя, и должно быть быстрым. Не знаю, почему у вас возникли проблемы; оси ActiveX работает очень хорошо для меня.
Однако, эта опция не реально эффективной полосой пропускания, и вы не можете обслуживать несколько одновременных зрителей (большинство IP-камер имеют предел 10 зрителей). Лучшим вариантом является, чтобы загрузить один поток по протоколу RTSP с центральным размещением потокового сервера, который преобразует ваш поток по протоколу RTMP и MPEG-TS и опубликовать его на флеш-плееров/приставок.
Передачи данных Wowza, Erlyvideo, нереальный медиа сервер Red5 ваши варианты.
Также вы можете попробовать с WebRTC с открытым исходным кодом медиа-сервер Kurento
Мы используем на производстве в следующих случаях: в <предварительно>
В этой статье покажем 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 — исходный код мобильного приложения.
У меня есть ip-камера, которая обеспечивает прямой видеопоток RTSP. Я могу использовать медиаплеер VLC для просмотра канала, указав ему URL:
Но мне нужно отобразить ленту на веб-странице. Поставщик камеры предоставил элемент управления ActiveX, который у меня заработал, но он действительно глючит и вызывает частые зависания браузера.
Кто-нибудь знает какие-либо альтернативные плагины для видео, которые я мог бы использовать, которые поддерживают RTSP?
Камеру можно настроить для потоковой передачи в формате H264 или MPEG4.
Я тоже изучаю эту возможность с моими несколькими камерами RTSP и не хочу никаких элементов управления ActiveX. Я хотел бы создать собственный веб-сервер, который веб-страница постоянно извлекает изображение в формате JPEG для отображения на веб-странице. Таким образом, его можно поддерживать в браузерах, таких как Safari, и просматривать на iPhone. @JerryDodge Я попробовал идею с Java WebSocket Server, который каждую секунду отправляет имя файла изображения в виде строки, например «photo1.jpg». JavaScript в веб-браузере использует имя файла для установки src атрибута <img> тега HTML. Он работает, но очень медленно, поэтому не похож на потоковое видео. Вы уже пробовали свою идею? Быстро работает? @OConnor Для отображения на очень простом уровне с низкой частотой кадров лучше, чтобы клиент потянул, чем сервер отправил. Также рассмотрите TCP против UDP. У них обоих есть свои плюсы и минусы. Клиенту проще всего запросить новое изображение, когда это необходимо.VLC также поставляется с плагином ActiveX, который может отображать канал на веб-странице:
Для справки, на данный момент VLC Media Player был создан 774 разработчиками. Chrome заблокировал плагины npapi после 1 сентября 2015 года. он больше не работает. что делать, если плагин заблокирован, есть другое альтернативное решение?Нелегко отобразить поток видео в реальном времени с IP-камеры на веб-странице, потому что вам нужна широкая пропускная способность Интернета и отличный видеоплеер, совместимый с основными браузерами.
Но, к счастью, есть несколько облачных сервисов, которые могут сделать эту работу за нас. Один из лучших - IPCamLive . Эта служба может принимать видеопоток RTSP / H264 с IP-камеры и транслировать его зрителям. IPCamLive имеет компонент видеопроигрывателя Flash / HTML5, который будет отображать видео на ПК, MAC, планшете или мобильном телефоне. Самое замечательное, что этот сайт генерирует необходимый фрагмент HTML для встраивания живого видео, например:
Поэтому нам просто нужно скопировать и вставить его в наш HTML-файл без каких-либо изменений.
Обновление: по-видимому, сейчас не работает. Показывает следующее: «Эта камера не может быть встроена. Для встраивания переключитесь на стандартный или профессиональный пакет». Все, что вам нужно сделать, это обновить камеру до пакета Standard / Professional, и вы сможете встроить камеру в свою веб-страницу.Примерно у вас может быть 3 варианта отображения видеопотока RTSP на веб-странице:
- Реальный игрок
- Quicktime плеер
- VLC плеер
Вы можете найти код для встраивания activeX через поиск Google.
Насколько я знаю, для каждого игрока есть свои ограничения.
Последние версии Quicktime Player отказались от поддержки RTSP, начиная с Mavericks. totem на linux / ubuntu также поддерживает поток rtspЕсли вы хотите транслировать RTSP прямо на веб-страницу, я боюсь, что ваш единственный вариант - использовать средство просмотра элементов управления ActiveX, которое поставляется с камерой. Это прямое соединение IP Cam -> Viewer, и оно действительно должно быть самым быстрым. Не уверен, почему у вас возникли проблемы; Axis ActiveX у меня работает неплохо.
Однако этот вариант не является эффективным с точки зрения пропускной способности, и вы не можете обслуживать несколько одновременных зрителей (большинство IP-камер имеют ограничение в 10 зрителей). Лучшим вариантом является загрузка одного потока RTSP на централизованно размещенный потоковый сервер, который преобразует ваш поток в RTMP / MPEG-TS и опубликует его во Flash-плеерах / приставках.
IP-камера для сетевого видеонаблюдения работает согласно протоколу RTSP, однако информация о нем не всегда указана в инструкции пользователя. Эти данные нужны пользователю в многообразных ситуациях, поэтому адрес протокола действительно необходимо знать.
В каких случаях возникает потребность в поиске и применении этих данных:
- Для подключения устройства к облачному хранилищу;
- Для проведения настройки передачи видеоконтента на личный сайт;
- Для воспроизведения видеоинформации на различных гаджетах (ноутбук, планшет, смартфон).
Посредством данного протокола осуществляется отправка аудиоконтента или видеоконтента в прямом эфире из одного устройства к другому.
Изучая многочисленные жалобы владельцев IP камер на просторах Всемирной паутины, можно сделать следующий вывод: пользователям трудно открыть RTSP-поток.
Узнаем RTSP
Если адрес не указан в руководстве, прилагающемся к комплекту, нужно искать эти данных другим способом. Многие видеокамеры состоят из китайских элементов. Они встречаются в различных устройствах, например y SV plus. Если вы – владелец именно такой IP-камеры, обратите внимание на формат потока ниже.
Если вы являетесь владельцем другой камеры, вам потребуется выбрать другой вариант поиска информации.
Первый способ: (самый элементарный): Необходимо зайти в веб-интeрфейс IP-камеры и посмотреть rtsp поток там.
Второй способ: свяжитесь напрямую с производителем цифровой камеры видеонаблюдения. Вас обеспечат форматом нужного потока. Не спешитесь расстраиваться, если она была доставлена с китайской фабрики или популярной площадки AliExpress. Обратитесь к продавцу, он не откажет клиенту в помощи.
Третий способ: воспользоваться специальным ПО для определения данных о RTSP-потоке гаджета. Какой софт нужно установить?
Скачайте и установите программу One Device Manager на ноутбук или ПК. Подключите устройство, на котором установлена программа, к локальной сети. К этой же сети подключите IP-устройство. При соблюдении этих правил не должно возникнуть проблем с поиском нужной информации.
Примечание: при необходимости пользователь может вывести поток на экран своего телевизора, а также передать вещание с гаджета на веб-сайт.
В Интернете содержатся перечни с различными адресами потоков, под разные модели устройств.
Как проиграть RTSP-поток с камеры видеонаблюдения?
Вы успешно разыскали адрес нужного потока, и теперь имеете возможность получать видеоконтент с устройства. Далее разберемся, как посмотреть трансляцию видеоданных. Для этого необходимо выполнить несколько несложных действий:
- Установите постоянный IP-адрес для устройства;
- Закажите этот адрес у поставщика в сети Internet;
- Перебросьте на RTSP-порт локальные запросы, поступающие с IP-камеры;
- Пройдите проверку работоспособности потока.
Чтобы произвести настройки статического адреса, советуем воспользоваться программным обеспечением под названием IP Hunter. Аналогичную услугу можно получить непосредственно от провайдера. В этом случае адрес IP послужит дополнительной опцией. Далее необходимо произвести настройки переадресации, чтобы пробросить порты на RTSP-порт с локальных портов устройства. Теперь самое время начать проверку потока.
Откройте VLC-плеер и проверьте RTSP-ссылку. Пошаговая инструкция:
- Найдите главное меню медиаплеера;
- Вам потребуется категория «Media»;
- Выберите графу «Открыть URL».
Перед вами появится новое окно «Источник». Перейдите в нем в раздел под названием «Сеть». Укажите в нем нужную RTSP-ссылку вашего устройства. Вы ввели нужную команду, и теперь она будет отправлена на IP-камеру. Если все сделано правильно, изображение системы видеонаблюдения появится на мониторе вашего ноутбука или ПК. При возникновении неполадок еще раз проверьте правильность IP-адресов, ввода команды и сетевых подключений.
Заключение
Из данной статьи вы узнали, что представляет собой протокол RTSP, и в чем заключается его практическое применение. При отсутствии нужной информации в инструкции к камере выберите оптимальный вариант поиска данных. Начните с самого простого способа, либо следуйте рекомендациям для тех пользователей, у которых нет возможности связаться с производителем напрямую.
Читайте также: