Три решения для воспроизведения потокового видео в браузере

задний план

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

Введение в потоковое видео

Видеопотоки условно делятся на три типа: HLS, RTSP, RTMP, поочередно вводятся следующие три видеопотока.

HLS

HLS(Http Live Streaming) — это протокол сетевой передачи потокового мультимедиа на основе HTTP, предложенный Apple.Он напрямую разделяет потоковое мультимедиа на сегменты и сохраняет информацию в файл списка m3u. Версии с разными скоростями можно нарезать на соответствующие слайсы, плеер может напрямую использовать протокол http для запроса потоковых данных.
Преимущество:

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

Недостаток:

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

RTMP

RTMP(Протокол сообщений в реальном времени) — это протокол потоковой передачи мультимедиа, предложенный Adobe, и это частный протокол, который полностью не раскрывается. Он используется для решения проблем мультиплексирования и пакетирования потоков передачи мультимедийных данных. Протокол RTMP, как правило, передача flv, поток формата f4v. Команды и данные обычно передаются по одному TCP-каналу.
Преимущество:

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

Недостаток:

Браузер должен загрузить флэш-плагин для воспроизведения.
RTMP — это проприетарный протокол Adobe, который нельзя воспроизводить на многих устройствах, особенно на стороне iOS, для воспроизведения которого требуется сторонний декодер.
В зависимости от транспорта TCP закрытые порты могут быть заблокированы брандмауэрами.

RTSP

RTSP(Real-Time Stream Protocol) — это протокол потоковой передачи мультимедиа, совместно предложенный Real Networks и Netscape.Протокол RTSP является общим протоколом и поддерживается специальной организацией. дапротокол TCP/IPодна из системприкладной уровеньПротокол.Протокол RTSP обычно передает потоки в форматах ts и mp4.Передача RTSP обычно требует 2-3 каналов, а каналы команд и данных разделены. Текстовый протокол управления воспроизведением мультимедиа RTSP определяет формат потока, а потоковые данные передаются через RTP;
Преимущество:

Эффект RTSP в реальном времени очень хорош, подходит для видеочата, видеонаблюдения и других направлений.

Недостаток:

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

Решения для игр

Решения для воспроизведения HLS и RTMP

1. Используйте нативное видео
Если нам нужно играть только в WebView мобильных устройств, мы можем использовать html для встраивания воспроизведения hls. Следующий HTML-код можно воспроизвести на всех веб-представлениях Safari или Android 3.0+. Это избавляет от необходимости использовать сторонние проигрыватели.

<html lang="en">
    <head>
       <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
           <video width="640" height="320" controls>
                <source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL">
           </video>
        </div>
    </body>
</html>

недостаток:

Форматы мультимедиа, поддерживаемые родным H5, в основном включают MP4, OGG, WebM, M3U8.
Воспроизведение в формате M3U8 плохо совместимо с браузерами ПК.
Невозможно воспроизвести потоковое видео rtmp, поскольку flv изначально не поддерживается

преимущество:

Используйте нативное видео без установки сторонних плагинов

2. Используйте flv.js
flv.jsэто проект с открытым исходным кодом от Bilibli. Он анализирует FLV-файлы и передает их собственным тегам HTML5 Video для воспроизведения аудио- и видеоданных, что позволяет браузерам воспроизводить FLV без Flash.

import React, { PureComponent } from 'react';
import Reflv from 'reflv';

export class HttpFlv extends PureComponent {
  render() {
    return (
      <Reflv
        url={`http://localhost:7001/live/test.flv`}
        type="flv"
        isLive
        cors
      />
    )
  }
}

недостаток:

Запись и воспроизведение с использованием встроенных тегов HTML5 Video иMedia Source Extensions API
Прямая трансляция зависит от технологии воспроизведения, необходимой для записи и трансляции, и в то же время полагается на протокол в HTTP FLV или WebSocket для передачи FLV. Среди них HTTP FLV должен использовать потоковый ввод-вывод для извлечения данных, а некоторые поддерживают потоковый ввод-вывод.fetchилиstream
Из-за зависимости от Media Source Extensions все браузеры ниже iOS и Android 4.4.4 не поддерживают его, а это означает, что flv.js в настоящее время практически непригоден для мобильных терминалов.

преимущество:

Поскольку браузер использует аппаратное ускорение для собственного тега видео, производительность очень хорошая и поддерживается высокое разрешение.
Поддерживает как запись, так и прямую трансляцию
Убрать зависимость от Flash

3. видео.js
video.js может поддерживать воспроизведение веб-страниц во всех браузерах и бесплатно использовать многие расширенные функции. Для воспроизведения этих двух видеопотоков можно использовать video.js, поскольку интерфейс разработан с использованием React, необходимо установить _video.js. _При воспроизведении двух разных потоков нужно обратить внимание на установку разных типов, при воспроизведении rtmp тип rtmp/flv, а при воспроизведении hls тип application/x-mpegURL. Оба видеопотока основаны на флэш-памяти и поэтому требуют поддержки флэш-памяти.

class VideoPlayer extend Component {
      constructor(props) {
        super(props);
        this.VideoOptions = {
            autoplay: true,
            controls: false,
            sources: [{
                src: url,
                type: "application/x-mpegURL"
            }],
            fluid: 'true',
            playbackRates: [0.75, 1, 1.5, 2]
        }
    }
    componentDidMount() {
         this.player = videojs(this.videoNode, this.VideoOptions, function onPlayerReady() { })
    }
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }
  render(){
    return (
      <video
      	ref={node => this.videoNode = node}
        className='video-js vjs-16-9'
      />
    )
  }
}

Видеотег html5 поддерживает только три формата: mp4, webm и ogg, но не формат FLV. Формат FLV предназначен для Flash, а поток rtmp — это формат FLV. Необходимо использовать флэш-плеер. Вы можете определить, поддерживает ли браузер находится в video.js.Поддержите проигрыватель html5 для прямого воспроизведения, если нет, он автоматически вызовет флэш-плеер браузера для воспроизведения видео. В Edge и Google Chrome веб-сайт по умолчанию отключает флэш-память, и вы можете вручную включить его.

недостаток:

зависит от вспышки
Не поддерживает воспроизведение потоков rtsp

преимущество:

Это бесплатный и открытый исходный код, и вы можете легко получить его последний код на github.
Он очень прост в использовании, и настройка страницы воспроизведения видео занимает всего несколько секунд.
Он совместим практически со всеми браузерами и предпочитает использовать html5.В браузерах, которые его не поддерживают, для воспроизведения автоматически будет использоваться flash.
Интерфейс можно настраивать, он построен на чистом javascript и css. Документация также очень подробная

Потоковое решение RTSP

Во-первых, используйте плагин VLC для передачи потока
Браузер устанавливает подключаемый модуль VLC для сопоставления и перекодирования серверов, получает видео в формате ogg, которое тег видео может нормально открыть, и воспроизводит его.

<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 на клиентском компьютере, это решение является первым выбором.

два,html5_rtsp_player+ 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.
Преимущества и недостатки

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

Три: 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)
Изменить конфигурацию 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 для игры необходимо включить разрешение флэш-памяти.

Четыре: ffmpeg + видео, воспроизведение rtsp в hls
Прямая трансляция HLS (HTTP Live Streaming) — это протокол на основе http, предложенный Apple. Принцип состоит в том, чтобы разделить весь поток на небольшие видеофайлы, а затем управлять этими видеофайлами через список файлов m3u8.
HTTP Live Streaming не является настоящей системой потоковой передачи в реальном времени, поскольку существует потенциальная временная задержка, соответствующая размеру и продолжительности медиасегментов. На стороне клиента по крайней мере один сегментированный медиафайл может быть воспроизведен до того, как он будет полностью загружен, и обычно требуется начать воспроизведение после загрузки двух медиафайлов, чтобы обеспечить бесшовное соединение между различными сегментированными аудио и видео.
Кроме того, прежде чем клиент начнет загрузку, он должен дождаться, пока кодировщик и разделитель потоков на сервере сгенерируют хотя бы один 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>

Пять, jsmpeg + ffmpeg
JSMpegэто видеоплеер, написанный на JavaScript. Он состоит из демультиплексора MPEG-TS, декодера видео MPEG1 и аудио MP2, средства визуализации WebGL и Canvas2D и звукового вывода WebAudio. JSMpeg может загружать статическое видео через Ajax и позволяет отправлять MPEG через WebSockets, а внешний интерфейс анализирует MPEG через js для непрерывного рисования холста, включая звук. JSMpeg может декодировать видео 720p со скоростью 30 кадров в секунду на iPhone 5S, работает с любым современным браузером (Chrome, Firefox, Safari, Edge).
Простой пример:

<script src="jsmpeg.min.js"></script>
<div class="jsmpeg" data-url="video.ts"></div>

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

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

RTMP, HTTP-FLV, HLS
Кратко опишите разницу между протоколами HLS, HTTP, RTSP, RTMP
Браузер для воспроизведения потокового видео rtsp
Браузер Chrome в прямом формате rtsp (расширения источника мультимедиа + H5Stream)

Наконец

Оригинал здесь:gitHubЕсли есть какие-то упущения, пожалуйста, поправьте меня! !

Если вы найдете это полезным! Пожалуйста, не забудьте поставить лайк или подписаться!Ваше внимание будет для меня движущей силой двигаться вперед! ! Утка! ! !

"Fearless Front End" время от времени обновляет превосходные технические статьи сообщества!