Принцип прямого эфира и реальный бой веб-прямого вещания

Прямая трансляция стала незаменимой вещью в Интернете.Говорят, что основные платформы прямых трансляций bilibili, Huya и Douyu готовы стать публичными.

Будучи компанией, занимающейся ценными бумагами в Интернете, прямая трансляция Futu Securities, конечно же, незаменима. В настоящее время основной функцией прямых трансляций в Futu Niuniu Software (далее — Niuniu) является просветительская и рекламная.

Futu Niuniu — ведущее программное обеспечение для торговли акциями в Гонконге и США.

Структура статьи

Живая композиция
Прямая трансляция
Технология прямых трансляций в сети
- HLS-протокол
- RTMP-протокол
- Сравнение HLS и RTMP
Живой бой
- Установить nginx, nginx-rtmp-module, FFmpeg (следующие операции выполняются под mac)
- Конфигурационный файл nginx.conf, настройка RTMP, HLS
- перезапустить nginx
- Проверьте, работает ли порт
- Команда выполнения FFmpeg
- код
- Эффект
Встреча с ямой в прямом эфире
Суммировать

Живая композиция

В настоящее время поддерживается Niuniu:

Якоря Mobile Niuniu (Android, IOS) поддерживают только прямую трансляцию с камер, а зрители поддерживают отображение
Якорный терминал ПК Niu Niu поддерживает прямую трансляцию с камеры, прямую трансляцию с записью экрана, прямую трансляцию с записью камеры + экрана, а терминал аудитории поддерживает отображение
MAC Niu Niu и веб-хост не поддерживают его, но аудитория поддерживает отображение

Прямая трансляция

живое видеоЕго можно разделить на сбор, предварительную обработку, кодирование, передачу, декодирование и рендеринг.

коллекция

Как правило, это делается клиентом (IOS, Android, ПК или другие инструменты, такие как OBS).iOS относительно прост, Android должен выполнить некоторую работу по адаптации модели, а ПК является наиболее проблематичным для управления всеми видами замечательных камер. , Конечно, с этими проблемами Tencent Cloud уже справилась за нас, хе-хе.

предварительная обработка

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

кодирование

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

коробка передач

Как правило, он передается поставщику услуг CDN.

расшифровка

Это декодирование операции предыдущего кодирования.В сети декодирование HLS.

оказывать

В основном используйте плеер для решения проблемы, плееры, обычно используемые в Интернете,video.js, в настоящее время мы используем Tencent Cloud Player.

На самом деле завершенная прямая трансляция далека от приведенных выше ссылок.Ниже представлена полная блок-схема решения для прямой трансляции Tencent Cloud:

Технология прямых трансляций в сети

В настоящее время в Интернете проводятся прямые трансляции в Интернете, в основном для отображения.Основной веб-дисплей может включать HLS и RTMP.Теперь мы сосредоточимся на протоколах hls и RTMP.

HLS

HLS (полное название HTTP Live Streaming) — это протокол потоковой передачи видео на основе HTTP, реализованный Apple. QuickTime для Mac OS, Safari для Safari и Safari для iOS могут очень хорошо поддерживать HLS. В более поздних версиях Android также добавлена поддержка HLS. .

Некоторые распространенные клиенты, такие как MPlayerX и VLC, также поддерживают протокол HLS.Если вам нужно играть в Chrome, вам нужно использоватьvideojs-contrib-hls.jsРазбор.

Рабочий процесс ЗОЖ

Сервер

Серверный компонент HLS отвечает за полученный входной медиапоток, а затем Media кодирует его в формат MPEG-4 (видео H.264 и аудио AAC), а затем использует аппаратное обеспечение для его упаковки в формат MPEG-2 (транспортный MPEG-2). поток) транспортный поток. На рисунке показано, что транспортный поток будет проходить через сегментатор потока, работа которого заключается в том, что транспортный поток MPEG-2 будет фрагментирован на небольшие сегменты, а затем сохранен в виде одной или нескольких серий медиафайлов .ts. Этот процесс необходимо выполнять с помощью инструментов кодирования, таких как сегментатор потока Apple. (Класс видео представляет собой файл .ts, а чистый звук будет закодирован как несколько небольших аудиоклипов, обычно в форматах AAC, MP3 или AC-3 с заголовками ADTS.) Сервер может использовать две формы аппаратного кодирования и кодирования программного обеспечения, и его функция состоит в том, чтобы нарезать существующие медиафайлы в соответствии с правилами, описанными выше, и управлять ими с помощью индексных файлов. Для нарезки программного обеспечения обычно используются инструменты, предоставляемые Apple, или сторонние инструменты интеграции.

Компоненты дистрибутива

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

Диаграмма структуры индексного файла

основной индексный файл

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=409037,RESOLUTION=416x234,CODECS="mp4a.40.2, avc1.42001e"
Gear1/prog_index.m3u8

Первая строка:#EXTM3U

Первая строка каждого файла M3U должна быть этим тегом, который действует как маркер

вторая линия:#EXT-X-STREAM-INF

Список атрибутов тега прямо указывает, является ли текущий поток ВИДЕО или АУДИО.

Содержит свойства:

BANDWIDTH указывает скорость передачи данных
PROGRAM-ID Уникальный идентификатор (это свойство было отменено в более поздних версиях протокола)
CODECS указывает тип кодирования потока
РАЗРЕШЕНИЕ: разрешение

файл субиндекса

#EXTM3U
#EXT-X-TARGETDURATION:11
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:10.133333,
fileSequence0.ts
#EXTINF:10.000666,
fileSequence1.ts
#EXTINF:10.667334,
fileSequence2.ts
#EXTINF:9.686001,
fileSequence3.ts
#EXTINF:9.768665,
fileSequence4.ts
#EXTINF:10.000000,
fileSequence5.ts
#EXT-X-ENDLIST

#EXTM3UЗаголовок файла m3u должен располагаться на первой строке.

#EXT-X-TARGETDURATIONМаксимальная продолжительность каждого фрагмента TS.

#EXT-X-VERSIONИспользуется для указания версии протокола.

#EXT-X-MEDIA-SEQUENCEПорядковый номер фрагмента TS.

#EXT-X-PLAYLIST-TYPEПредоставляет информацию об изменчивости PlayList, она действительна для всего файла PlayList и не является обязательной.

#EXTINFдополнительная информация, информация о фрагментированном TS, такая как продолжительность, пропускная способность и т. д.

Разница между основным индексным файлом и субиндексным файлом

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

клиентклиент

Компоненты распространения предоставляются стандартными веб-серверами. Они отвечают за прием клиентских запросов и предоставление клиентам связанных ресурсов.

Процесс разбора компонента videojs-contrib-hls.js

Схема разбора videojs-contrib-hls.js

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

Как упоминалось выше, при воспроизведении живого видео H5 вводится файл .m3u8.Этот файл основан на протоколе HLS и хранит метаданные видеопотока.

Каждый файл .m3u8 соответствует нескольким файлам ts. Эти файлы ts представляют собой данные, которые фактически хранят видео. Файл m3u8 хранит только информацию о конфигурации и соответствующие пути некоторых файлов ts. При воспроизведении видео .m3u8 динамически изменяется . , а затем разобрать этот файл через парсер (videojs-contrib-hls.js) и найти соответствующий файл ts для воспроизведения, поэтому обычно для ускорения скорости .m3u8 размещается на веб-сервере, а ts находится на cdn.

RTMP

Протокол обмена сообщениями в реальном времени (сокращенно RTMP) — это набор протоколов видеотрансляции в реальном времени, разработанный Macromedia и теперь принадлежащий Adobe. Это решение требует создания специальной службы потокового мультимедиа RTMP, такой как Adobe Media Server, и только Flash может использоваться для реализации проигрывателя в браузере. Его производительность в реальном времени очень хороша, а задержка очень мала, но его недостатком является неспособность поддерживать воспроизведение через мобильный Интернет.

На стороне браузера тег видео HTML5 не может воспроизводить видео по протоколу RTMP.video.jsреализовать.

<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
 
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" loop="loop" webkit-playsinline>
<source src="rtmp://10.14.221.17:1935/rtmplive/home" type='rtmp/flv'>
</video>
 
<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
<script>
videojs.options.flash.swf = 'video.swf';
videojs('example_video_1').ready(function() {
this.play();
});
</script>

Сравнение преимуществ и недостатков HLS VS RTMP

протокол	принцип	задерживать	преимущество	недостаток	сцены, которые будут использоваться
HLS(http)	Соберите период данных для создания файлов фрагментов ts и обновления файлов m3u8.	10s-30s	Кроссплатформенность	Высокая задержка	мобильный
RTMP(TCP)	Данные каждого момента отправляются, как только они получены	2s	Низкая задержка и хорошая производительность в реальном времени	Кроссплатформенная разница	ПК + прямая трансляция + высокие требования к реальному времени + сильное взаимодействие

Живой бой (сборка RTMP, служба потокового вещания HLS)

установить нгинкс

brew install nginx

Установите модуль nginx-rtmp

brew install nginx-full --with-rtmp-module

Затем установите FFmpeg (полный инструмент с открытым исходным кодом, который объединяет функции записи, преобразования, кодирования и декодирования аудио/видео, мы будем использовать его для потоковой передачи и нарезки ниже).

brew install ffmpeg

Конфигурационный файл nginx.conf, настройка RTMP, HLS

Найдите файл конфигурации nginx.conf (/usr/local/etc/nginx/nginx.conf) и настройте соответствующую конфигурацию прямой трансляции.

rtmp {
    server {
    	#监听的端口
    	listen 1935;
    	# RTMP 直播流配置
    	application rtmplive {
            live on;
            #为 rtmp 引擎设置最大连接数。默认为 off
            max_connections 1024;
        }
    	# HLS 直播流配置
    	application hls{
            live on;
            hls on;
            hls_path /Users/youname/Documents/notes/live/public/hls;  #这里的路径切片需要保存的路径
            hls_fragment 1s;
        }
    }
}

Добавьте конфигурацию HLS в http:

location /hls {
    # Serve HLS fragments
    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }
    root /Users/youname/Documents/notes/live/public;#切片的路径
    #add_header Cache-Controll no-cache;
    expires -1;
}

перезапустить nginx

sudo nginx -s reload

Проверьте, работает ли порт

netstat -an | grep 1935

Если отображается следующее, дисплей включен.

То же самое верно и для http-порта.

На данный момент мы завершили строительство сервиса.

Адрес RTMP push: rtmp://127.0.0.1:1935/rtmplive/home.
Адрес push-потока HLS: rtmp://localhost:1935/rtmplive/hls.

Команда выполнения FFmpeg

В качестве примера возьмем файл MP4 push-потока, адрес моего видеофайла: /Users/youname/Desktop/w01661pl9vw.p702.1.mp4.

Команда push-протокола RTMP:

ffmpeg -re -i /Users/youname/Desktop/w01661pl9vw.p702.1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/rtmplive/home

Команда push протокола HLS:

ffmpeg -re -i  /Users/youname/Desktop/w01661pl9vw.p702.1.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://127.0.0.1:1935/hls/test

параметр:

Адрес видео: /Users/youname/Desktop/w01661pl9vw.p702.1.mp4
Адрес потоковой передачи: rtmp://127.0.0.1:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/hls

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

Команды функций FFmpeg см. по адресу:Коллекция команд функции FFmpeg

веб-трансляция в прямом эфире

Если мы воспроизводим два метода потоковой передачи, мы используем проигрыватель video.js для воспроизведения (облачный проигрыватель Tencent используется в Niuniu).

Реализация кода протокола RTMP

Следует отметить, что адрес в src заполнен адресом push-потока RTMP. Если во время воспроизведения появляется сообщение «Текущая системная среда не поддерживает воспроизведение этого видеоформата», в браузере необходимо включить флэш-память для нормального воспроизведения.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
</head>
<body>
<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    data-setup='{}'>
    <source src='rtmp://127.0.0.1/rtmplive/home' type='rtmp/flv'/>  
  </p>
</video>
<script type="text/javascript">
   var player = videojs('my-player');
   var options = {};
   var player = videojs('my-player', options, function onPlayerReady() {
     videojs.log('Your player is ready!');
     // In this context, `this` is the player that was created by Video.js.
     this.play();
     // How about an event listener?
     this.on('ended', function() {
       videojs.log('Awww...over so soon?!');
     });
   });
</script>
</body>
</html>

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

src ниже заполнен адресом слайса.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL">
  </video>
</body>
</html>

Эффект

Давайте посмотрим, как это работает на самом деле.

RTMP-рендеринг

ЗОЖ эффект

файлы ts и m3u8

Яма, обнаруженная в реальном бою

проблема с автовоспроизведением
Производительность игроков не одинакова на разных платформах
Сложность отладки внутренних страниц
Проблемы с нативной и веб-коммуникацией

проблема с автовоспроизведением

В браузере ядра X5 для запуска должны использоваться стандартные события, такие как touchend, click, doubleclick или keydown.

Производительность игроков не одинакова на разных платформах

Многие браузеры под Android заменили тег видео собственным стилем и поведением проигрывателя, и контролировать его поведение и стиль сложно.

Сложность отладки встроенных страниц

В настоящее время используется отладка weinre, но отладка weinre не может увидеть фактический эффект в нативном.Например, когда Интернет вызывает нативный, он должен получить обратную связь от нативного.Weinre не может увидеть эффект.

Нативное и веб-общение

Схема и jsBridge, схема может вызывать нативную только из Интернета и не может вызывать сеть из нативной; хотя jsBridge может вызывать сеть из нативной, она не может уведомить сеть, когда iframe не загружен;

Суммировать

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

Добро пожаловать в команду веб-разработчиков Futu,Оригинальная ссылка

Использованная литература:

Как построить полноценную систему прямой видеотрансляции?

Прямая трансляция H5 отправилась в плавание

Есть ли проигрыватель HTML5, поддерживающий формат M3U8?

HTTP Live Streaming (HLS) — Основные понятия

Объяснение формата M3U8 и анализ практического применения