Cara menggunakan live streaming php

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Pernahkah kaliam ingin membuat aplikasi sendiri seperti Twitch.tv untuk live-streaming pekerjaan? Bagaimana YouTube-esque kalian program untuk memutar video yang direkam sebelumnya? Kalian mungkin telah menggunakan Flash, Jawa, atau Silverlight yang tenar di masa lalu, tetapi dengan Chrome 42 yang mengumumkan bahwa plug-in tersebut tidak lagi didukung, sekarang adalah waktu yang baik untuk HTML5 seperti biasa.

Sebelum saya bekerja di Microsoft, saya adalah seorang insinyur Senior di tim pengembangan produk di Comcast, tempat saya bekerja pada pemutar video untuk sejumlah platform, termasuk web, satu Xbox, Xbox 360, dan SmartGlass. Itu pendidikan luar biasa dalam teknologi video canggih, dan saya senang bahwa saya dapat mengambil pengalaman tersebut dalam peran ini dan mengajar orang lain apa yang saya pelajari disana.

Ini adalah yang pertama dari serangkaian artikel tentang cara menggunakan Azure Media Services untuk membuat dan mengkonsumsi HTML5 video. Dalam tutorial ini, saya akan menjelaskan bagaimana menggunakan solusi media internet ini untuk mendapatkan mengatur dan mulai bereksperimen dengan memberikan video live atau berdasarkan permintaan.

1. Primer pada Format Video

Ada beberapa format untuk memilih, jadi mari kita mulai dari beberapa yang dapat kalian gunakan hari. Pertama dan terpenting, kita harus memahami bagaimana adaptif karya mengepul, mengingat banyak dari teknologi ini yang ada di hadapan bergantung pada hal ini.

Streaming adaptif segmen video ke dalam potongan kecil. Bagian 'adaptif' ini adalah fakta bahwa video dikodekan pada berbagai bitrates dan resolusi, membuat potongan dalam berbagai ukuran. Dari sana, pemain dapat memilih antara bitrates/resolusi yang berbeda dan beradaptasi dengan potongan-potongan yang lebih besar atau lebih kecil secara otomatis sebagai perubahan kondisi jaringan.

Scott Hanselman menjelaskan hal itu (yah, kelancaran Streaming setidaknya) juga.

"Kalian seakan harus memahaminya, tapi sebenarnya ini cukup sederhana. Beberapa orang panik ketika mereka mengambil, mengatakan, 200 meg video file dan menyandikan untuk kelancaran Streaming dan direktori yang dihasilkan adalah, mengatakan, 500 MB. Mereka mungkin berkata, ini lebih besar! Saya tidak memiliki semacam bandwidth! Pada kenyataannya, kurang dikirim melalui kawat daripada ada pada disk. Idenya adalah bahwa kelancaran Streaming menciptakan "langkah" bitrates. Itu encode dan menyimpan file Anda beberapa bit-harga pada disk.

Progresif MP4

Adobe.com Overview

Unduhan serta cache ini video terdapat pada komputer penonton. Jangka waktu yang singkat diperlukan untuk buffer dan cache pada awal berkas media sebelum mulai bermain. Setelah video tertambatkan, untuk melihat selanjutnya tidak memerlukan buffering apapun. Menggunakan protokol HTTP standar, progresif download file umumnya dikirim melalui jaringan pengiriman konten (CDN). Jadi pemutar video Anda menciptakan koneksi HTTP langsung dengan server CDN (Azure) untuk mengambil konten.

Kegagalan menggunakan sesuatu seperti ini membuang bandwidth. Pemain akan segera memulai pemutaran video setelah itu cukup data yang melakukannya, tapi akan terus terunduh hingga mereka telah menerima berkas sepenuhnya, terlepas dari berapa banyak pengguna yang menonton. Apa yang terjadi ketika penonton meninggalkannya satu menit? Bandwidth akan terbuang.

Selain itu, tidak memungkinkan untuk mengubah kualitas video pada pertengahan download, tidak seperti format yang tercantum di bawah ini.

HLS

Tinjauan Streamingmedia.com 

Streaming HTTP Live (HLS) dimiliki oleh Apple dan hasilnya didasarkan pada gagasan adaptif streaming, biasanya dilakukan dalam potongan sepuluh detik. Selain itu, mendukung hidupnya dan on-demand video.

Kelancaran Streaming

Tinjauan RBGnetworks.com 

Diumumkan pada bulan Oktober 2008 sebagai bagian dari Silverlight, dan fitur yang Internet Information Services (IIS) Media Sevice, platform pengiriman terpadu, berbasis HTTP media.

Kelancaran Streaming memiliki ciri khas adaptif streaming. Hal ini disampaikan melalui HTTP, dibagi menjadi potongan kecil, dan biasanya beberapa bit tukar dikodekan sehingga pemain dapat melihat kondisi jaringan kalian untuk memilih tingkat sedikit video terbaik demi memberikan pengalaman menonton yang optimal.

Biaya rendah infrastruktur berbasis web, kompatibilitas firewall dan bit rate switching merupakan beberapa keistimewaan adaptif streaming.

MPEG Dash

Tinjauan Streamingmedia.com 

Besarnya pembeda dengan DASH merupakan standar internasional yang sekarang dikendalikan oleh badan standar-Motion Picture ahli Group (MPEG) — bukannya dikendalikan oleh Microsoft (kelancaran Streaming) atau Apple (HLS). Beberapa perusahaan berpartisipasi dalam upaya penciptaan dan standardisasi di sekitar DASH MPEG, termasuk Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung, dan banyak lagi.

Kita perhatikan MPEG-DASH sebagai pengganti akhirnya semua fitur yang kita kenalkan dan laksanakan pada tahun lalu dengan kelancaran Streaming. Dari waktu ke waktu kita akan mengeluarkan dukungan DASH untuk memiliki fitur paritas dengan halus, dan memperkenalkan beberapa fitur lebih keren yang hanya tersedia bagi kita dalam industri standar seperti DASH.

2. Dukungan HTML5 Video 

Tag video (<video>) yang telah ada pada HTML5 selama beberapa tahun sekarang dan mendukung semua browser modern. W3C schools page menggambarkan penggunaannya secara jelas.

Berikut adalah bagaimana mudahnya untuk menambahkannya ke halaman Anda:

<video width="320" height="240" controls>

     <source src="movie.mp4" type="video/mp4">

     Fallback content: Your browser does not support the video tag.

</video>

Nyatanya, kalian mungkin menggunakan ini setiap hari. Netflix menggunakan Silverlight untuk mengandalkan pemutaran video mereka, tetapi sekarang beralih pada HTML5 video. YouTube sebelumnya menggunakan Flash, tetapi sekarang banyak isinya yang dikonversi ke HTML5. Kalian tahu orang-orang pemutar video yang Anda lihat di Xbox satu (YouTube, Xbox Video, Netflix, dll)? Yup, itu semua juga HTML5.

Bahkan jauh lebih mudah untuk menguji HTML5 video di browser, terutama berbagai versi Internet Explorer dan Edge Microsoft baru. Untuk melakukannya, kalian bisa mendapatkan gratis mesin virtual atau menguji jarak jauh pada perangkat Mac, iOS, Android, atau Windows kalian.

3. Catatan pada Pemain

Ada banyak pilihannya. Dalam tutorial ini, saya menggunakan Layanan Azure Media Player karena lebih baik mengunakannya untuk memulai, terlebih untuk merasakan bagaimana media streaming bekerja. Mencakup sejumlah sampel video, dan menu pull-down sederhana di mana Anda dapat memilih berbagai format dan melihat tingkat teknologi dan perlindungan di belakang masing-masing.

Menyediakan dukungan untuk berbagai format dari box, termasuk:

• Kelancaran Streaming
• MPEG Dash
• HLS
• Progresif MP4

Terbaik dari semuanya, kalian tidak perlu membuat pemain kalian sendiri atau halaman untuk menguji salah satu apakah konten video Anda keluar. Mudah mengubah URL ke konten Anda, dan bisa kalian tinggalkan.

Anda juga dapat melihat kerangka Video.js open source. Hal ini mirip dengan Microsoft player (di bawah), tetapi menawarkan pula sebuah perkumpulan pilihan untuk membuatnya mudah dirombak. Mereka memiliki desainer sampul, juga. Jika kalian kurang familiar dengan lanjutan CSS, akan tetapi, akan saya hindari hal ini.

4. Membangun Pemutar Video Anda Sendiri 

Ada beberapa frameworks pemain yang bisa kita gunakan, tetapi demi kesederhanaan, mari kita gunakan pemutar HTML5 yang disediakan oleh Microsoft. Anda dapat menemukan dokumentasi di sini. Ada juga sampel yang berfungsi.

Berikut ini beberapa manfaat penggunaannya: 

“Frameworks Kerja HTML5 memberikan pengalaman video yang konsisten untuk browser. Hal ini dilakukan dengan mendeteksi dukungan untuk teknologi pemutar video yang berbeda tersedia di klien (misalnya tag video HTML5, Silverlight, dll.) Dan kemudian menyediakan API JavaScript yang sama dan rangkaian kontrol yang sama terlepas dari teknologi yang digunakan.  Ini akan beriterasi melalui daftar teknologi pemutar video fallback hingga teknologi yang didukung ditemukan.

Saya akan mencakup informasi lebih lanjut tentang ini di postingan selanjutnya. 

5. Apa Selanjutnya? Browser Embed & App Wrap 

Dalam postingan selanjutnya, kita akan membahas proses menciptakan pemutar video Anda sendiri di dalam browser. Bahkan lebih baik, kita dapat "membungkus" bahwa situs HTML5 dan pemain dan membuat hibrida aplikasi untuk perangkat mobile dan Windows dengan alat seperti Cordova.

Setelah itu, kami akan menyiapkan akun Azure dan membuat konten Layanan Media pertama kami, yang dapat kami putar kembali pada pemutar video yang baru kami buat. Jika kalian ingin memulainya segera, kalian bisa mendaftar untuk uji coba Azure gratis dan Visual Studio Community (sekarang juga IDE gratis) atau hubungi saya untuk mendapatkan informasi tentang cara mendapatkan akun BizSpark dengan kredit Azure bulanan gratis .

Pelajari lebih lanjut tentang layanan Azure Media

Berikut adalah beberapa sumber daya yang besar untuk mempelajari lebih mendalam pada media, Azure, dan bagaimana untuk mendapatkan set-up dengan cepat:

• Azure Media Layanan 101-Azure Jumat (Channel 9)
• Memulai dengan Azure Media Services (video)
• Kemasan Dinamis dengan layanan Azure Media 

Atau seri pembelajaran tim kami yang lebih luas tentang HTML, CSS, dan JS: 

• Practical Performance Tips to Make your HTML/JavaScript Faster (seri tujuh bagian dari desain responsif hingga game kasual hingga optimalisasi kinerja)
• The Modern Web Platform Jump Start (dasar-dasar HTML, CSS, dan JS) 
• Developing Universal Windows Apps with HTML and JavaScript Jump Start (gunakan JS yang sudah kalian buat untuk memciptakan aplikasi)

Artikel ini adalah bagian dari seri web dev tech dari Microsoft. Kami senang untuk berbagi Microsoft Edge dan mesin rendering EdgeHTML baru dengan Anda. Dapatkan mesin virtual gratis atau uji jarak jauh di perangkat Mac, iOS, Android, atau Windows @ http://dev.modern.ie/.