Как разработать апплет H5 в прямом эфире

1 Обзор

В последние годы слово «большой интерфейс» стало популярным: если это не большой интерфейс для интерфейса, то технология относительно отсталая. Если вы все еще остаетесь наES6,VueМожно сказать, что изучение этих основных навыков происходит только в очереди.

Если вы хотите быть превосходным, вы должны иметь некоторые другие важные навыки интерфейса, такие какNodeJS,express.js,koaJsкласс обслуживания илиthree.jsтакого рода3dИзображения данных и обработка 2D-изображений, напримерd3,raphael,echart, наконецhls,flvвидеоиндустрия.

если толькоES6,Vue,React,WebpackЭто можно рассматривать только как передний конец, а большой передний конец должен владеть хотя бы одним из вышеперечисленных навыков. Эта статья представляет живое видео в большом поле интерфейса.

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

2. Установка инструмента

Здесь мы сначала опишем метод работы системы Mac.windowsСпособ установки системы следующий. Необходимые инструменты я уже прошелgithub, вы можете скачать его самостоятельно.git-адрес

serverэто потоковый инструмент,toolsНеобходимо установить следующие инструменты.

1. Установите ffmpeg на Mac

Сначала нужно установитьYASM, если не установленyasmЕсли да, то сообщитFFmpeg yasm/nasm not found or too old. Use --disable-yasm for a crippledbuildЭта проблема, если не установленsdlЕсли установка завершенаFFmpegПозже,binнет каталогаffplayэтот файл.

Установитьyasmyasm;

# 可以在h5live中找到yasm
cd /h5live/tools/yasm-1.3.0
# 配置
./configure
# 编译 & 安装
 make
 sudo make install

Установитьsdlsdl;

# 切可以在h5live中找到sdl目录
cd /h5live/tools/SDL2-2.0.8
# 配置
./configure
# 编译 & 安装
make -j 16
sudo make install

Установитьffmpegffmpeg;

# 切可以在h5live中找到ffmpeg，prefix为要安装到的位置
cd /h5live/tools/ffmpeg-4.3
# 配置
./configure --prefix=/usr/local/ffmpeg --enable-debug=3 --enable-shared --disable-static
# 编译 & 安装
make -j 4 
sudo make install

настраиватьffmpegМягкие ссылки, эквивалентные переменным среды, предназначены для использования в любом каталоге.ffmpegЗаказ,/usr/local/ffmpeg-4.3/ffmpegэто путь установки

ln -s /usr/local/ffmpeg-4.3/ffmpeg /usr/local/bin/ffmpeg

2. Система Windows

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

скачатьffmpeg:

Когда вы посетите страницу загрузки, вы увидите множество различных вариантов загрузки. Вы можете загрузить последнюю 32-битную или 64-битную статическую версию программы в зависимости от вашей операционной системы.

Установить:

Щелкните меню «Пуск», а затем щелкните «Компьютер». выберите установитьWindowsсистемный диск (обычноC:). существуетC:в корневом каталоге диска (есть каталог с именемWindowsа такжеProgram FilesПапка), щелкните правой кнопкой мыши и выберите «Новая папка» во всплывающем меню. Назовите новую папку какffmpeg.将下载的ffmpegРасстегните ZIP-файл в эту папку.

добавить в переменную окруженияffmpegкоманда запуска,c:\ffmpeg\bin, широко известные как переменные среды конфигурации.

Откройте окно командной строки и введите командуffmpeg –version. Если окно командной строки возвращаетсяFFmpegинформация о версии, значит установка прошла успешно, запустить можно в любую папку в командной строкеFFmpeg.

если вы получитеlibstdc++ -6 is missingсообщение об ошибке, то вам может потребоваться установитьMicrosoft Visual C++ Redistributable Package, который находится в свободном доступе на веб-сайте Microsoft.

3. Запустите сервер

очень просто, введите изgithubполучен изh5liveсерединаserverкаталог, запуститьserverпрограмма.

cd /h5live/server
open server

Вы можете видеть, что здесь указаны пути трех протоколов, а именноrtmpпротокол1935интерфейс,http-flvпротокол7001порт иhlsиз7002порт.

4. Выполните push-поток

Найтиmp4отформатировать видеофайл, предполагая, что этот файл называется1.mp4, допустимый1.mapВыполните следующую команду в папке, где она находится.

ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://127.0.0.1:1935/live/movie

Появляется эффект следующего рисунка1.MP4Видео начало транслироваться.

5. Видеоверификация

было сказано вышеserverИнструмент обеспечивает видеопотоки трех протоколов, а именноrtmp,http-flvтак же какhls.

можно использоватьVLCВерификация игрокаrtmpпротокол потокового видео.

вставитьrtmp://127.0.0.1:1935/live/movie

Тогда вы сможете увидеть эффект прямой трансляции.

скачатьVLCигрок:

1. Система Mac

Mac OS X

2. Система Windows

Windows

hlsПотоковое мультимедиа протокола может быть использованоSafariБраузер открывается прямо для просмотра. можно напрямую поставитьhttp://127.0.0.1:7002/live/movie.m3u8помещатьSafariПроверьте эффект в адресной строке вашего браузера.

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

# RTMP，可以使用VLC播放器
rtmp://127.0.0.1:1935/live/movie
# FLV
http://127.0.0.1:7001/live/movie.flv
# HLS 可以使用Safari浏览器访问
http://127.0.0.1:7002/live/movie.m3u8

6. Игрок Н5

Это часть, о которой действительно нужно заботиться интерфейсу, в основном знакомя с тем, как использоватьjsЧтобы написать живой проигрыватель, безопаснее всего выбрать некоторые существующие передовые практики, которые могут быстро удовлетворить потребности бизнеса.Вот три проигрывателя и их использование. Я также отправил тот же кодgithubначальство.

video.jsЭто популярный видео-фреймворк за границей.Его специальность - сделать очень хороший пользовательский интерфейс, который соответствует сцене готового онлайн-продукта, за исключением пользовательскихui, также предоставляет множество подключаемых модулей, таких как заградительный огонь, сочетания клавиш,hlsподдержка и так далее. Он является относительно полнымjsФреймворк, по запросу и прямая трансляция все подходит, но минус в том, что размер файла большой.

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

flv.jsдаBОткрытый исходный кодflvформатировать плеер, если даhttp-flvОн очень подходит для прямой трансляции протокола.

Что касаетсяrtmpсуществуетH5Обычно он не используется в прямом эфире, поэтому я не буду говорить о нем здесь.

7. Разрабатывайте с помощью videojs

существуетgithubоказатьсяvideojs, Вы можете найти следующие два файла по этому URL-адресу, загрузить их и разместить локально.

существуетVideo.jsПлагинов в документации к плагинам на оф.сайте очень много, из них вы сможете найти то, что вам нужно.https://videojs.com/plugins/

videojs-contrib-hlsявляется поддержкойhlsжитьvideoплагин. оказатьсяcdn, БудуjsСохранить на локальном. Способ использования очень прост, просто установите плагинjsПросто импортируйте его.

Будуvideo.min.jsа такжеvideojs-contrib-hls.jsтак же какvideo-js.min.cssна страницу,sourceНапишите адрес на этикеткеhlsизm3u8адрес суффикса. Вот и все.

Обратите внимание, что это необходимо просматривать в среде сервера.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
        <source
           src="http://127.0.0.1:7002/live/movie.m3u8"
           type="application/x-mpegURL">
      </video>
    <script src="video.min.js"></script>
    <script src="videojs-contrib-hls.js"></script>
    <script>
        var player = videojs('example-video');
        player.play();
    </script>
</body>
</html>

можно увидетьvideojsпомогите разобраться с этимuiвопрос. Это шахтная конструкция, которую можно быстро использовать.

8. Используйте hls.js для разработки живой страницы

нужно скачатьhlsкод, вы можете перейти кgithubнаходясь в поиске,https://github.com/video-dev/hls.js.

Он также очень прост в использовании, потому чтоhls.jsне предоставилUIстиль, поэтому просто импортируйтеjsВот и все.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video id="video" controls width="400" height="300"></video>
    <script src="hls.js"></script>
    <script>
        var video = document.getElementById('video');
        var videoSrc = 'http://127.0.0.1:7002/live/movie.m3u8';
        if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = videoSrc;
        }
    </script>
</body>
</html>

9. HTTP-FLV

flv.jsдаBОткрытый исходный кодflvПлеер, который, можно сказать, является гордостью китайцев, также очень прост в использовании. также импортироватьflv.js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="flv.js"></script>
    <video id="videoElement" controls width="400" height="300"></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://127.0.0.1:7001/live/movie.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>

10. Прямая трансляция мини-программы WeChat

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

Прямая трансляция программы WeChat Mini использует медиакомпонентыlive-player, а он только поддерживаетflvилиrtmpФормат, что особенно важно при подтверждении технических решений на фронте и бэкенде. Кроме того, он открыт только для соответствующей отрасли. Посмотреть ссылку можно здесьhttps://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

Чтобы открыть мини-программы, соответствующие вышеуказанным категориям, вам необходимо сначала пройти проверку категории, а затем в фоновом режиме управления мини-программой "开发"-"接口设置», чтобы активировать разрешение этого компонента самостоятельно.

После включения этого разрешения вы можете использоватьlive-playerКомпонент разрабатывается вживую. Он также очень прост в использовании.

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />

Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})

Здесь следует отметить, что инструмент разработчика не может быть трансляцией, и можно использовать только удаленную отладку. Подключитесь к телефону для просмотра эффекта.live-playerширина по умолчанию300px,высоко225px,доступныйwxssУстановите ширину и высоту.

слишком далекоH5И разработка апплета в прямом эфире завершена. Вышеупомянутого контента достаточно для выполнения задач по разработке прямого эфира на работе и возможного бизнеса в прямом эфире.

Далее я расскажу о процессе, протоколе и основе прямой трансляции.nginxСоздайте сервис прямых трансляций. Содержимое частично связано с теорией и обслуживанием. Он имеет мало общего с передней частью и может быть пропущен.

11. Процесс прямой трансляции

Для процесса прямой трансляции первым является сбор медиаданных, таких как видео и аудио.Как правило, существует три типа сборщиков.PC端,安卓端так же какIOS端, их работа также зависит от摄像头а также麦克风из. Как правило, люди, ведущие прямые трансляции, предпочитают покупать профессиональные камеры и микрофоны. Данные, собранные здесь, находятся в формате потока, то есть двоичные данные, и данные здесь будут проходить черезsocketилиhttpЗагрузить на сервер.

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

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

После обработки видео и аудио проводится точка потоковой передачи, то есть видео и аудио нажаты на сервер, который используется выше.ffmpegБуду1.mp4процесс отжимания.

На работе сервер развернет загруженные потоковые мультимедиа, а затем отправит ресурсы вCDN, как правило, статические ресурсы или мультимедийные ресурсы будут опубликованы наCDNЧтобы обеспечить пользовательский опыт и скорость вытягивания.

Прямой доступ для клиентовCDNадреса, так же и здесь клиент может бытьPC,安卓илиIOSигрок.

Выше приведен простой процесс обработки прямой трансляции.

12. Формат видео

Наиболее распространенными форматами видео являютсяmp4, совместимость у него очень хорошая, поддерживаются Google, Firefox, Apple, IE и другие браузеры.webmэто формат потокового видео, обычно используемый вyoutubeвеб-сайт, но этот формат поддерживается только Google и Firefox.

hlsСтрого говоря, он не видеоформат, он видеопротокол, его видеоформатts, чтобы отличить, вообще его назовитеhls, этот формат разработан самой Apple, поэтомуSafariБраузер может напрямую поддерживать его, когда приведенная выше демонстрацияhlsразмещается непосредственноSafariАдресная строка браузера может воспроизводиться напрямую.

flvраноflashформат видеоBСтанции приняли этот формат на раннем этапе, даже сейчасBСтанция также поддерживаетсяH5игрок иflashигрока.

13. Соглашение о прямой трансляции

Три наиболее часто используемых протокола для прямой трансляции:HLSпротокол,RTMPсоглашение иHTTP-FLVпротокол.HLSсоответствуетhlsформат видео.ts.RTMPа такжеHTTP-FLVвсе соответствуютflvформат видео.

HLSПротокол является самым простым и наиболее часто используемым, это протокол прямых трансляций, запущенный Apple, его принцип работы относительно прост.H5обычно проходятvideoэтикетка, получить один от клиентаM3U8индексный файл, этоM3U8будут размещены непосредственно наvideoизsrcв пути.

потому чтоM3U8является индексным файлом, он будет разобран на множество.tsСегменты, каждый сегмент является сегментом прямой трансляции.

браузерvideoТег будет запрошен снова в какой-то моментm3u8, получить новый сегмент прямой трансляции, чтобы реализовать воспроизведение прямой трансляции в реальном времени, и отправитьm3u8Запрос является автономным поведением браузера.

<body>
    <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
        <source
           src="http://127.0.0.1:7002/live/movie.m3u8"
           type="application/x-mpegURL">
      </video>
    <script src="video.min.js"></script>
    <script src="videojs-contrib-hls.js"></script>
    <script>
        var player = videojs('example-video');
        player.play();
    </script>
</body>

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

Если текущийm3u8содержитm3u8файл, то текущий файл вызываетсяmaster playlist.

Если текущийm3u8Файл содержитts, потом позвонилmedia playlists.

Это не распространено, но существует и требует особого внимания. Если файл потока, полученный во время прямого эфира, не воспроизводится, возможно, плеер не поддерживает такой вид вложенности.

m3u8Делится на динамический список, статический список, полный список. В индустрии прямого вещания в основном нет статического списка, он просто существует в стандарте.

Динамический список в основном используется в процессе прямой трансляции, а полный список чаще всего используется для on-demand, то есть записи и трансляции.m3u8Результатом ответа является текстовый файл.

Первая строка указываетm3u8версии, это более важно, так как напрямую относится к версии hls, поддерживаемой плеером.Если версия не поддерживает, некоторые из следующих команд могут не парситься.

Вторая строка — это объявление версии, по умолчанию3, третья строка — продолжительность видео по умолчанию, четвертая строка — количество блоков видеопотока, каждый запрос будет добавлять1, а дальше видеоtsфайл, фронт9.901это этоtsПродолжительность файла. Это определяетvideoвозобновитьm3u8тайминг файла.

Файлы возврата статического и динамического списков аналогичны, за исключением того, что в пятой строке добавлен еще один.playlist-typeзначениеevent. Другие ничем не отличаются.

В полном списке есть еще две вещи, чем в динамическом списке.playlist-typeзначениеvod, и дноext-x-endlistОт имени конца браузер узнает это поле и не будет отправлять дополнительные запросы.

Для первогоtsфайл, у него будетPATпакет, этоPATПакет говорит найти одинPMTупаковка,PMTрасскажет всеTSКакие видеоTSкоторые аудиоTS. многоTSсформироватьPESс вещами.

Подобно браузеру для разбора видео, ему сначала нужно знать видеокадр и аудиокадр, в первую очередьtsФайл сообщит браузеру, сначала ищаPAT, искатьPMT, найти сноваTSфайл, затемTSЗатем файлы классифицируются в соответствии с видео и аудио.tsСоставьте кадр.

14. RTMP-протокол

RTMPдаReal Time Messaging Protocol(Протокол обмена сообщениями в реальном времени). Соглашение основано наTCP, представляет собой семейство протоколов, включающееRTMPосновное соглашение иRTMPT/RTMPS/RTMPEи многие другие варианты.RTMPЭто сетевой протокол, предназначенный для передачи данных в режиме реального времени, в основном используемый вFlash,AIRПлатформа и поддержкаRTMPПередача аудио, видео и данных между потоковыми медиа/интерактивными серверами протокола.

Взаимодействие между традиционным программным обеспечением и серверами по-прежнему основано наRTMPВ основном, например, упомянутая выше коллекция видео и аудио основана наPCКлиент является основным.Если клиент собирает через программное обеспечение, это в основном основано наRTMP, если коллектор используетH5Его согласие обычноwebrtc. Это два разных технических решения. При сбореRTMPВидео во время передачи такжеflvформат. Что-то, чтобы обратить внимание на здесь.

15. Протокол HTTP-FLV

RTMPчемHLSПротокол немного сложнее в использовании, потому что он основан наTCPсоглашение.HLSОн очень прост в использовании, но его производительность в реальном времени будет хуже, то есть у него есть задержка, и чем больше срезов, тем больше задержка.HTTP-FLVКомбинированныйHLSПреимущество в том, чтоhttpзапрос, а затем собралRTMPФункция низкой задержки.

HTTP-FLVа такжеRTMPВсе соединения длинные, и формат передачи тожеflv, разница в том, что они иCDNссылка и ссылка игрока,RTMPдаTCPа такжеHTTP-FLVдаHTTP.

HTTP-FLVотносительноRTMPЕсть много преимуществ, например, он может в определенной степени избежать вмешательства брандмауэров и может быть хорошо совместимHTTP302Перейти, чтобы добиться гибкого планирования, вы можете использоватьHTTPSВ качестве зашифрованного канала он вполне может поддерживать мобильный терминал (安卓和IOS).

16. Введение тега видео

здесь, чтобы добавитьvideoЗнание тегов для большинства фронтенд-разработок не имеет реального пониманияvideoТеги, его свойства, его события. Многие люди застряли, зная, что он является тегом видео, может воспроизводить, приостанавливать, регулировать громкость и имеет атрибут src.

Это очень опасно,VideoЭтикеткаH5Запуск очень мощного мультимедийного тега, можно сказать, что он будущее средств массовой информации в Интернете.

Раздел свойств ярлыка:

<video 
    src="test.map" 
    width="400" 
    height="225" 
    controls
    controlslist="nodownload nofullscreen" 
    poster="预览图" 
    autoplay
    muted
    loop
    preload
 ></video>

элементы управления: нижняя панель управления

controllist: настройка нижней панели управления

постер: изображение для предварительного просмотра

автовоспроизведение: автовоспроизведение

muted: отключить звук (видео с отключенным звуком на мобильном устройстве не могут воспроизводиться автоматически, вы должны отключить звук, если хотите воспроизводиться автоматически)

цикл: циклическое воспроизведение

preload: preload, производительность каждого браузера непостоянна, особенно мобильного терминала, при необходимости лучше добавить.

Часть управления JS:

громкость: громкость (0 - 1)

currentTime: установите, чтобы получить текущее время воспроизведения, единицы измерения — секунды, адреса сверхчистого и высокого разрешения различаются, и при переключении адреса требуется время позиционирования.

src: получить адрес видео

video.volume = 0.5;
video.currentTime = 60;
video.src;

в состоянии пройтиsourceОшибка совместимого видеоадреса тега, этот случайjsНужно использоватьcurrentSrcПолучить текущий адрес.

<video>
    <source src="./test.map" type="video/mp4"></source>
    <source src="./test2.map" type="video/mp4"></source>
</video>

видео событие:

loadstart: Видео начинает загружаться.

durationchange: продолжительность изменяется, указывая на то, что продолжительность видео может быть получена.

loadedmetadata: событие loadmetadata происходит, когда указанные метаданные аудио/видео были загружены.

загруженные данные: событие загруженных данных происходит, когда данные для текущего кадра загружены, но данных недостаточно для воспроизведения следующего кадра указанного аудио/видео.

прогресс: событие прогресса происходит, когда браузер загружает указанное аудио/видео

canplay: событие canplay происходит, когда браузер может начать воспроизведение указанного аудио/видео.

canplaythrough: событие canplaythrough возникает, когда ожидается, что браузер сможет продолжить воспроизведение указанного аудио/видео без остановки для буферизации.

play: событие воспроизведения запускается, когда состояние паузы изменяется на состояние воспроизведения.

seek: событие, которое срабатывает при переключении индикатора выполнения.

seeked: Поиск будет выполнен после загрузки данных.

Ожидание: при воспроизведении, поиск будет вызвать ждать. То есть воспроизведение будет ждать, если не хватает данных для поддержки воспроизведения.

Игра: Играйте в штате.

timeupdate: событие обновления времени воспроизведения.

окончено: игра окончена

ошибка: событие ошибки.

17. Вручную создайте живой сервер

Ранее комплексное использованиеserverИнструмент создает живой сервер, который используется здесьnginxВручную соберите аналогичный сервер, а потом разберитесь в его рабочем процессе.

Сначала нужно установитьnginxа такжеffmpegинструмент.

После установки инструмента запустите настройкуnginx. существуетnginx.confКонфигурация файла, необходимо настроить сервисRTMPМодуль, откройте новый блок кода в нижней части файла конфигурации с именемrtmp, написать монитор внутри1935порт, настройки размера видеофрагмента4000, вы также можете установить его самостоятельно, а затем настроитьrtmpприложение для прямых трансляцийrtmplive, при настройкеhlsприложение для прямой трансляции.

rtmp {
    server {
        # 监听端口
        listen 1935;
        # 切片大小
        chunk_size 4000;
        # RTMP 直播流配置
        application rtmplive {
            # 开启直播
            live on;
            # 最大连接数
            max_connections 1024;
        }
        # hls直播流配置
        application hls {
            live on;
            hls on;
            # 分割文件存储的位置
            hls_path /usr/local/var/www/hls;
            # hls分片大小
            hls_fragment 5s;
        }
    }
}

После настройки вам необходимоhttpНастройте место доступа в модуле. допустимыйserverувеличение блокаlocation.

server {
    listen 8080;
    ...
    locaton /hls {
        # 声明相应类型, 也就是响应头
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        # 目录指向rtmp块中切片的目录
        root /usr/local/var/www;
        # 禁止缓存
        add_header Cache-Control no-cache;
    }
}

слишком далекоnginxНастройка завершена, можно перезапуститьnginxпровести тестирование.

nginx -s reload

Точно так же можно найти предыдущий1.mp4использоватьffmpegчтобы подтолкнуть поток. В этом видео используетсяlibx264кодирование, аудио с использованиемaacкод, сделатьflvподтолкнуть кrtmp://localhost:1935/rtmplive/rtmpдоменное имя, это1935установитьrtmpпорт,rtmpliveэто имя приложения.

ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtmp

-я: ввод

-vcodec: кодирование видео

acodec: кодирование звука

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

ЭтоrtmpПрямая трансляция протокола, вы можете использоватьvlcиграть, покаfile/open networksввод вrtmp://localhost:1935/rtmplive/rtmpготов играть.

Давайте покажем это сноваHLSИсходные файлы, сделанные здесь,ffmpegКоманды в основном такие же, но путь нужно изменить. надnginxнастроенrtmpliveа такжеhlsдва.hlsНеобходимо использовать потоковую передачуrtmp://localhost:1935/hls/stream, здесьstreamВы можете начать по своему желанию, но отношение имен — это адрес, к которому обращаются позже.

ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream

здесьhlsдаhttpСоглашение раньшеnginxизhttpСоглашение также добавляетhlsпуть доступа.httpможно использовать адресSafariдоступ через браузер. Доступ к нему также можно получить с помощью проигрывателя, разработанного вами выше.

http://localhost:8080/hls/stream.m3u8

http-flvКомпиляция более сложна, поэтому я не буду подробно о ней рассказывать. слишком далекоH5И прямая трансляция апплета закончена.