Video streaming Menggunakan Nginx Dan Laravel
Pernah ingin mempelajari cara streaming video Anda ke dunia luar? Pada akhir panduan ini, Anda akan memiliki server streaming sendiri dan pengunjung Anda akan dapat melihatnya melalui halaman web. Apa yang sedang kita bangun
Silakan gunakan versi Ubuntu Server20.04LTS. Livestream umpan video Anda menggunakan nginx dan tampilkan di halaman web Laravel Anda. Ini juga menjelaskan cara mengizinkan/memblokir streaming feed tertentu. Tutorial ini mengasumsikan bahwa Anda memiliki nginx dan Laravel di server yang sama. Kami berasumsi ini adalah server baru, jadi jika Anda pernah melakukannya, Anda dapat melewati beberapa langkah.
Pengaturan Nginx
Install dependencies
sudo apt update
sudo apt upgrade
sudo apt install build-essential libpcre3 libpcre3-dev libssl-dev zlib1g zlib1g-dev
Clone nginx-rtmp-module
git clone https://github.com/sergey-dryabzhinsky/nginx-rtmp-module.git
Unduh nginx terbaru
Anda dapat menemukan versi nginx terbaru di sini. Pada saat artikel ini ditulis, 1.19.0 adalah versi terbaru. Unduh versi terbaru dari untar dan ubah ke direktori itu.
wget http://nginx.org/download/nginx-1.19.0.tar.gz
tar -xf nginx-1.19.0.tar.gz
cd nginx-1.19.0
compile nginx
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module
make
sudo make install
Perbarui Konfigurasi Nginx
Perbarui file /usr/local/nginx/conf/nginx.conf
worker_processes auto;
events {
worker_connections 1024;
}
# RTMP configuration
rtmp {
server {
listen 1935; # Listen on standard RTMP port
chunk_size 4000;
application show {
on_publish "http://<your ip address>:8000/api/stream/on_publish";
live on;
# Turn on HLS
hls on;
hls_path /nginx/hls/;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}
}
}
http {
sendfile off;
tcp_nopush on;
# aio on;
directio 512;
default_type application/octet-stream;
server {
listen 8080;
location / {
# Disable cache
add_header 'Cache-Control' 'no-cache';
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/dash+xml mpd;
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /nginx/;
}
}
}
Kemudian buat folder yang sesuai dan perbarui owner/grup
mkdir /nginx
mkdir /nginx/hls
chown -R www-data:www-data /nginx
Ada beberapa hal yang perlu diperhatikan
Seperti yang Anda lihat, acara aplikasi menggunakan acara sebagai titik akhir saat streaming video.
Baris on_publish digunakan untuk mengizinkan/melarang seseorang melakukan streaming video melalui server.,
hls_path adalah direktori tempat file video disimpan.
aio on dinonaktifkan karena tidak didukung dalam pengaturan saat ini.
root adalah direktori root dari server http.
Informasi lebih lanjut tentang masing-masing opsi ini dapat ditemukan di
- https://github.com/arut/nginx-rtmp-module/wiki/Directives
- http://nginx.org/en/docs/http/ngx_http_core_module.html
Jalankan Nginx
Perintah berikut memulai nginx di latar belakang.
/usr/local/nginx/sbin/nginx
Jika Anda ingin menjalankannya di latar depan sehingga Anda dapat dengan mudah mematikannya dan memulai kembali, gunakan:
/usr/local/nginx/sbin/nginx-g'Daemon off;'
Pengaturan Laravel dan PHP
Jika Anda hanya menginstal Ubuntu Server 20.04LTS, php mungkin tidak diinstal. Untuk menginstal php dan Laravel, ikuti langkah-langkah ini: Jika Anda sudah tahu cara menginstal Laravel, atau jika Anda sudah menginstalnya, lewati langkah ini.
Instal php, dependensi laravel, apache
sudo apt install php php-mbstring php-xml php-zip libapache2-mod-php
sudo systemctl restart apache2
Instal Komposer dan Laravel
sudo curl -s https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
sudo apt install zip unzip
composer global require "laravel/installer=~1.1"
composer global update
Tambahkan direktori ~/.composer/vendor/bin ke PATH Anda. Ada cara lain, tetapi salah satu caranya adalah dengan menambahkan baris berikut ke file ~/.profile Anda, lalu. Apakah untuk reload dengan. ~/.Profile.
PATH="$PATH:$HOME/.config/composer/vendor/bin"
Implementasi Laravel
Buat halaman web yang mengalirkan file video di halaman web dan lihat apakah penerbit dapat melakukan streaming video.
Buat proyek baru
laravel new stream
Buat pengontrol baru untuk mencegah nginx memublikasikan titik akhir streaming langsung baru
php artisan make:controller LiveStreamController
File akan dibuat di bawah folder app/Http/Controllers. Edit filenya
<?php namespace App\Http\Controllers;use Illuminate\Http\Request;class LiveStreamController extends Controller
{
public function on_publish(Request $request) {
if ($request->name == "mystream") {
return response('Good', 200)->header('Content-Type', 'text/plain');
} else {
return response('No', 400)->header('Content-Type', 'text/plain');
}
}
}
Ini memeriksa apakah nama aliran adalah mystream dan mengembalikan 200 jika demikian. Jika tidak, ia mengembalikan 400. Ketika server nginx menerima aliran baru, ia mengirimkan informasi aliran baru ke titik akhir yang ditentukan oleh on_publish di file nginx.conf. Ketika Anda menerima 200, Anda dapat melanjutkan streaming. Jika tidak, permintaan streaming akan ditolak.
Tambahkan ini ke root route/api.php.
Route::post('/stream/on_publish', 'LiveStreamController@on_publish');
Ubah resource/views/welcome.blade.php untuk melihat video dari server nginx
<link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://vjs.zencdn.net/7.8.2/video.js"></script><div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="1280"
height="720"
data-setup="{}"
>
<source src="http://{{$_SERVER['SERVER_NAME']}}:8080/hls/mystream.m3u8" type="application/x-mpegURL" res="9999" label="auto" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</div>
</div>
</div>
Run Laravel
php artisan serve --host=<your ip address>
Stream
Sekarang Anda siap untuk melakukan streaming video. Pastikan nginx dan Laravel berjalan. Ada beberapa opsi untuk streaming, tetapi contoh ini menggunakan OBS.
Dalam konfigurasi OBS, servernya adalah rtmp://<alamat IP server nginx Anda>/show dan kunci alirannya adalah mystream. Perhatikan bahwa Laravel memeriksa apakah key adalah mystream. Jika Anda mengubahnya menjadi sesuatu yang lain, itu akan ditolak.
Anda dapat melakukan streaming sumber apa pun, tetapi itu akan mengalirkan situs web selama berjam-jam. Tambahkan browser dari Sources dan gunakan URL https://www.time.gov/.
Tekan Mulai Streaming. Ini harus menunjukkan bahwa Anda streaming ke server. Setelah beberapa saat, Anda juga dapat memeriksa isi folder /nginx/hls tempat mystream.m3u8 dan file lainnya ditampilkan. Perbarui situs web Laravel.
Anda dapat melihat bahwa apa yang diproyeksikan oleh OBS sedang dialirkan di situs web Laravel. Ada penundaan antara sumber dan situs web, dan ada penundaan sebelum nginx memproses data. Semua file ada di Github disini.
Terima kasih telah membaca!
sumber : https://medium.com/@GaonLabs/video-streaming-with-nginx-and-laravel-838b66aacb47