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

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

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

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

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

сервер установить потоковый сервер
Клиент воспроизводит тег видео


<video id="test_video" controls autoplay></video>

<script src="free.player.1.8.4.js"></script>
<script>

    if (window.Streamedian) {
        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;
        }
    }
</script>

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

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

Преимущество: относительно просто реализовать
Недостатки: Платная, бесплатная версия имеет много ограничений

Ссылка на ссылку

html5 + websocket_rtsp_proxy для реализации потокового видео в реальном времени
streamedian
html5_rtsp_player

Вариант 2: ffmpeg + nginx + видео, воспроизведение с rtsp на rtmp

rtmp — это протокол, разработанный Adobe, который можно легко создать с помощью Adobe Media Server; с наступлением эры открытого исходного кода некоторые великие боги разработали подключаемый модуль rtmp для nginx, и вы также можете напрямую использовать nginx для реализации rtmp

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

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

Установитьffmpegинструмент
Установитьnginx

Примечание: в системе 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"

видеоигра

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('test_video', {"autoplay":true});
    player.play();
</script>

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

Ссылка на ссылку

Включить службу RTMP в Nginx
ffmpeg.org
videojs
videojs flash

Вариант 3: ffmpeg + видео, воспроизведение rtsp в hls

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

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

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

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

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

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

Установитьffmpegинструмент
транскодирование 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

видеоигра

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('my_video_1', {"autoplay":true});
    player.play();
</script>

Ссылка на ссылку

ffmpeg hls
videojs
videojs-contrib-hls

Вариант 4: воспроизведение плагина VLC

Шаги воспроизведения

Загрузить и установитьvlc
воспроизведение в браузере


<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

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

Преимущества: RTSP можно играть напрямую, без помощи какого-либо промежуточного сервера.
Минусы: требуется ручная установка плагинов; основан на NPAPI, не поддерживается последними версиями Chrome и Firefox.
Если другие функции вашего проекта совместимы с браузером IE на клиентском компьютере, это решение является первым выбором.

Ссылка на ссылку

VLC wiki
Способ установки плагина

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

WebRTC

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

Справочный адрес:GitHub.com/lukepo-can/core…

h5stream

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

GitHub.com/Li Wei Recording/Также 5…
Используйте H5Stream для разработки системы мониторинга в реальном времени
Приложение начального уровня H5Stream, воспроизведение потокового видео RTSP

GB28181

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

Стриминговый сервис LiveGBS GB28181
github

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