Video Online dengan Wowza dan Amazon Elastic Transcoder

Diterbitkan: 2022-03-11

Keberhasilan dan adopsi aplikasi web apa pun saat ini sangat bergantung pada kinerja, fleksibilitas, dan kemudahan penggunaannya.

Terutama di dunia ADHD saat ini, pengguna akan dengan cepat kehilangan kesabaran dengan aplikasi jika pemuatan halamannya terlalu lama. Untuk aplikasi web yang perlu mendukung pemrosesan video – yang pada dasarnya adalah komputasi dan I/O-intensif – tantangan ini sangat akut. Namun, pengguna menjadi semakin menuntut, menginginkan video mereka berkualitas tinggi dan dimuat dengan cepat, bahkan jika dijalankan di smartphone atau tablet.

Pengguna juga kehilangan toleransi untuk aplikasi web yang tidak berfungsi di browser atau perangkat pilihan mereka, atau yang tidak mendukung format data yang mereka perlukan untuk memuat atau mengekspor. Keragaman format video yang perlu didukung juga membuat menggabungkan dukungan video ke dalam aplikasi web menjadi sangat menantang.

Posting ini menjelaskan bagaimana saya secara efektif memanfaatkan teknologi open source dan layanan berbasis cloud untuk menggabungkan kemampuan video ke dalam aplikasi web berbasis PHP.

Pemrosesan video online dalam PHP dengan Wowza dan Amazon Elastic Transcoder

Gunakan Kasus

Saya adalah bagian dari tim yang perlu mengembangkan situs web seperti YouTube, tempat pengguna terdaftar dapat mengunggah dan membagikan video mereka.

Sistem diperlukan untuk memungkinkan pengguna terdaftar untuk mengunggah video mereka dalam berbagai format yang didukung yang kemudian akan dikonversi ke format umum (MP4). Kami juga perlu membuat satu set thumbnail dan kolase gambar untuk digunakan di pemutar video untuk menampilkan bingkai pada bilah kemajuan video.

Hal-hal menjadi lebih rumit oleh fakta bahwa persyaratan klien mencegah kami menggunakan CDN atau API transcoding yang tersedia, jadi kami perlu mengembangkan solusi kami dari awal.

Unggah Video

Karena proses pengunggahan itu sendiri tidak perlu spesifik untuk video (kami hanya membutuhkan kemampuan mengunggah file yang mudah digunakan), masuk akal untuk menggunakan solusi sumber terbuka yang ada daripada menggulirkan solusi kami sendiri. Kami memilih jQuery-File-Upload, terutama karena mendukung dua fitur yang penting dalam kasus kami; yaitu, bilah kemajuan unggahan dan unggahan yang dipotong.

Pengunggahan terpotong memungkinkan kami untuk memungkinkan pengguna mengunggah file video dengan ukuran apa pun (terutama penting untuk mendukung file video dalam resolusi HD). Dengan pendekatan ini, file dibagi menjadi beberapa "potongan" di front-end yang memanggil tindakan unggah dengan setiap potongan data (bersama dengan metadata untuk setiap potongan, seperti jumlah potongan dan ukuran file total). File video lengkap kemudian dipasang kembali di bagian belakang. Kebetulan, memasukkan nomor potongan dalam metadata terbukti sangat penting karena beberapa browser (seperti Mobile Safari) memiliki kecenderungan untuk mengirimkan potongan secara acak.

Pemrosesan Video Online

Pemrosesan video dapat sesederhana menangkap bingkai sebagai gambar diam, atau dapat melibatkan operasi yang lebih kompleks seperti peningkatan gambar, menstabilkan aliran video, dan sebagainya. Dalam kasus kami, satu-satunya persyaratan pemrosesan video adalah (a) mengekstrak codec video dan metadata kunci lainnya dan (b) menghasilkan satu set thumbnail dan kolase gambar (untuk digunakan di pemutar video untuk menampilkan bingkai pada kemajuan video batang).

FFmpeg – perpustakaan open source yang digunakan secara luas, didistribusikan secara bebas – sangat membantu dalam memenuhi persyaratan ini. FFmpeg menyediakan solusi lintas platform yang lengkap untuk merekam, mengonversi, dan streaming file audio dan video. Itu juga dapat digunakan untuk mengonversi video dan melakukan pengeditan sederhana (misalnya, memotong, memotong, menambahkan tanda air, dll.).

Untuk tujuan kami, kami dapat menggunakan FFmpeg untuk membagi video menjadi sepuluh bagian, dan kemudian mengambil gambar mini untuk setiap bagian untuk menyediakan fungsionalitas yang diperlukan.

Sayangnya, tidak ada binding bahasa PHP untuk library FFmpeg. Akibatnya, satu-satunya cara untuk memanfaatkan FFmpeg dari PHP adalah dengan memanggil biner dari baris perintah menggunakan perintah sistem. Pada dasarnya ada dua cara untuk menggunakan FFmpeg di PHP:

  • libav. Libav adalah proyek perangkat lunak gratis, bercabang dari FFmpeg pada tahun 2011, yang menghasilkan perpustakaan dan program untuk menangani data multimedia. Di Ubuntu, misalnya, ini dapat diinstal dengan perintah sudo apt-get install libav-tools . perintah libav kompatibel dengan FFmpeg dan avconv. PHP perlu memiliki akses baris perintah ke ffmpeg/avconv untuk menggunakan ini secara terprogram.
  • PHP-FFMpeg. PHP-FFMpeg adalah driver PHP berorientasi objek untuk biner FFMpeg. Itu dapat diakses hanya dengan menjalankan composer update "php-ffmpeg/php-ffmpeg" .

Kami menggunakan PHP-FFMpeg karena menyediakan akses mudah ke fungsionalitas FFmpeg yang kami minati. Misalnya, kelas FFProbe dari paket ini memungkinkan Anda menerima informasi tentang codec atau panjang file video tertentu sebagai berikut:

 $ffprobe = FFMpeg\FFProbe::create(); $ffprobe ->format('/path/to/video/mp4') // extracts file informations ->get('duration');

FFmpeg juga memudahkan untuk menyimpan bingkai video apa pun:

 $ffmpeg = FFMpeg\FFMpeg::create(); $video = $ffmpeg->open('video.mpg'); $video ->frame(FFMpeg\Coordinate\TimeCode::fromSeconds(10)) ->save('frame.jpg');

Kode sampel yang lebih rinci tersedia di sini.

Satu catatan peringatan: Karena beberapa undang-undang paten, tidak semua codec dapat diproses oleh FFmpeg dan beberapa format tidak didukung dengan benar (atau sepenuhnya). Saya ingat berjuang beberapa tahun yang lalu, misalnya, dengan format .3gp ketika dukungan untuk ponsel menengah adalah suatu keharusan.

mengantri

Setelah mendapatkan codec video dan metadata lainnya, kami mendorong video tersebut ke antrean konversi FIFO (first in first out). Antrian diimplementasikan menggunakan skrip cron sederhana yang memilih sejumlah video yang belum diproses setiap kali dijalankan dan meneruskannya ke utilitas konversi (contoh kode sumber tersedia di sini).

Utilitas konversi memanggil FFMpeg untuk melakukan konversi dan menandai setiap video sebagai telah diproses.

Kami juga mengembangkan mekanisme estimasi waktu tunggu sederhana, yang menghitung waktu rata-rata untuk mengonversi 1 menit video. Dengan menggunakan rata-rata ini, kami dapat menghitung dan menampilkan kepada pengguna perkiraan waktu pemrosesan yang tersisa setelah video selesai diunggah, berdasarkan berapa menit video yang tersisa untuk diproses.

Konversi Format Video

Format tertentu yang diakui secara universal (seperti JPEG dan GIF) telah muncul untuk gambar diam yang pada dasarnya didukung oleh semua perangkat dan perangkat lunak pengolah gambar. Sementara beberapa format video lebih umum daripada yang lain, belum ada format yang didukung secara universal untuk video.

Dalam kasus kami, selain perlu mengonversi dari berbagai format ke satu format umum (MPEG-4), kami membutuhkan video yang dikonversi untuk dioptimalkan untuk streaming ke perangkat seluler.

Untuk konversi format video (setidaknya untuk kebutuhan jangka pendek kami), menggunakan Amazon Elastic Transcoder berbasis cloud adalah opsi terbaik yang tersedia. Selain kemudahan penggunaannya secara umum, layanan transcoder menangani pengoptimalan dan semua pengaturan penyandian. Untungnya, AWS SDK untuk PHP tersedia, yang menyederhanakan pemanggilan layanan dari kode PHP kami.

Catatan: Menggunakan layanan berbasis cloud seperti Amazon Elastic Transcoder sangat bagus jika Anda ingin bangun dan berjalan dengan cepat. Namun, ingatlah bahwa opsi ini bisa menjadi mahal bagi klien Anda, terutama jika model bisnis mereka cenderung mengharuskan penggunaan video besar secara ekstensif. Faktor lain yang perlu dipertimbangkan adalah Anda tidak boleh berasumsi bahwa video atau model bisnis klien Anda akan kompatibel dengan Persyaratan Layanan.

Amazon menggunakan elemen penyimpanan dan komputasi dasarnya, S3 (Simple Storage Service) dan EC2 (Elastic Compute Cloud) – dikombinasikan dengan Auto Scaling dan SNS (Simple Notification Service) – untuk memberikan kemampuan untuk menaikkan dan menurunkan skala secara virtual secara instan.

Instalasi aws-sdk sederhana, karena Amazon memelihara versi paket yang dapat diinstal Composer. Cukup tambahkan ”aws/aws-sdk-php": "2.*" ke file composer.json Anda dan lakukan composer update .

Jelas, mengakses Amazon Elastic Transcoder memerlukan akun Amazon, jadi Anda juga harus mengaturnya jika Anda (atau pelanggan Anda) belum memilikinya.

Penggunaan layanan Amazon Elastic Transcoder oleh kami memerlukan pengunggahan file video pertama ke bucket yang sesuai di S3. Kami kemudian membuat pekerjaan transcoder bertanggung jawab untuk mendekode dan menghasilkan thumbnail yang, setelah selesai, memposting permintaan HTTP ke alamat yang ditentukan. Ini memang memerlukan beberapa konfigurasi di panel AWS, tetapi cukup sederhana dan Amazon menyediakan dokumentasi yang baik tentang cara melakukannya.

Jangan ragu untuk menggunakan bundel transcoder kami, yang membantu menyederhanakan integrasi untuk Symfony 2. Ini mencakup deskripsi penggunaan dan menawarkan pengontrol untuk implementasi cepat dari layanan pemberitahuan yang dikirim oleh Amazon untuk mengumpulkan informasi tentang video yang diproses. Contoh penggunaan tersedia di sini.

Selain itu, pengontrol contoh yang menangani notifikasi Amazon tersedia di sini yang juga mengimplementasikan konfirmasi alamat langganan. Layanan pertama-tama akan memposting URL yang akan dikunjungi untuk mengonfirmasi bahwa ini adalah penerima notifikasi yang valid. Yang diperlukan hanyalah menandai video sebagai diproses. Sejak saat itu, kami dapat menggunakan video transkode yang disimpan di cloud.

Mengalir

Streaming video adalah kemampuan yang memerlukan kinerja tinggi: Harapan pengguna untuk streaming tanpa gangguan tinggi dan toleransi terhadap latensi sangat rendah. Tantangan ini sering diperburuk oleh kebutuhan untuk melakukan streaming video ke beberapa klien secara bersamaan secara real-time.

Dalam kasus kami, kami perlu mendukung setiap pengguna untuk dapat membuat saluran videonya sendiri dan mulai menyiarkan. Solusi kami terdiri dari tiga komponen:

  • Dasbor. Aplikasi yang berfungsi sebagai dasbor streamer, menyediakan kemampuan untuk menayangkan video.
  • Penonton. Klien video yang menggunakan dan menampilkan aliran video.
  • Mesin Streaming. Layanan streaming video berbasis cloud.

Selain fakta bahwa teknologi Video on Demand (VOD) masih berkembang, masalah lain yang kami hadapi adalah akses kamera tidak didukung dengan baik dan hanya menawarkan koneksi P2P. Juga, tujuan kami adalah untuk menyediakan siaran online untuk beberapa pengguna secara bersamaan. Selain itu, dukungan untuk getUserMedia/Stream API (sebelumnya dibayangkan sebagai elemen <device> ) belum konsisten di seluruh browser modern. Berdasarkan faktor-faktor ini, saya memutuskan untuk menggunakan teknologi Flash karena itu adalah satu-satunya pilihan yang masuk akal. Oleh karena itu, kedua aplikasi (Dashboard dan Viewer) diimplementasikan menggunakan Flex dan ActionScript .

Untuk mesin streaming, kami menggunakan Wowza . Meskipun ada solusi non-komersial lainnya (seperti Red5, yang pada dasarnya dipasarkan sebagai pengganti dropin untuk Wowza), dalam kasus kami, dukungan produk komersial merupakan faktor penting. Juga, setidaknya pada saat kami membangun sistem, Wowza menawarkan dokumentasi yang lebih baik yang merupakan keuntungan tambahan. (Perhatikan bahwa Anda bisa mendapatkan versi uji coba Wowza secara gratis selama 30 hari dan juga ada versi uji coba pengembang yang dapat Anda gunakan hingga 180 hari. Tetapi ada beberapa batasan; streaming hanya dapat berfungsi untuk dua klien dan ada batasan pada jumlah maksimum koneksi.)

Mesin Streaming Wowza

Kami menggunakan aplikasi LiveStream yang disediakan oleh Wowza. Untuk mengkonfigurasinya, biarkan applications/app_name kosong dan di conf/app_name salin file Application.xml dari katalog conf . Edit file untuk mengonfigurasi bagian <Streams> sebagai berikut:

 <Streams> <StreamType>live</StreamType> <StorageDir>${com.wowza.wms.context.VHostConfigHome}/content</StorageDir> <KeyDir>${com.wowza.wms.context.VHostConfigHome}/keys</KeyDir> <LiveStreamPacketizers></LiveStreamPacketizers> <Properties></Properties> </Streams>

Parameter kuncinya adalah <StreamType>live</StreamType> yang menentukan bahwa ini akan menjadi streaming dari umpan video langsung (misalnya, kamera). Perhatikan bahwa setelah mengedit dan menyimpan file ini, Anda harus memulai ulang Wowza.

Aplikasi Flash (Flex/ActionScript)

Flash menyediakan sistem terintegrasi penuh untuk menghubungkan kamera dan mikrofon ke server streaming Wowza. Ini sangat membantu jika pengalaman Anda dengan ActionScript terbatas.

Seluruh aplikasi pada dasarnya didasarkan pada interaksi antara objek berikut:

  • Koneksi Bersih. Kelas NetConnection membuat koneksi dua arah antara klien dan server. Klien dapat berupa Flash Player atau aplikasi AIR. Server dapat berupa web server, Flash Media Server, server aplikasi yang menjalankan Flash Remoting, atau layanan Adobe Stratus.
  • Kamera. Kelas Kamera digunakan untuk merekam video dari sistem klien atau kamera perangkat.
  • Mikropon. Kelas Mikrofon digunakan untuk memantau atau menangkap audio dari mikrofon.
  • NetStream. Kelas NetStream membuka saluran streaming satu arah melalui NetConnection.

Pertama, kita terhubung ke server streaming Wowza menggunakan instance NetConnection dan kemudian melampirkan pendengar acara yang akan mendengarkan perubahan status koneksi jaringan:

 nc = new NetConnection(); nc.connect(serverAddress:string); nc.addEventListener( NetStatusEvent.NET_STATUS, // event type eNetStatus, // listener function false, // use capture? 0, // priority true // use weak reference? );

Berikut adalah contoh minimalis dari pendengar acara yang menghubungkan kamera dan mikrofon ke server streaming:

 private function eNetStatus(e:NetStatusEvent):void { switch (e.info.code) { case "NetConnection.Connect.Success": camera = Camera.getCamera(); mic = Microphone.getMicrophone(); ns = new NetStream(nc); ns.publish(streamName, "live"); ns.attachCamera(camera); ns.attachAudio(mic); break; case "NetConnection.Connect.Closed": // debug trace... display user message break; }

Kode klien sangat mirip, kecuali kami hanya menampilkan input video di sisi pengguna. Ini dilakukan dengan menghubungkan aliran ke objek Video , seperti yang ditunjukkan dalam contoh sederhana ini:

 if(event.info.code == "NetConnection.Connect.Success") { ns = new NetStream(nc); ns.client = nsClient; ns.addEventListener(NetStatusEvent.NET_STATUS, nsClient.onNetStatus); ns.play(streamName); video = new Video(); addChild(video); // this will display video video.attachNetStream(ns); // connect NetStream to video }

Bungkus

Streaming langsung dan video diharapkan dapat memainkan peran yang semakin signifikan dalam aplikasi seluler dan web. Oleh karena itu, penting bagi pengembang web untuk terbiasa dengan transcoding, pemrosesan, dan streaming video. Banyak alat, perpustakaan, dan layanan yang ada saat ini untuk menggabungkan kemampuan ini ke dalam aplikasi web. Artikel ini menunjukkan bagaimana kami memanfaatkan dan mengintegrasikan sejumlah teknologi ini agar berhasil membuat situs dasar seperti YouTube dengan relatif mudah.