Налаштуйте Nginx на Ubuntu для потокової трансляції HLS відео

HTTP Live Streaming (HLS) — це дуже надійний протокол потокового відео, реалізований Apple Inc. HLS використовує HTTP-транзакції, які обходять брандмауери, проксі та можуть легко розповсюджуватися через CDN. Таким чином, ця технологія здатна охопити набагато більшу аудиторію перегляду, ніж RTP або інші протоколи на основі UDP. Велика частина потокового відео в прямому ефірі сьогодні розміщується в дорогих системах, які використовують HLS, але вони, як правило, дорогі та вимагають багато ресурсів сервера. Цей підручник покаже вам, як налаштувати дуже доступний VPS Ubuntu 14.04 VULTR для проведення подій у прямому ефірі HLS, використовуючи лише програмне забезпечення з відкритим кодом.

Першим кроком є ​​прочитання та налаштування сервера відповідно до Vultr Doc « Налаштування Nginx-RTMP на Ubuntu 14.04 ». Інструкції в цьому документі були найбільш вичерпними для етапу налаштування на момент написання. Я хотів би зазначити, що ви можете замінити «nginx-1.7.5» на «nginx-1.9.4» або будь-яку останню версію Nginx. Інша пропозиція — компілювати Nginx з модулем статусу заглушки HTTP, щоб дати собі можливість відстежувати, скільки глядачів HLS у вас буде згодом.

Замість компіляції з:

./configure --with-http_ssl_module  --add-module=../nginx-rtmp-module-master

Використовуйте цей рядок у процедурі, описаній у документі з обов’язковими умовами:

./configure --with-http_ssl_module --with-http_stub_status_module --add-module=../nginx-rtmp-module-master

Приклад у цьому підручнику створюватиме як «живі», так і «мобільні» (оптимізовані) потоки, а також використовуватиме ffmpeg (встановлений у попередньому підручнику) для створення оптимізованого для мобільних пристроїв потоку HLS з коригуванням швидкості передачі даних. У прикладі також буде показано, як змусити сервер автоматично записувати ваші прямі трансляції та дозволити вам відтворювати записи як сервіс відтворення відео на вимогу (VOD).

Спочатку створіть структури папок, необхідні для зберігання маніфестів і відеофрагментів HLS в реальному часі та мобільних пристроїв:

sudo mkdir /HLS
sudo mkdir /HLS/live
sudo mkdir /HLS/mobile
sudo mkdir /video_recordings
sudo chmod -R 777 /video_recordings

Мабуть, було б гарною ідеєю ввімкнути брандмауер, якщо ви ще цього не зробили. Якщо так, ви повинні дозволити трафік до портів, які використовуються Nginx і HLS. Якщо ви зараз хочете працювати без брандмауера, проігноруйте розділ ufw нижче.

sudo ufw limit ssh
sudo ufw allow 80
sudo ufw allow 1935
sudo ufw enable

Потокова трансляція HLS вимагає значно відмінної конфігурації Nginx від конфігурації RTMP у першій статті. Відредагуйте свій nginx.confфайл, щоб використовувати наступне, замінивши "my-ip" і "my-stream-key" своєю інформацією. Ви можете використовувати все, що забажаєте, для "my-stream-key", це просто унікальне та корисне для вас слово. Ви можете спочатку створити резервну копію свого оригінального файлу конфігурації, а потім вставити надану мною інформацію про конфігурацію в редактор, замінивши все, що там було:

sudo cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.original
sudo nano /usr/local/nginx/conf/nginx.conf

Новий nginx.conf:

worker_processes  1;
error_log  logs/error.log debug;
events {
worker_connections  1024;
}
rtmp {
server {
listen 1935;
allow play all;

#creates our "live" full-resolution HLS videostream from our incoming encoder stream and tells where to put the HLS video manifest and video fragments
application live {
allow play all;
live on;
record all;
record_path /video_recordings;
record_unique on;
hls on;
hls_nested on;
hls_path /HLS/live;
hls_fragment 10s;

#creates the downsampled or "trans-rated" mobile video stream as a 400kbps, 480x360 sized video
exec ffmpeg -i rtmp://192.168.254.178:1935/$app/$name -acodec copy -c:v libx264 -preset veryfast -profile:v baseline -vsync cfr -s 480x360 -b:v 400k maxrate 400k -bufsize 400k -threads 0 -r 30 -f flv rtmp://192.168.254.178:1935/mobile/$;
}

#creates our "mobile" lower-resolution HLS videostream from the ffmpeg-created stream and tells where to put the HLS video manifest and video fragments
application mobile {
allow play all;
live on;
hls on;
hls_nested on;
hls_path /HLS/mobile;
hls_fragment 10s;
}

#allows you to play your recordings of your live streams using a URL like "rtmp://my-ip:1935/vod/filename.flv"
application vod {
play /video_recordings;
}
}
}


http {
include       mime.types;
default_type  application/octet-stream;

server {
listen 80;
server_name 192.168.254.178;

#creates the http-location for our full-resolution (desktop) HLS stream - "http://my-ip/live/my-stream-key/index.m3u8"      
location /live {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/live;
add_header Cache-Control no-cache;
}

#creates the http-location for our mobile-device HLS stream - "http://my-ip/mobile/my-stream-key/index.m3u8"        
location /mobile {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/mobile;
add_header Cache-Control no-cache;
}   

#allows us to see how stats on viewers on our Nginx site using a URL like: "http://my-ip/stats"     
location /stats {
stub_status;
}

#allows us to host some webpages which can show our videos: "http://my-ip/my-page.html"     
location / {
root   html;
index  index.html index.htm;
}   
}
}

Натисніть Ctrl + X, щоб вийти. Скажіть «так», щоб зберегти зміни.

Ви можете знайти чіткі інструкції та приклади можливих змінних у цьому nginx.confфайлі, якщо запитаєте у улюбленій пошуковій системі «директиви nginx-rtmp». Я використовую nginx-rtmp з HLS вже кілька років, не використовуючи директиви «дозволити публікувати» та «заборонити публікацію», і я не бачив жодного випадку, щоб люди використовували/вторглися на мої відеосервери. Тому я не включив ці директиви сюди. Прочитайте та додайте ці директиви, якщо хочете.

Після зміни nginx.confфайлу ви повинні перезапустити Nginx, щоб використовувати нову конфігурацію:

sudo service nginx restart

Уважно стежте за будь-якими повідомленнями про помилки Nginx і вирішуйте будь-які помилки, які могли бути спричинені неправильним написанням, правом власності на папку або проблемами з дозволами. Якщо у вас немає повідомлень про помилки, ви готові створити свій потік кодування.

Щоб створити потік, потрібно мати відеокодер. Я використовую OBS (Open Broadcaster Software) – програмне забезпечення з відкритим кодом і для мене добре працює. Є й інші рішення на вибір, які виходять за рамки цього підручника. Я не буду описувати все про налаштування відеокодера RTMP. Проте всі вони вимагають приблизно однакових вхідних змінних. Основні налаштування, які вам потрібно буде ввести, щоб використовувати мою точну nginx.confконфігурацію та добре функціонувати на більшості програвачів/браузерів/платформ, є такими:

1. Кодер-x264
2. Змінний бітрейт (не CBR чи постійна швидкість передачі даних), найвища якість
3. Максимальний бітрейт - 600 кбіт/с
4. Аудіо-кодек-AAC
5. Аудіо-формат-44,1 кГц
6. Аудіо-бітрейт-64 кбіт/с
7. URL-адреса FMS-"rtmp://my-ip:1935/live"
8. Ключ потоку-"my-stream-key"
9. Роздільна здатність - 640x480
10. FPS (кадрів в секунду) -30
11. CFR (постійна частота кадрів) – Так
12. Інтервал між ключовими кадрами – 2 секунди (один ключовий кадр кожні 2 секунди)
13. x264 Encoding Profile-baseline (може працювати з основним — залежить від використовуваного програвача)
14. Присутній процесор x264 - дуже швидкий

Я рекомендую спробувати різні кодери та поекспериментувати з ними. Ви можете побажати широке співвідношення сторін, або ваша камера (або інші трансляційні) матеріали можуть вимагати цього. Якщо так, не забудьте змінити цю інформацію у своєму кодері, а також співвідношення сторін, зазначене в розділі exec-ffmpeg nginx.confфайлу, який я надав; інакше ви отримаєте кілька дурних відеоканалів.

Коли ваш кодер налаштовано, ви можете все це перевірити. Запустіть кодер за допомогою вашої веб-камери або якогось тестового корму, що працює на ній. На цьому етапі ви можете переглянути свою трансляцію за допомогою програвача VLC, використовуючи такі URL-адреси:

http://my-ip/live/my-stream-key/index.m3u8
http://my-ip/mobile/my-stream-key/index.m3u8

Вони призначені для основного та мобільного відеопотоків відповідно. Замініть свою IP-адресу та ключ потоку відповідно.

Після того, як ви успішно транслювали свою першу перевірку потоку (через ssh або ftp), ваша пряма трансляція була записана в /video_recordingsпапку на вашому Vultr VPS. Ви також можете спробувати відтворити цей записаний файл у VLC з URL-адресою:

rtmp://my-ip/vod/filename.flv

Статистика Nginx також доступна (з Nginx stub_status). Щоб переглянути статистику відвідувачів/глядачів, перейдіть до:

http://my-ip/stats

Щоб переглянути відео на веб-сторінці, вам знадобиться вбудований програвач. Доступно багато вбудовуваних програвачів, які відтворюють відео HLS. Я використовую JW Player вже кілька років, але безкоштовна версія не підтримує HLS. Flowplayer і Bitdash від Bitmovin (серед інших рішень) досить щедрі, щоб безкоштовно запропонувати некомерційну версію своїх програвачів, яка дозволить зробити ваш потік HLS вбудованим у веб-сторінку. У цій статті я спробував обидва і виявив, що вони добре працюють з моїм відеосервером на базі Vultr/Nginx. Я коротко покажу, як я запустив Flowplayer з моєю тестовою машиною.

Якщо ви збираєтеся використовувати пряму трансляцію HLS будь-яким звичайним, постійним або комерційним способом, я б радив вам придбати ліцензію у Flowplayer або будь-якого іншого програвача, який ви вирішите використовувати. Ви отримаєте програвач, який має менше обмежень, більше функцій і може бути брендованим для вашої організації. Ви також отримаєте підтримку, що може бути дуже важливим. Крім Vultr VPS, це насправді єдина вартість, пов’язана з проектом.

Перш ніж робити що-небудь інше, важливо подбати про те, що називаються «междоменними» обмеженнями, які в іншому випадку вимкнули б вашу можливість потокової передачі на веб-сторінку/веб-сайт. Створіть crossdomain.xmlфайл у своїй nginx/htmlпапці та додайте в нього інструкції, щоб дозволити передачу даних між доменами:

sudo nano /usr/local/nginx/html/crossdomain.xml

Спочатку скопіюйте (з цієї сторінки), а потім вставте (клацніть правою кнопкою миші) у поле редактора nano такі дані XML:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>

Натисніть Ctrl + O, щоб записати, потім Ctrl + X, щоб зберегти файл на диск і вийти.

Я взяв HTML5 (версія 6.0.3) Flowplayer, який дав мені ряд файлів і папку під час розархівування. Я завантажив усі файли та папку до підпапки кореневої папки Nginx/HTML, яку я назвав «flowplayer». Точний шлях був /usr/local/nginx/html/flowplayer.

Щоб перевірити наше відео, яке вбудовано у веб-сторінку, створіть пару файлів HTML у корені папки Nginx/HTML за допомогою nano та заповніть їх таким вмістом.

Файл:

sudo nano /usr/local/nginx/html/hls.html

HTML-код:

<!doctype html>
<head>
<link rel="stylesheet" href="#">
</head>

<body>
640x480 664kbps (live) Desktop Browsers<br>
<div style="width:640px;" class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src="">
</video>
</div>
<br><br>
480x360 464kbps (mobile) Mobile Browsers <br>
<div style="width:480px;" class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src="">
</video>
</div>
</body>

Файл:

sudo nano /usr/local/nginx/html/hls_progressive.html

HTML-код:

<!doctype html>
<head>
<link rel="stylesheet" href="#">
<style> .flowplayer { width: 640px; } </style>
</head>

<body>
<div class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src=""> 
<source type="application/x-mpegurl" src="">
</video>
</div>
<br>
</body>

Обов'язково замініть "my-ip" і "my-stream-key" своїми даними.

Ви повинні замінити шлях flowplayer/skin/functional.cssдля знака "#" у таблиці стилів href="#". Програмне забезпечення підручника розбирає шлях. Ви повинні заповнити URL-адресу в src=""частині - вона видаляється програмним забезпеченням підручника, використовуйте http://my-ip/live/my-stream-key/index.m3u8і http://my-ip/mobile/my-stream-key/index.m3u8, відповідно. Ви також повинні додати srcтеги сценарію в заголовок для обох jquery-1.11.2.min.jsі для flowplayer.min.js. Теги видаляються за допомогою навчального програмного забезпечення. Ви можете дізнатися, як створити ці теги, переглянувши example htmlфайл, що входить до комплекту Flowplayer.

Запустіть кодер за допомогою вашої веб-камери або якогось тестового корму, що працює на ній. Ви можете переглянути свою трансляцію у веб-переглядачі, використовуючи такі URL-адреси:

http://my-ip/hls.html
http://my-ip/hls_progressive.html

На першій сторінці просто показано кожен з ваших потоків - основний і мобільний платформний. Ви зможете запустити їх обидва та переглянути. Ви помітите, що потік мобільної платформи менший за розміром. Ці дії призначені лише для того, щоб переконатися, що все працює.

На другій сторінці показано один потік. Але він налаштований способом, який називається «прогресивним потоком». Це означає, що коли глядач відтворює відео, як сервер, так і програвач намагаються надати глядачеві високоякісний потік із високим бітрейтом, якщо з’єднання глядачів може його підтримувати. Якщо їхнє з’єднання погане і воно не може підтримувати з’єднання, воно згортається до показу потоку з нижчим бітрейтом (мобільний), який на 200 кбіт/с нижчий за пропускною здатністю. Якщо ви бажаєте, ви можете створити більш плавні, прогресивні потоки за допомогою ffmpeg і налаштувати їх за допомогою мого прикладу.

Я перевірив цю конфігурацію на одному ядрі, 1 ГБ Vultr VPS, і я виявив, що з одним прямим потоком, а також мобільним потоком із транс-рейтингом, який він створює за допомогою ffmpeg, використання процесора було менше 35% і він споживав лише 100 МБ мій 1 ГБ оперативної пам'яті. Тепер це дуже ефективне налаштування.

Якщо ви плануєте транслювати відео, розмір якого в пікселях набагато більше, ніж SD, ви можете виявити, що вам доведеться використовувати потужніший VPS. Мені це було цікаво, і я запустив свій основний потік до 1280x960 пікселів і 2 Мбіт/с, що створило додаткове навантаження на речі. Але VPS все ще використовував лише 50% ЦП, а використання пам’яті залишилося на рівні 100 МБ. Я додав дюжину глядачів/браузерів, і це майже не змінило навантаження на VPS — збільшилася лише пропускна здатність. Я впевнений, що створення додаткових транс-потоків за допомогою ffmpeg і надалі створюватиме додаткове навантаження на систему.

Я використовував цей тип серверів у виробничих середовищах із від 50 до 100 одночасних користувачів і виявив, що використання ресурсів дуже мало зросло із збільшенням підключень глядача. Експериментуйте з ним. Але я думаю, що більшість користувачів із задоволенням використовують одноядерний VPS на 1 Гб. Насолоджуйтесь своїм новим потоковим сервером HLS!