Paper : LIVE STREAMING CANVAS DENGAN HTML5 DAN NODEJS SEBAGAI ALTERNATIF LIVE STREAMING VIDEO

 

LIVE STREAMING CANVAS DENGAN HTML5 DAN NODEJS SEBAGAI ALTERNATIF LIVE STREAMING VIDEO

Wibi Cahyo Hastono

^{Tanjung Rejo II, Natar Lampung Selatan}

Abstract

The development of communication technology has reached a point where there is no limitation of space and time. Nowadays with the growing variety of communication technologies that support many directions such as WebRTC, Ajax, Nodejs and others. Has helped the program developers to innovate with these new technologies, such as create a multidirection realtime communications applications. in this papper I will try to implement the canvas feature in HTML5 and WebSocket on Nodejs to build an application that can provide service to do live streaming canvas.

Keywords Streaming, Canvas HTML5, WebSockets, Web, Real-time Communications, Web RTC

1. PENDAHULUAN
1.1. Latar Belakang
Perkembangan teknologi komunikasi realtime berkembang sangat pesat, salah satunya adalah teknologi WebRTC (Web Real Time Comunication). Teknologi berbasis website ini kini telah banyak dikembangkan sebagai sarana komunikasi realtime antar user, seperti streaming video. Dimana teknologi yang digunakan pada WebRTC ini tidak lagi menggunakan teknologi flash untuk memutar videonya, melainkan menggunakan tag video pada HTML5 sedangkan untuk mengirim datanya digunakan teknologi NodeJS. Pada paper ini penulis mencoba membuat alternative media komunikasi lain selain video, yaitu canvas yang dapat digunakan layaknya papan tulis sebagai media pembelajaran di kelas. Penulis mencoba menerapkan teknologi yang sama seperti yang digunakan pada streaming video, hanya menggunakan media yang berbeda.
Penelitian mengenai streaming video menggunakan WebRTC sebelumnya sudah pernah dibahas pada paper berjudul “Architecture for Real Time Communications over the Web” (Jukka, Antony and All, 2013). Papper tersebut mencoba mengimplementasikan beberapa teknologi baru, diantaranya teknologi fitur tag video pada HTML5, WebSockets, WebRTC dan NodeJs, untuk membangun sebuah prototype aplikasi yang dapat melakukan live streaming video conference.  Pada aplikasi prototype nya mereka telah berhasil memanfaatkan websocket pada nodejs untuk membuat sebuah struktur yang memungkinkan terjadinya sharing device antar browser seperti microphone dan kamera, sehingga terjadilah live streaming antar user.
Penelitian lainnya yang juga memanfaatkan teknologi serupa adalah penelitian pada papper berjudul “P2P Media Streaming with HTML5 and WebRTC” (Kapetanakis, Malamos and All, 2013). Pada penelitianya Mereka menerapkan webrtc dan HTML5 untuk melakukan streaming video dengan menggunakan konsep peer-to-peer, hal ini ditujukan untuk mempercepat proses pengiriman data video streaming nya. Dimana penyedia data video yang akan distreaming bukan lagi hanya server melainkan semua user yang juga melakukan streaming video tersebut. Hal ini layaknya teknologi download yang diterapkan torrent. Pada papper ini mereka menggunakan websocket untuk membuat sebuah jaringan peer-to-peer antar user sehingga dapat saling berbagi resource.
Pada paper ini penulis mencoba membangun aplikasi streaming melalui media kanvas dikarenakan beberapa factor, diantaranya. Untuk melakukan streaming video dibutuhkan bandwidth data yang besar sedangkan untuk kanvas secara teori tidak terlalu besar. Selanjutnya penulis berpendapat bahwa terdapat beberapa kondisi dimana user lebih membutuhkan apa yang orang lain tulis atau gambar seperti pada saat proses belajar mengajar siswa akan lebih focus ke papan tulis dan bukan ke orang yang menulis di papan tulis tersebut.

1.2.

1.
1.1.
1.2. Tujuan
Adapun tujuan dari penulisan paper ini adalah sebagai berikut :
1. Memenuhi tugas matakuliah Multimedia di Jurusan Ilmu Komputer FMIPA, Universitas Lampung.
2. Membuat aplikasi alternatif untuk live streaming yang membutuhkan bandwith yang kecil.

1.3. Manfaat
Berikut manfaat yang mungkin dapat diberikan dari pemuat papper ini:
1. Dapat membuat sebuah alternative untuk streaming yang dapat digunakan oleh user yang memiliki bandwidth data yang kecil.
2. Memberikan referensi kepada developer web untuk memanfaatkan teknologi sejenis pada aplikasinya.


2. METODOLOGI
2.1. Pre Research
Pada bagian ini dilakukan penelitian secara umum tentang pokok bahasan yang akan dilakukan pada penelitian. Dengan mengkaji aplikasi yang akan dibuat dengan kerelevanan kemampuan aplikasi dengan Bahasa yang digunakan. Aplikasi yang akan dibangun merujuk pada teknologi yang telah digunakan untuk membuat prototype pada paper “Architecture for Real Time Communications over the Web” oleh  S. Panagiotakis and all, yaitu menggunakan konsep Web RTC yang diimplementasikan pada websocket untuk membuat koneksi antara klien dan server. Aplikasi ini juga akan dibangun mengunakan konsep Web RTC dan mengimplementasikan modul websocket untuk komunikasi antar server dan klien.
2.2. Perancangan Aplikasi
Aplikasi yang dibangun sebelumnya terlebih dahulu dilakukan proses perancangan. Dimana pada proses ini akan dirancang fungsi utama dari fitur yang terdapat dan kemampuan dari aplikasi tersebut. Berikut gambar desain aplikasi :

Gambar 1. Cara Kerja Aplikasi Secara Umum








2.3. Implementasi
Memindahkan hasil rancangan aplikasi pada tahap sebelumnya kedalam Bahasa pemrograman yang dapat dimengerti oleh Komputer. Didalam melakukan penelitian ini penulis menggunakan metode pengembangan perangkat lunak increamental. Berikut langkah-langkah pengembangan perangkat lunak increamental :

Gambar 2. Flowchart metode increamental yang diterapkan

Analisa
Pada tahap ini penulis melakukan analisis tentang kelayakan aplikasi dan serta melakukan. Pencarian beberapa referesni untuk membangun aplikasi.
Design
Ditahap ini penulis merancang aplikasi secara kasar dengan menggunakan algoritma. Dimana aplikasi yang akan dibuat akan terdiri dari dua badian yaitu server side yang berfungsi untuk menerima data dari klien dan melakukan broadcast data ke klien lainnya. Lalu bagian kedua yaitu klien side yang berfungsi untuk  mengirimkan data ke server serta melakukan listening terhadap data yang dikirim dari server secara terus menerus.
Code
Pada  tahap code ini design aplikasi yang sudah dibuat sebelumnya diimplementasikan ke dalam Bahasa pemrograman sesuai dengan algoritma ang telah juga di buat sebelumnya.
Test
Di tahap testing dilakukan evaluasi dan pengecakan fitur dari aplikasi yang dibangun apakah sudah sesuai dengan desain yang dibuat sebelumnya.

Pada metode increamental keempat proses diatas akan dilakukan beberapa kali dimana pada setiap pengulangan nya diharapkan aplikasi mengalamai pengembangan dari sebelumnya. Selain itu pada metode increamental ini aplikasi dibangun dari fungsional fitur utamanya terlebih dahulu baru kemudian dilakukan pengembangan untuk mencapai fitur tambahan. Untuk membangun aplikasi ini pertama yang harus dilakukan adalah membangun sebuah aplikasi server yang dapat berinteraksi secara langsung terhadap client. Kemudian membangun aplikasi pada sisi klient yang dapat melakukan handshake dengan server sehingga dapat terjadi komunikasi data secara kontinu dan memungkinkan terjadinya live streaming.

2.4. Implementasi Aplikasi Server Side
Pada sisi server, aplikasi dibangun menggunakan nodejs sebuah framework dari javascript yang dikhususkan untuk membuat aplikasi server secara terkustomisasi. Untuk membangun service web nya saya menggunakan salah satu modul yang tersedia di nodejs yaitu modul http. Pada server saya membuka port 1234 untuk dijadika port dimana service aplikasi saya berjalan. Aplikasi server ini dibangun untuk dapat menerima data-data dari klien untuk kemudian mengolah dan mengirimkan data tersebut ke klien lainnya secara realtime. Untuk dapat melakukannya dibutuhkan modul tambahan lagi yaitu modul websocket. Agar server dapat mengirimkan respon terus-menerus kepada klien tanpa adanya request dari klient terlebih dahulu.
                Gambar 3. Ilustrasi Aplikasi server

2.5. Implementasi Aplikasi Client Side
Pada aplikasi di klient digunakan javascript yang akan dimuat secara otomatis oleh browser tiap kali ­halaman aplikasi dimuat. Aplikasi javascript ini digunkan untuk melakukan penctiraan data dari server ke canvas serta sebaliknya dengan mengubah aktivitas user pada canvas ke dalam bentuk data tertentu yang dapat diterima dan diolah oleh server. Agar klient dapat tetap menerima repons data dari server tanpa melakukan request data terlebih dahulu maka pada sisi klient juga harus digunakan websocket. Berikut ilustrasi cara kerja websocket yang diterapkan.









Gambar 4. Ilustrasi Websocket yang diterapkan



3. PEMBAHASAN
2.

3.1. Testing Aplikasi
Uji coba aplikasi dilakukan dengan membuka dua buah browser yaitu firefox dan chrome kemudian membuka halaman dari page dimana aplikasi dijalankan. Berikut tampilan dari masing-masing browser saat pertama kali membukan page aplikasi

­Gambar 5. Tampilan page awal aplikasi pada Firefox









   
Gambar 6. Tampilan page awal aplikasi pada Google Chrome


Kedua browser pada gambar diatas telah terhubung ke server. Hal ini dapat dilihat dari log pada console server yang dijalanka. Diatas merupakan bagaimana keadaan canvas saat page pertama kali dibuka. Pada kedua browser menunjukan kanvas hijau yang kosong.
Selanjutnya untuk mengecek apakah kedua canvas benar-benar terhubung, pada salah satu browser, kita gambar suatu objek pada kanvas kosong. Pada percobaan ini saya menggambar pemandangan pada canavas di  Google Chrome seperti ini

Gambar 7. Tampilan page aplikasi pada Google Chrome yang telah digambar objek pemandangan.





Gambar 8. Tampilan page aplikasi pada Firefox  setelah page aplikasi pada Google Chrome digambar objek pemandangan

Dari gambar diatas dapat dilihat bahwa canvas pada Firefox juga mengalami perubahan gambar sesuai dengan perubahan gambar pada canvas di Google Chrome hal ini menunjukan bahwa aplikasi yang dibuat telah berjalan sebagaimana mestinya. Kemudian gambar dari canvas yang dihasilkan dapat langsung disimpan sebagai file gambar dalam bentuk *.png.
    Selanjutnya untuk mengetahui jumlah bandwidth yang dibuthkan server maka kita dapat melihatnya pada gambar statistic pengiriman data dari mesin yang dijadikan server. Selama server berjalan.
3.2. Pengamatan Statistic Pengiriman Data pada Server
Gambar 9. Statistic pengiriman data dari sever

    Dari statistic diatas dapat dilihat bahwa bandwidth data yang dibutuhkan server untuk melakukan streaming antara dua klien terhitung tidak terlalu besar. Hanya sekitar 5-10 Kbps, hal ini tentu sangat jauh berbeda dengan bandwidth data yang dibuthkan untuk streaming video kualitas rendah yang berkisar antara 40-100 Kbps.




4. KESIMPULAN
Dari penelitian dan pengujian yang dilakukan sebelumnya dapat diambil kesimpulan sebagai berikut :
1. Node js dan HTML 5 dapat diimplementasikan untuk membangun sebuah aplikasi streaming canvas realtime yang ringan.
2. Bandwidth data yang dibutuhkan untuk menjalankan aplikasi yang dibangun juga tergolong ringan berkisar antara 5-10Kbps.
3. Canvas hasil streaming dapat langsung disimpan oleh user sebagai file gambar berformat PNG.

5. Ucapan Terima Kasih
Peneliti mengucapkan terima kasih kepada seluruh pihak yang telah membantu menyelesaikan paper ini. Terutama kepada Allah SWT. Serta kedua orangtua yang telah memberikan doa dan dukungan kepada peneliti untuk menyelesaikan paper ini. Tak lupa juga peneliti mengucapkan terima kasih kepada dosen pembimbing yang telah membantu dalam penyelesaian tugas paper ini agar segera terselesaikan tepat waktu. Terima kasih juga kepada Jukka K. Nurminen, Antony J. R. and All, serta S. Panagiotakis, K. Kapetanakis and All. Sebagai pihak yang telah melakukan penelitian sebelumnya dan menjadi sumber referensi utama bagi penulis untuk menyelesaikan paper ini.


REFFERENCE

[1] Cantelon, Mike, Shelter Island, Node JS in Action, Publisher (2013).
[2] Jukka K. Nurminen, Antony J. R. Meyn, Eetu Jalonen, Yrjo Raivio and Ra´ul Garc´ıa Marrero, P2P Media Streaming with HTML5 and WebRTC, Publisher (2013).
[3] Kadir, Abdul, Jogja, From Zero to a Pro HTML5, Publisher (2013).
[4] S. Panagiotakis, K. Kapetanakis, A. G. Malamos, Heraklion, Architecture for Real Time Communications over the Web, Publisher (2013).
[5] Teixeira, Pedro, Hands On Node JS, Publisher (2013).
[6] Anonym, http://bertzzie.com/knowledge/javascript-lanjut (Dikunjungi pada 16 Juni 2015).
[7] Node JS, https://github.com/idjs/belajar-nodejs (Dikunjungi pada 16 Juni 2015).
[8] Microsotf, http://social.technet.microsoft.com/wiki/contents/articles/16685.pengenalan-websockets-id-id.aspx (Dikunjungi pada 16 Juni 2015).