Langkah Menyematkan (Embed) RTMP Stream ke Website Sendiri

Assalamu'alaikum Wr. Wb.
Di artikel ini saya akan menuliskan Langkah-langkah Menyematkan atau Embedding RTMP Streaming yang sudah kita buat sebelumnya ke Website Sendiri.

a. Pengertian
Real-Time Messaging Protocol (RTMP) merupakan sebuah protokol TCP yang dapat digunakan untuk melakukan Streaming Audio, Video, maupun Data antara Flash dan Server RTMP.

b. Latar Belakang
Karena selain Client menggunakan aplikasi seperti VLC untuk memutar Streamingnya, saya juga menginginkan Client secara publik dapat melihat Streamingnya secara On-Demand.

c. Maksud dan Tujuan
Tujuan dari melakukan Embedding ini adalah untuk memberikan Client Akses langsung ke Streaming melalui Web tanpa harus mengkonfigurasi lagi agar dapat terhubung ke Streaming.

d. Waktu Pengerjaan
Waktu yang digunakan untuk melakukan pengerjaan ini kurang-lebih 10-20 Menit.

e. Alat dan Bahan
- PC
- Text Editor / IDE
- Pengetahuan Dasar mengenai HTML dan Javascript
- Web Flash Player untuk RTMP -- Projekktor -- f4Player
- Web Server
- Server Streaming RTMP

f. Langkah Pengerjaan
Cara untuk pembuatan Server RTMP sudah saya postingkan sebelumnya dan pembahasannya diluar scope dari Artikel ini. Saya asumsikan Server sudah siap dan sudah dapat digunakan.

1. Persiapan
Untuk kenyamanan, silahkan buat satu folder khusus untuk Livestream didalam Public HTML atau /var/www/html teman-teman. Kemudian buat file file Index didalam folder tersebut dengan format standar HTML didalamnya. Kita akan mencoba Dua Plugin untuk Meng-embed Stream ke Website kita, yaitu dengan Projekktor dan f4Player.

2. Embed dengan Plugin Projekktor
Silahkan download File Projekktor dari Link yang sudah saya berikan diatas yang mengarah ke website official Projekktor. Kemudian buat satu folder lagi untuk plugin Projekktor didalam Folder Livestream yang sudah kita buat lalu ekstrak plugin kedalamnya.

2.1 Edit Index : Input File Projekktor
Untuk menggunakan Projekktor, kita perlu memasukkan 3 File. Yaitu CSS Projekktor, jQuery, dan JS Projekktor. Teman-teman bisa memasukkan script berikut di Elemen Head, jika penamaan folder tidak berbeda, teman-teman tidak perlu untuk mengubah pathnya.

<link rel="stylesheet" type="text/css" href="./projekktor/themes/maccaco/projekktor.style.css">
<script type="text/javascript" src="./projekktor/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./projekktor/projekktor-1.3.09.min.js"></script>

2.2 Konfigurasi Projekktor
Konfigurasi Projekktor berbasis Javascript, sehingga kita bisa meletakkannya dipaling bawah dari Elemen Body. Untuk konfigurasi standar, teman-teman bisa memakai kode berikut.

<script type="text/javascript">
$(document).ready(function() {
projekktor('#lihatstream', {
poster: './projekktor/media/intro.png',
playerFlashMP4: './projekktor/swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
width: 640,
height: 385,
platforms: ['browser', 'flash'],
playlist: [
{
0: {src: 'rtmp://192.168.1.104/live/penguinstunnel', streamType:'rtmp', type:'video/mp4'}
}
]  
}
);
});
</script>

*Poster merupakan Thumbnail atau Gambar kecil yang akan muncul sebelum Stream diputar oleh user
Lagi, apabila peletakkan dan penamaan sama, teman-teman tidak perlu mengubah pathnya.

2.3 Buat Elemen Projekktor
Setelah Projekktor kita konfigurasi, selanjutnya membuat Elemennya didalam Body.

<div id="lihatstream" class="projekktor">
<noscript><p>Javascript tidak aktif! Pastikan Browser Anda Mendukungnya.</p></noscript>
</div>

Sesuaikan ID dengan yang kalian setting pada konfigurasi Projekktor. Untuk class="projekktor" merupakan CSS bawaan dari Skinnya, jadi ini wajib ada.
2.4 Testing!
Silahkan teman-teman hidupkan Server Streamingnya dan Mulai mengirim Stream ke Server, kemudian coba putar Streaming melalui Web. Oh iya, karena RTMP berbasis Flash maka untuk dapat memutarnya teman-teman memerlukan Flash Player yang sudah terinstall di browser masing-masing.
3. Embed dengan Plugin f4Player
Selanjutnya kita akan mencoba Plugin f4Player, hampir sama seperti Projekktor namun kode yang dipakai lebih sedikit. Agar f4Player dapat bekerja, kita harus memasukkan file jQuery, player.swf, Skin, dan Thumbnail untuk tambahannya.

3.1 Ekstrak f4Player
Seperti biasa, setelah mendownload silahkan buat folder baru didalam folder Livestream kita khusus untuk plugin f4Player ini kemudian Ekstrak seluruh isi dari f4Player kedalamnya.

3.2 Edit atau Buat Index baru
Selanjutnya kita akan memasukkan kodenya ke Index. Pertama yang akan kita masukkan adalah file jQuery. Teman-teman bisa memasukkan script berikut di elemen Head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

3.2 Membuat elemen serta mengkonfigurasi f4Player
Kode berikut merupakan kode embed yang akan digunakan untuk memasukkan Plugin f4Player ke Website, kalian bisa memasukkannya didalam elemen Body.

<div id="player">                    
<embed type="application/x-shockwave-flash" src="./f4player/player.swf?v1.3.5" width="650" id="f" name="f" height="400" flashvars="skin=./f4player/skins/mySkin.swf&thumbnail=./f4player/intro.png&stream=rtmp://192.168.1.104/live/&streamname=penguinstunnel&live=1" allowScriptAccess="always" allowfullscreen="true" bgcolor="#000000"/>
     
<noembed>
You need Adobe Flash Player to watch this video. <br>
<a href="http://get.adobe.com/flashplayer/">Download it from Adobe.</a>
<a href="http://gokercebeci.com/dev/f4player" title="flv player">flv player</a>
</noembed>
</div>

Sesuaikan kode yang saya cetak biru dengan konfigurasi teman-teman. Nah berbeda dengan Projekktor, di f4Player kita tidak menggabungkan URL Stream dengan Stream ID. Melainkan kita harus memisahnya (dipisahkan dengan Stream dan Stream Name).
3.3 Testing!
Silahkan teman-teman hidupkan Server Streamingnya dan Mulai mengirim Stream ke Server, kemudian coba putar Streaming melalui Web. Sekali lagi, karena RTMP berbasis Flash maka untuk dapat memutarnya teman-teman memerlukan Flash Player yang sudah terinstall di browser masing-masing.
g. Referensi
GitHub - Open Source AS3 Flash Video Player
Projekktor Official Website

h. Kesimpulan
Dengan memungkinkannya kita meng-embed Streaming kita ke Website. Kita dapat memberikan kemudahan akses ke orang lain untuk melihat streaming kita sehingga akan semakin banyak orang yang akan menonton.

Cukup sekian yang dapat saya tulis, semoga bermanfaat bagi teman-teman semua!
Dan seperti biasa, Terima Kasih!
Wassalamu'alaikum Wr. Wb.