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

Мы выполним следующие шаги

1. RTSP-поток
2. Знакомство с FFMPEG
3. Преобразование RTSP в HLS
4. Передача HLS в веб-браузер

1.RTSP-поток

Что такое RTSP?
RTSP, также известный как протокол потоковой передачи в реальном времени, является менее известным протоколом для потоковой передачи видео в Интернете. Этот протокол был разработан для управления потоковыми серверами, используемыми в развлекательных и коммуникационных системах.

Когда RTSP управляет подключением сервера к клиенту, используются потоки видео по запросу; когда он контролирует соединение клиента с сервером, RTSP использует потоки записи голоса.

RTSP обычно используется для потоковой передачи с камер Интернет-протокола (IP), например с камер видеонаблюдения или IP-камер.
Вместо того, чтобы заставлять ваших зрителей скачивать видео целиком перед его просмотром, поток RTSP позволяет им просмотреть ваш контент до того, как загрузка будет завершена.

2. Общие сведения о FFMPEG

Проверьте этот FFMPEG для получения дополнительной информации

3. Преобразование RTSP в HLS

Чтобы добиться этого, мы должны использовать команды FFMPEG.
В основном из узла я запускаю файл bash, в котором есть эти команды, которые он будет запускать в фоновом режиме, и когда он получит поток RTSP, он параллельно изменит их на HLS.

4. Передача HLS в веб-браузер

мы почти закончили, потому что передать HLS в веб-браузер очень просто.

Надеюсь, вы получили общее представление об этом преобразовании.

Реализация кода

Index.html

Выйти из полноэкранного режима

В коде вы можете видеть, что я добавил ссылку HLS CDN, вы также можете использовать пакет NPM.
Вы можете видеть в этой строке код hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");

setup-ffmpeg.sh

Выйти из полноэкранного режима

В файле bash я предоставил ссылку VIDSOURCE="rtsp://192.1xx.x.xxx:5554" RTSP.
Вы можете увидеть его в конце playlist.m3u8. Это создаст файл playlist.m3u8 и начнет выгружать потоки один за другим, поэтому в конце мы будем ссылаться на этот файл.

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

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

RTSP — простой сигнальный протокол, который уже много лет ничем не могут заменить, и надо признать, особо не стараются.

Например, у нас есть IP-камера, поддерживающая RTSP. Любой, кто когда-либо тестировал трафик с помощью кабеля Sharkwire, скажет вам, что сначала идет DESCRIBE, затем PLAY, а затем трафик начинает сыпаться напрямую через RTP или, например, в TCP-канале.

Типичная схема установления RTSP-соединения выглядит так:

Вполне возможно, что поддержка протокола RTSP не нужна браузерам и используется примерно так же, как пятое колесо, поэтому браузеры не торопятся внедрять его массово, да и вряд ли когда-либо произойдет. С другой стороны, браузеры могли бы создавать прямые TCP-соединения, и это решило бы задачу, но теперь это упирается в проблемы с безопасностью: вы когда-нибудь видели браузер, который позволял бы скрипту напрямую использовать транспортные протоколы?

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

В этой статье мы рассмотрим, как этого можно добиться. А так как наступающий год содержит круглую цифру, давайте добавим актуальности нашей статье и приклеим к ней ярлык с 2020 годом, тем более, что это действительно так.

Итак, о каких технологиях отображения видео на веб-странице придется забыть в 2020 году? Это Flash в браузере. Он мертв. Его больше не существует, вычеркните его из списка.

Три полезных метода

Что не так с WebRTC

Двумя словами: это ресурсоемко и сложно.

Так это вроде охоты на белок с ракетой Искандер. Все, что нам нужно, — это высосать RTSP-поток, а затем отобразить его, а WebRTC говорит: «Да, да ладно, но за это придется заплатить».

Почему WebRTC хорош

Задержка. Это действительно низко. Если вы готовы пожертвовать производительностью и сложностью ради низкой задержки, WebRTC — наиболее подходящий вариант для вас.

Почему HLS хорош

Двумя словами: это может работать везде

Это все достаточно хорошо, но.

Почему HLS — это плохо

Задержка. Есть, например, проекты видеонаблюдения на стройках. Объект строится годами, и все это время убогая камера снимает стройку днем ​​и ночью, 24/7. Это пример ситуации, когда низкая задержка не нужна.

Другой пример — кабаны. Настоящие кабаны. Фермеры Огайо страдают от нашествия диких кабанов, которые питаются урожаем и вытаптывают его, как саранча, тем самым создавая угрозу финансовому благополучию ферм. Предприимчивые стартаперы запустили систему видеонаблюдения с RTSP-камер, которая следит за территорией в режиме реального времени и запускает ловушку при вторжении злоумышленников. В этом случае критически важна низкая задержка, а при использовании HLS (с задержкой 15 секунд) кабаны убегут до срабатывания ловушки.

Здесь следует отметить, что осенью 2019 года Apple анонсировала HLS Low Latency, но это уже другая история. Давайте более подробно рассмотрим их результаты позже. И теперь у нас также есть MSE на складе.

Почему MSE — это хорошо

Почему MSE — это плохо

Это не работает везде. Как и в случае с WebRTC, его проникновение в браузеры ниже. У iPhone (iOS) особенно примечательная история неудач с воспроизведением MSE, что делает MSE вряд ли подходящим в качестве единственного решения для стартапа.
Он полностью доступен в следующих браузерах: Edge, Firefox, Chrome, Safari, Android Browser, Opera Mobile, Chrome для Android, Firefox для Android, UC Browser для Android.

Ограниченная поддержка MSE появилась в iOS Safari совсем недавно, начиная с iOS 13.

Этап RTSP

Мы обсудили доставку в направлении видеосервера > браузера. Кроме того, вам также понадобятся следующие две вещи:

1) Чтобы доставить ваше видео с IP-камеры на сервер.
2) Конвертировать видео в один из форматов/протоколов, описанных выше.

Здесь вступает в игру серверная часть.

Та-да… Встречайте Web Call Server 5 (или просто WCS для друзей). Кто-то должен принять RTSP-трафик, правильно распаковать видео, преобразовать его в WebRTC, HLS или MSE, желательно без пересжатия транскодером, и отправить в браузер в презентабельном виде, не испорченном артефактами и зависаниями.< /p>

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

Схема доставки

В результате начинает складываться полная схема доставки RTSP-контента с конвертацией на промежуточном сервере.

Один из наиболее часто задаваемых вопросов наших индийских коллег: «Возможно ли это? Напрямую, без сервера?». Нет, это не так; вам понадобится серверная часть, которая будет выполнять эту работу. В облаке, на железе, на corei7 у себя на балконе, но без этого не обойтись.

Давайте вернемся к нашему 2020 году

Итак, вот рецепт приготовления RTSP в вашем браузере:

Показывайте их на веб-странице.

Наслаждайтесь едой!

Нет, это еще не все.

Вопросительные нейроны определенно захотят задать этот вопрос: «Как? Действительно, как это можно сделать? Как это будет выглядеть в браузере?»

Представляем вашему вниманию минималистичный WebRTC-плеер, собранный на кухонном столе.

1) Подключите к веб-странице основной скрипт API flashphoner.js и скрипт my_player.js, который мы создадим чуть позже.

2) Инициализировать API в теле веб-страницы

3) Добавьте на страницу элемент div, который будет служить контейнером для видео. Задайте для него размеры и границы.

4) Добавьте кнопку Play, нажатие на которую инициирует подключение к серверу и запустит воспроизведение видео

5) Теперь давайте создадим скрипт my_player.js, который будет содержать основной код нашего плеера. Описать константы и переменные

6) Инициализировать API при загрузке HTML-страницы

7) Подключитесь к серверу WCS через WebSocket. Чтобы все работало корректно, замените "wss://demo.flashphoner.com" на свой адрес WCS

8) После этого передаем следующие два параметра, «name» и «display», где «name» — это RTSP URL воспроизводимого потока, а «display» — элемент myVideo, которым будет наш плеер установлен в. Здесь же укажите URL вашего потока вместо нашего.

В этой статье мы демонстрируем 7 технологически разных способов отображения видеопотока с IP-камеры с поддержкой RTSP на веб-странице в браузере.

Как правило, браузеры не поддерживают 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. Итак, есть метод с HTML-оберткой, позволяющий управлять RTMP-плеером из JavaScript. В этом варианте флэш-память загружается на HTML-страницу только для отображения изображения и воспроизведения звука.

Полный исходный код проигрывателя находится здесь. И метод выглядит так:

Способ 3 — RTMFP

Протокол RTMFP также работает внутри Flash Player. Отличие от RTMP в том, что RTMFP работает поверх UDP, поэтому он гораздо больше подходит для вещания с малой задержкой.

Код AS3 проигрывателя идентичен коду RTMP, за исключением одной буквы F, добавленной в строку кода, где устанавливается соединение с сервером.

Тем не менее, вот скриншот с использованием RTMFP

Метод 4 — RTMFP, обернутый в HTML5

Этот способ идентичен способу 2, за исключением того, что во время инициализации мы устанавливаем протокол RTMFP для базовой Flash (swf-объекта).

Способ 5 — WebRTC

В данном случае мы вообще не используем Flash, а видеопоток проигрывается средствами самого браузера, без использования сторонних плагинов. Этот метод работает как в браузерах Chrome, так и в Firefox для Android, где Flash недоступен. WebRTC приводит к наименьшей задержке, менее 0,5 секунды.

Исходный код проигрывателя тот же:

Сценарий автоматически определяет поддержку WebRTC, и если ti поддерживается, поток воспроизводится с использованием WebRTC.

Способ 6 – веб-сокеты

WebRTC и Flash поддерживают не все браузеры и платформы. Например, браузер iOS Safari их не поддерживает.

Вы можете доставить видеопоток в iOS Safari с помощью транспорта Websocket (TCP-соединение между браузером и сервером). Затем видеопоток RTSP направляется через веб-сокеты. После получения двоичных данных их можно декодировать с помощью JavaScript и отобразить на элементе Canvas HTML5.

Вот что делает проигрыватель Websocket в браузере iOS Safari. Код плеера выглядит так же:

Это чем-то похоже на методы на основе Flash, когда элемент swf находится под HTML5. Здесь у нас есть приложение JavaScript под HTML5, которое извлекает данные через веб-сокеты, декодирует их и отображает на Canvas в несколько потоков.

Вот как выглядит поток RTSP, отображаемый на Canvas в браузере iOS Safari:

Способ 7 – ЗОЖ

При преобразовании RTSP в HLS видеопоток делится на сегменты, которые успешно загружаются с сервера и отображаются в проигрывателе HLS.

В качестве проигрывателя HLS мы используем video.js. Исходный код плеера можно скачать здесь.

Проигрыватель выглядит следующим образом:

Способ 8 – Android-приложение, WebRTC

Приложение получает поток с сервера через WebRTC. Задача сервера здесь — преобразовать RTSP в WebRTC и передать результат в мобильное приложение.

Java-код плеера для Android находится здесь и выглядит так:

Тестовое мобильное приложение плеера можно установить из Google Play, а исходники приложения скачать отсюда.

Вот как выглядит воспроизведение RTSP-потока через WebRTC на планшете Asus Android:

Способ 9 — iOS-приложение, WebRTC

Как и его собратья для Android, приложение для iOS получает видеопоток с сервера через WebRTC.

Вы можете скачать исходный код плеера для iOS здесь.

Кроме того, вы можете установить тестовое приложение, использующее приведенные выше фрагменты кода, из App Store. Работа плеера с RTSP потоком выглядит следующим образом:

Результаты

Соберем результаты в сводную таблицу:

Для тестирования методов мы использовали Web Call Server 5, способный конвертировать RTSP-поток и передавать его по всем девяти вышеописанным направлениям.

Ссылки

Web Call Server 5 — сервер для трансляции потока RTSP.

Flash Streaming — пример swf-приложения, воспроизводящего потоки через RTMP и RTMFP. Соответствует способам 1 и 3.
Исходный код — исходный код swf-приложения на Flex/AS3.

Player — пример веб-приложения, которое воспроизводит RTSP-поток через RTMP, RTMFP, WebRTC, Websocket. Способы 2,4,5,6.
Source — исходный код веб-плеера.

Проигрыватель HLS — пример веб-проигрывателя, воспроизводящего HLS. Соответствует способу 7.
Source — исходный код HLS-плеера.

Android WebRTC player — пример мобильного приложения, проигрывающего видеопоток через WebRTC. Способ 8.
Source — исходный код мобильного приложения.

Проигрыватель WebRTC для iOS — пример мобильного приложения, проигрывающего видеопоток через WebRTC. Способ 9.
Source — исходный код мобильного приложения.

• ※ Часть 1. Проблемы с воспроизведением RTSP HTML5?

• ※ Часть 2. Как воспроизводить потоки RTSP на веб-странице HTML5 с помощью VLC Media Player

Наиболее часто используемый способ добиться воспроизведения RTSP HTML5 — встроить VLC в веб-страницу HTML5 и использовать его в качестве проигрывателя HTML5 RTSP, но это требует сложного процесса, а также кода HTML5, поэтому я бы не советовал вам это делать. . С другой стороны, несмотря на то, что действительно сложно найти подходящий проигрыватель HTML5 RTSP, его также сложно настроить.

Это то, что вам нужно для подготовки…

Загрузить потоки RTSP в VLC Media Player

Шаг 1. Запустите VLC Media Player, перейдите на вкладку «Медиа» > «Открыть сетевой поток» (или Ctrl+N)

Потоковое RTSP VLC

Шаг 2. Перейдите на вкладку «Сеть», введите URL-адрес RTSP в поле «URL-адрес сети» (в виде rtsp://[имя пользователя]:[пароль]@[ip]:[порт] /[кодек]/[канал]/[подтип]/av_stream). Затем выберите "Поток" (ALT+S) с помощью кнопки "Воспроизвести" внизу.

Шаг 3. Нажмите "Далее".

Перекодирование RTSP-потоков VLC

Шаг 4. Установите «Новый» пункт назначения как «HTTP» > Нажмите «Добавить» > Введите «/stream» в «Путь». Таким образом, адрес выходного потока будет IP-адресом «вашего родного сервера/потока». Нажмите "Далее", чтобы продолжить.

Шаг 5. Перекодируйте видеопоток RTSP в поддерживаемый HTML5 видеокодек Video-Theora+Vorbis (OGG), затем нажмите "Далее".

Шаг 6. Проверьте выходной медиакодек в строке "Вывод строки сгенерированного потока", убедитесь, что vcodec=theo и mux=ogg, в противном случае измените вручную. Наконец, нажмите «Поток».

Шаг 7. Теперь пришло время встроить RTSP-поток на веб-страницу. Держите VLC включенным для постоянного перекодирования, вставьте тег веб-страницы HTML5 потока RTSP, и все готово.

VLC — это нечто большее, чем медиаплеер. Он действительно мощный и многофункциональный для транскодирования видео. Но его поддерживаемые форматы ввода/вывода, скорость преобразования, качество вывода обычно едва ли удовлетворительны. Если вы ищете более профессиональное транскодирование видео, вот настоятельно рекомендуемая альтернатива VLC: WonderFox HD Video Converter Factory Pro с полным набором основных функций VLC и многим другим. Скачайте прямо сейчас и узнайте больше!

Рекомендовано автором: лучшая альтернатива VLC для преобразования видео на веб-странице

- Конвертируйте любое видео в форматы AVI, MP4, MOV, WMV, HTML5, VP9, ​​WebM и т. д.

– Загрузка видео в формате HTML5 с YouTube, Vimeo, Dailymotion и т. д.

– Преобразование в 50 раз быстрее, поддерживается пакетное преобразование

– Значительное сжатие видео с минимальной потерей качества

– Перекодируйте видео с помощью передовых видеокодировщиков, чтобы уменьшить размер и улучшить качество.

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

  
• Excel vba сделать книгу неактивной
  
• Какая служба поиска используется для поиска в Microsoft Word
  
• Какой драйвер у Iusb3hcs sys
  
• Как прошить huawei y6
  
• Какой браузер используется в Америке