ตั้งค่า Nginx บน Ubuntu เพื่อสตรีมวิดีโอสด HLS

HTTP Live Streaming (HLS) เป็นโปรโตคอลวิดีโอสตรีมมิ่งที่มีประสิทธิภาพสูงที่ดำเนินการโดย Apple Inc. HLS ใช้ธุรกรรม HTTP ซึ่งผ่านไฟร์วอลล์พร็อกซีพร็อกซี่และสามารถกระจายผ่าน CDN ได้อย่างง่ายดาย ดังนั้นเทคโนโลยีนี้สา���ารถเข้าถึงผู้ชมที่มีขนาดใหญ่กว่า RTP หรือโปรโตคอลที่ใช้ UDP อื่น ๆ วิดีโอสตรีมสดออนไลน์ส่วนใหญ่ในวันนี้โฮสต์โดยระบบที่มีราคาแพงซึ่งใช้ HLS แต่โดยทั่วไปจะมีราคาแพงและต้องใช้ทรัพยากรเซิร์ฟเวอร์จำนวนมาก บทช่วยสอนนี้จะแสดงวิธีการตั้งค่า Ubuntu 14.04 VULTR VPS ราคาไม่แพงเพื่อทำ HLS live streaming events โดยใช้ซอฟต์แวร์โอเพนซอร์ซเท่านั้น

ขั้นตอนแรกคือการอ่านและตั้งค่าเซิร์ฟเวอร์ของคุณตาม Vultr Doc " ตั้งค่า Nginx-RTMP บน Ubuntu 14.04 " คำแนะนำในเอกสารนั้นครอบคลุมที่สุดสำหรับขั้นตอนการตั้งค่าในขณะที่เขียน ฉันจะพูดถึงว่าคุณอาจต้องการแทนที่ "nginx-1.7.5" ด้วย "nginx-1.9.4" หรือรุ่น Nginx รุ่นล่าสุดที่มีให้ใช้งาน ข้อเสนอแนะอื่น ๆ คือการรวบรวม Nginx กับโมดูลสถานะ HTTP stub เพื่อให้คุณสามารถตรวจสอบจำนวน HLS live ที่คุณมีอยู่ในภายหลัง

แทนที่จะรวบรวมด้วย:

./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. Encoder-x264
2. บิตเรตตัวแปร (ไม่ใช่ CBR หรืออัตราบิตคงที่) คุณภาพสูงสุด
3. บิตเรตสูงสุด -600kbps
4. Audio-Codec-AAC
5. เครื่องเสียงแบบ-44.1kHz
6. เสียงบิตเรต-64kbps
7. FMS URL- "rtmp: // my-ip: 1935 / live"
8. สตรีมคีย์ - "my-stream-key"
9. ความละเอียด 640x480
10. FPS (เฟรมต่อวินาที) -30
11. CFR (อัตราเฟรมคงที่) - ใช่
12. Keyframe interval-2 วินาที (หนึ่ง Keyframe ทุก 2 วินาที)
13. x264 การเข้ารหัสโปรไฟล์พื้นฐาน (อาจทำงานได้กับ main— ขึ้นอยู่กับผู้เล่นที่ใช้)
14. x264 CPU ปัจจุบัน - เร็วมาก

ฉันแนะนำให้ลองใช้ตัวเข้ารหัสที่ต่างกันและทดลองกับพวกมัน คุณอาจต้องการอัตราส่วนกว้าง - หรือวัสดุกล้อง (หรือการออกอากาศอื่น ๆ ) ของคุณอาจต้องการมัน ถ้าเป็นเช่นนั้นโปรดเปลี่ยนข้อมูลนี้ในโปรแกรมเปลี่ยนไฟล์ของคุณและอัตราส่วนที่แสดงไว้ในส่วน 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

สำเนาแรก (จากหน้านี้) แล้ววาง (คลิกขวา) ลงในฟิลด์ตัวแก้ไขนาโนข้อมูล 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) ซึ่งให้ไฟล์จำนวนหนึ่งและโฟลเดอร์เมื่อเปิดเครื่องรูด ฉันอัปโหลดไฟล์และโฟลเดอร์ทั้งหมดลงในโฟลเดอร์ย่อยของโฟลเดอร์ราก Nginx / HTML ที่ฉันตั้งชื่อว่า "flowplayer" /usr/local/nginx/html/flowplayerเส้นทางที่แน่นอนคือ

ในการทดสอบวิดีโอของเราเมื่อฝังในหน้าเว็บให้สร้างไฟล์ HTML สองสามไฟล์ในรูทของโฟลเดอร์ Nginx / HTML โดยใช้นาโนและเติมด้วยเนื้อหาดังต่อไปนี้

ไฟล์:

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 kbps หากคุณต้องการคุณสามารถสร้างสตรีมแบบโปรเกรสซีฟที่มีระดับสูงขึ้นด้วย ffmpeg และกำหนดค่าโดยใช้ตัวอย่างของฉัน

ฉันได้ทดสอบการกำหนดค่านี้บนคอร์เดียว 1GB Vultr VPS และฉันพบว่าด้วยสตรีมสดเดียวรวมทั้งสตรีมมือถือที่ให้คะแนน trans-ทรานส์มันสร้างขึ้นด้วย ffmpeg การใช้งาน cpu น้อยกว่า 35% และใช้ 100MB เท่านั้น แรม 1GB ของฉัน ตอนนี้เป็นการตั้งค่าที่มีประสิทธิภาพมาก

หากคุณวางแผนที่จะสตรีมวิดีโอที่มีขนาดพิกเซลใหญ่กว่า SD คุณอาจพบว่าคุณต้องใช้ VPS ที่ทรงพลังกว่า ฉันอยากรู้เกี่ยวกับเรื่องนี้และวิ่งกระแสหลักของฉันถึง 1280x960 พิกเซลและ 2Mbps - วางภาระเพิ่มเติมในสิ่งต่าง ๆ แต่ VPS ยังคงใช้ CPU เพียง 50% และการใช้หน่วยความจำยังคงอยู่ที่ 100MB ฉันได้เพิ่มผู้ชม / เบราว์เซอร์โหลและมันไม่ทำให้โหลด VPS แตกต่างกัน - แบนด์วิดท์ที่ใช้เพิ่มขึ้น ฉันแน่ใจว่าการสร้างสตรีมแบบทรานส์จัดอันดับเพิ่มเติมด้วย ffmpeg จะยังคงทำให้โหลดเพิ่มเติมในระบบ

ฉันใช้เซิร์ฟเวอร์ประเภทนี้ในสภาพแวดล้อมการผลิตที่มีผู้ใช้งานพร้อมกันระหว่าง 50 และ 100 คนและพบว่าการใช้ทรัพยากรเพิ่มขึ้นเพียงเล็กน้อยด้วยการเพิ่มการเชื่อมต่อวิวเวอร์ ทดลองกับมัน แต่ฉันคิดว่าผู้ใช้ส่วนใหญ่มีความสุขที่ใช้ 1GB VPS แบบ single-core เพลิดเพลินไปกับเซิร์ฟเวอร์สตรีมมิ่ง HLS ใหม่ของคุณ!