HTML воспроизводит поток rtsp, браузер воспроизводит видеопоток rtsp. Решение
HTML воспроизводит поток rtsp, браузер воспроизводит видеопоток rtsp. Решение

Последние проекты требуют реального временииграть Камераrtspвидеопоток,Поэтому я специально провел небольшое исследование. И браузер не может напрямую играть,Этому требованию можно удовлетворить только с помощью подключаемого модуля или перекодирования.

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

Решение 1: html5 + websocket_rtsp_proxy для реализации потокового видео в реальном времени.

Принцип реализации

Этапы реализации

Установка сервера потокового сервера

Клиент воспроизводит видеотег

var errHandler = function(err){

console.log(‘err’, err.message);

};

var infHandler = function(inf){

console.log(‘info’, inf)

};

var playerOptions = {

socket: “ws://localhost:8088/ws/”,

redirectNativeMediaErrors : true,

bufferDuration: 30,

errorHandler: errHandler,

infoHandler: infHandler

};

var html5Player = document.getElementById(“test_video”);

html5Player.src = “rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov”;

var player = Streamedian.player(‘test_video’, playerOptions);

window.onbeforeunload = function(){

player && player.destroy();

player = null;

Request = null;

}

}

Скопировать код

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

Преимущества и недостатки

Достоинства: относительно просто реализовать.

Недостатки: Платная, бесплатная версия имеет множество ограничений.

Справочная ссылка

Решение 2: ffmpeg + nginx + видео, воспроизведение из rtsp в rtmp

RTMP — это протокол, разработанный Adobe. Как правило, его можно легко настроить с помощью Adobe Media Server. С приходом эпохи открытого исходного кода некоторые эксперты разработали плагин RTMP для nginx. Вы также можете напрямую использовать nginx для реализации. РТМП.

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

Этапы реализации

Примечание. В системах Linux необходимо установить модуль nginx-rtmp-module, а в системах Windows — rtmp (например, nginx 1.7.11.3 Gryphon).

3. Измените конфигурацию nginx.

rtmp{

server{

listen 1935;

application live{

live on;

record off;

}

application hls{

live on;

hls on;

hls_path nginx-rtmp-module/hls;

hls_cleanup off;

}

}

}

Скопировать код

перекодирование ffmpeg

ffmpeg -i “rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov” -f flv -r 25 -s 1080*720 -an “rtmp://127.0.0.1:1935/hls/mystream”

Скопировать код

воспроизведение видео

video

var player = videojs(‘test_video’, {“autoplay”:true});

player.play();

Скопировать код

Примечание. При использовании Google Chrome для игры вам необходимо включить разрешение Flash.

Справочная ссылка

Решение третье: воспроизведение ffmpeg + видео, rtsp в hls

Прямая трансляция HLS (HTTP Live Streaming) — это протокол на основе http, предложенный Apple. Принцип состоит в том, чтобы разделить весь поток на небольшие видеофайлы, а затем управлять этими видеофайлами через список файлов m3u8.

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

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

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

Теоретическая минимальная задержка этого метода равна продолжительности одного ts-файла, обычно 2-3 ts-файла.

Этапы реализации

перекодирование ffmpeg

ffmpeg -i “rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov” -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 “D:/Program Files/html/hls/test.m3u8”

Скопировать код

инструкции ffmpeg по hls

-hls_time n: установить длину каждого фрагмента, значение по умолчанию — 2. Единица измерения — секунды

-hls_list_size n: установить максимальное количество записей, сохраняемых в списке воспроизведения. Установка значения 0 сохранит всю информацию о фильме. Значение по умолчанию — 5.

-hls_wrap n: установить количество фрагментов, которые следует начать перезаписывать. Если установлено значение 0, оно не будет перезаписано. Значение по умолчанию — 0. Эта опция позволяет избежать хранения слишком большого количества фрагментов на диске и ограничить максимальное количество фрагментов, записываемых на диск. диск.

-hls_start_number n: установить значение порядкового номера в списке воспроизведения на номер, значение по умолчанию — 0.

воспроизведение видео

video

var player = videojs(‘my_video_1’, {“autoplay”:true});

player.play();

Скопировать код

Справочная ссылка

Вариант 4: игра с плагином VLC

игратьшаг

Загрузите и установите vlc

Браузерная игра

Скопировать код

Преимущества и недостатки

Преимущество: Можно напрямую играть по RTSP без помощи какого-либо сервера-посредника.

Недостатки: Требуется ручная установка плагинов на основе NPAPI, не поддерживается последними версиями Chrome и Firefox;

Если все остальные функции вашего проекта совместимы с браузером IE на компьютере клиента, это решение является лучшим выбором.

Справочная ссылка

Другие варианты

WebRTC

WebRTC — это набор API-интерфейсов, которые поддерживают веб-браузеры для аудио и видео в реальном времени. Например, HTML5 напрямую вызывает камеру через webRTC. Однако, если вы хотите отображать удаленный видеопоток, вам необходимо преобразовать RTSP в поток WebRTC. для отображения в сети.

h5stream

Справочный адрес:

GB28181

Справочный адрес:

Если что-то неясно, поищите сами. В Интернете есть много случаев. Если у вас есть какие-либо предложения, поделитесь ими с нами!

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Этот сайт предоставляет только услуги по хранению информации, не имеет никаких прав собственности и не принимает на себя соответствующие юридические обязательства. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.

Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/180960.html Исходная ссылка: https://javaforall.cn

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose