Как посмотреть rtsp поток в браузере

Обновлено: 07.07.2024

У меня есть 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, и в чем заключается его практическое применение. При отсутствии нужной информации в инструкции к камере выберите оптимальный вариант поиска данных. Начните с самого простого способа, либо следуйте рекомендациям для тех пользователей, у которых нет возможности связаться с производителем напрямую.

Читайте также: