Penjelasan mendetail tentang ide untuk mengimplementasikan fungsi siaran langsung video di HTML5

Belum lama ini, saya meluangkan waktu untuk melakukan riset dan eksplorasi pada siaran langsung video yang sedang populer, memahami keseluruhan proses penerapannya, dan mengeksplorasi kelayakan siaran langsung HTML5 seluler.

Ditemukan bahwa solusi siaran langsung video arus utama di WEB adalah HLS dan RTMP. Ujung WEB seluler saat ini didasarkan pada HLS (HLS memiliki masalah latensi, dan RTMP juga dapat digunakan dengan bantuan video.js), sedangkan solusi siaran langsung video arus utama di WEB adalah HLS dan RTMP. ujung PC didasarkan pada RTMP, yang memiliki kinerja real-time lebih baik, maka kami akan mulai membagikan tema siaran langsung H5 seputar dua protokol streaming video ini.

HTTP Live Streaming (disingkat HLS) adalah protokol streaming video berbasis HTTP yang diterapkan oleh Apple. QuickTime dan Safari di Mac OS dan Safari di iOS semuanya mendukung HLS dengan baik. Beberapa klien umum seperti MPlayerX dan VLC juga mendukung protokol HLS.

Protokol HLS didasarkan pada HTTP, dan server yang menyediakan HLS perlu melakukan dua hal:

Pengkodean: Menyandikan gambar dalam format H.263, menyandikan suara dalam MP3 atau HE-AAC, dan terakhir mengemasnya ke dalam wadah MPEG-2 TS (Transport Stream); Split: Memotong file TS yang disandikan menjadi panjang yang sama. File kecil dengan akhiran ts dan menghasilkan file indeks teks biasa .m3u8; browser menggunakan file m3u8. m3u8 sangat mirip dengan format daftar audio m3u. Anda cukup menganggap m3u8 sebagai daftar putar yang berisi banyak file ts. Pemain memutarnya satu per satu secara berurutan, lalu meminta file m3u8 setelah memutar semuanya, dan mendapatkan daftar putar yang berisi file ts terbaru untuk terus diputar, dan siklus dimulai lagi. Seluruh proses siaran langsung bergantung pada m3u8 yang terus diperbarui dan banyak file ts kecil. m3u8 harus diperbarui secara dinamis, dan ts dapat melalui CDN. Format file m3u8 yang khas adalah sebagai berikut:

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:ID-PROGRAM=1, BANDWIDTH=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777gear4/prog_index.m3u8

Terlihat inti dari protokol HLS masih satu request/respon HTTP, sehingga memiliki kemampuan beradaptasi yang baik dan tidak akan terpengaruh oleh firewall. Namun hal ini juga mempunyai kelemahan yang fatal: penundaannya sangat jelas terlihat. Jika setiap ts dibagi menjadi 5 detik dan satu m3u8 berisi 6 indeks ts, maka akan menyebabkan penundaan minimal 30 detik. Jika Anda mengurangi panjang setiap ts dan mengurangi jumlah indeks di m3u8, penundaan memang akan berkurang, tetapi akan menyebabkan lebih seringnya buffering dan tekanan permintaan di server juga akan meningkat secara eksponensial. Jadi kami hanya bisa menemukan titik kompromi berdasarkan situasi sebenarnya.

Untuk browser yang mendukung HLS, tulis saja ini untuk bermain:

 <video src=./bipbopall.m3u8″ tinggi=300″ lebar=400″ preload=auto autoplay=autoplay loop=loop webkit-playsinline=true></video>

Catatan: HLS hanya mendukung browser safari di PC, mirip dengan browser chrome yang menggunakan video HTML5

Tag tidak dapat memutar format m3u8. Anda dapat langsung menggunakan beberapa solusi yang relatif matang di Internet, seperti: sewise-player, MediaElement, videojs-contrib-hls, dan jwplayer.

Protokol Pesan Waktu Nyata (disingkat RTMP) adalah seperangkat protokol siaran langsung video yang dikembangkan oleh Macromedia dan sekarang menjadi milik Adobe. Solusi ini memerlukan pembuatan layanan streaming RTMP khusus seperti Adobe Media Server, dan hanya Flash yang dapat digunakan untuk mengimplementasikan pemutar di browser. Performa real-time-nya sangat bagus dan penundaannya sangat kecil, namun kekurangannya adalah tidak dapat mendukung pemutaran WEB seluler.

Meskipun tidak dapat diputar di halaman H5 iOS, Anda dapat menulis decoding dan parsing Anda sendiri untuk aplikasi iOS asli yang memiliki latensi rendah dan kinerja real-time yang baik. Sisi browser, video HTML5

Tag tidak dapat memutar video protokol RTMP, yang dapat dicapai melalui 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 mengontrol preload=auto width=640 tinggi=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>

Saat ini, format tampilan siaran langsung biasanya didominasi oleh halaman seperti YY Live dan Yingke Live. Anda dapat melihat bahwa strukturnya dapat dibagi menjadi tiga lapisan:

① Lapisan video latar belakang

② Modul ikuti dan komentar

③ Suka animasi

H5 saat ini mirip dengan halaman siaran langsung, dan penerapannya secara teknis tidak sulit.

① Latar belakang video di bagian bawah menggunakan tag video untuk diputar

② Modul ikuti dan komentar menggunakan WebScoket untuk mengirim dan menerima pesan baru secara real time melalui DOM dan CSS3.

③ Suka dan gunakan animasi CSS3

Setelah memahami format siaran langsung, mari kita pahami proses siaran langsung secara keseluruhan.

Proses siaran langsung secara keseluruhan secara garis besar dapat dibagi menjadi:

Koleksi video akhir: Dapat berupa perangkat input audio dan video di komputer, atau kamera atau mikrofon di ponsel Saat ini, video ponsel adalah yang utama.

Server video streaming langsung: Server Nginx mengumpulkan aliran video (pengkodean H264/ACC) yang dikirimkan oleh ujung perekaman video, menguraikan dan mengkodekannya di sisi server, dan mendorong aliran video berformat RTMP/HLS ke ujung pemutaran video.

Pemutar video: Bisa berupa pemutar di komputer (QuickTime Player, VLC), pemutar asli di ponsel, atau tag video H5, dll. Saat ini, pemutar asli di ponsel adalah yang utama.

(Grup pertukaran pembelajaran front-end web: 328058344. Dilarang mengobrol. Jika Anda tidak tertarik, mohon jangan masuk!)

Untuk perekaman video H5, Anda dapat menggunakan webRTC (Web Real-Time Communication) yang canggih, yaitu teknologi yang mendukung browser web untuk percakapan suara atau percakapan video secara real-time dan tidak terlalu baik pada perangkat seluler.

Proses dasar merekam video menggunakan webRTC

① Panggil window.navigator.webkitGetUserMedia()

Dapatkan data video kamera PC pengguna.

② Ubah data streaming video yang diperoleh menjadi window.webkitRTCPeerConnection

(format data streaming video).

③ Gunakan WebScoket

Mengirimkan data streaming video ke server.

Melihat:

Meskipun Google telah mempromosikan WebRTC, dan banyak produk matang telah bermunculan, sebagian besar browser seluler belum mendukung webRTC (iOS 10.0 terbaru tidak mendukungnya), jadi perekaman video sebenarnya masih bergantung pada klien (iOS, Android), efeknya akan lebih baik.

dukungan WebRTC

dukungan WebRTC

Aplikasi asli iOS memanggil kamera untuk merekam proses video

① Untuk pengumpulan audio dan video, aliran data audio dan video asli dapat dikumpulkan menggunakan AVCaptureSession dan AVCaptureDevice.

② Enkode H264 untuk video dan AAC untuk audio. Ada perpustakaan pengkodean yang dienkapsulasi (pengkodean x264, pengkodean faac, pengkodean ffmpeg) di iOS untuk mengkodekan audio dan video.

③ Kumpulkan data audio dan video yang dikodekan ke dalam paket.

④ Buat koneksi RTMP dan dorong ke server.

5. Bangun Ng

Instal nginx, modul nginx-rtmp

① Pertama, kloning proyek nginx secara lokal:

minuman tap homebrew/nginx

② Jalankan dan instal nginx-rtmp-module

buatan instal nginx-full –dengan-rtmp-module

2. file konfigurasi nginx.conf, konfigurasikan RTMP dan HLS

Temukan file konfigurasi nginx.conf (path/usr/local/etc/nginx/nginx.conf) dan konfigurasikan RTMP dan HLS.

① Tambahkan konten konfigurasi rtmp sebelum node http:

② Tambahkan konfigurasi hls di http

Mulai ulang layanan nginx, masukkan http://localhost:8080 di browser, dan periksa apakah antarmuka selamat datang muncul untuk mengonfirmasi bahwa nginx berhasil dimulai ulang.

nginx -s muat ulang

Ketika server menerima aliran video yang dikirimkan dari ujung perekaman video, server perlu menguraikan dan mengkodekannya dan mendorong aliran video format RTMP/HLS ke pemutar video. Solusi pustaka pengkodean umum yang biasa digunakan, seperti pengkodean x264, pengkodean faac, pengkodean ffmpeg, dll. Karena alat FFmpeg mengintegrasikan beberapa pengkodean format audio dan video, kami dapat memberikan prioritas untuk menggunakan FFmpeg untuk konversi format, pengkodean dan streaming.

1.Instal alat FFmpeg

buatan instal ffmpeg

2. Dorong file MP4

Alamat file video:/Pengguna/gao/Desktop/video/test.mp4

Alamat streaming dorong dan tarik: rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home

 //Aliran protokol RTMP ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//HLS aliran protokol ffmpeg -re -i /Pengguna/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile garis dasar -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

Melihat:

Setelah kita melakukan push streaming, kita dapat menginstal VLC dan ffplay (pemutar video yang mendukung protokol rtmp) untuk menarik streaming secara lokal untuk demonstrasi.

① File video untuk streaming langsung

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101: 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② Kamera streaming dorong + desktop + rekaman mikrofon untuk siaran langsung

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -preset ultrafast /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

Untuk perintah lebih lanjut, silakan merujuk ke:

Daftar lengkap perintah FFmpeg untuk memproses media streaming RTMP

FFmpeg umumnya menggunakan perintah streaming

Terminal seluler iOS dan Android secara alami mendukung protokol HLS. Setelah pengumpulan video berakhir dan layanan push streaming video selesai, Anda dapat langsung mengonfigurasi tag video di halaman H5 untuk memutar video langsung.

 <kontrol video preload=auto autoplay=autoplay loop=loop webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >Browser Anda tidak mendukung video HTML5.</p></video>

Artikel ini merinci seluruh proses pengumpulan dan pengunggahan video, pemrosesan server dari video push, dan pemutaran halaman H5 dari video langsung. Artikel ini merinci prinsip-prinsip implementasi siaran langsung. Banyak masalah pengoptimalan kinerja yang akan dihadapi selama proses implementasi.

① Pembatasan H5 HLS harus berupa pengkodean H264+AAC.

② Masalah pemutaran H5 HLS terhenti. Sisi server dapat menerapkan strategi fragmentasi, meletakkan file ts di CDN, dan ujung depan dapat mencoba menerapkan cache DNS, dll.

③ Untuk mencapai interaksi real-time yang lebih baik, siaran langsung H5 juga dapat menggunakan protokol RTMP dan memutar melalui video.js.

Di atas adalah penjelasan rinci tentang fungsi siaran langsung video HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!