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).

here the code to make Pascal triangle :

#include <iostream>
#include <iomanip>
using namespace std;
int main()
{  
    int nJMLHBRS;
    cin>>nJMLHBRS;
    float nANGKA[nJMLHBRS][nJMLHBRS];
    for (int i=0;i<nJMLHBRS;i++){
        cout<<setw(4*(nJMLHBRS-i))<<" ";
        for (int j=0;j<=i+1;j++){
                if(j==0||j==i+1){nANGKA[i][0]=1;nANGKA[i][i+1]=1;}
                 else {nANGKA[i][j]=nANGKA[i-1][j]+nANGKA[i-1][j-1];}
            if(j==0){cout<<nANGKA[i][j];}
            else{cout<<setw(8)<<nANGKA[i][j];}
                                }
        cout<<"\n";
                                }
    return 0;
}

I use setw() from  iomanip libary to make an triangle.

Jadi diatas itu penampakan kamus C++ buatan ane gan, isi dari kamusanya si kumpulan fungsi fungsi di library C/C++. Ide awal buatnya dulu karena saya sering pake library di C++ tapi keseringan lupa parameter fungsinya apaan aja, jadi tiap kali mau buat fungsi ane biasanya buka buku dulu karena lupa dan biasanya karena buka buku terus ane malah lupa mau buat program apaan sebelumnya, jadi ya ane buat aja ni kamus. Sebenernya mau share source code nya juga tapi berhubung datanya kena format karena sebuah ketidak sengajaan :D ya jadi cuman bisa share barang jadinya deh. O iya omong-omong ane buat ini pake C++ Builder. Buat agan-agan yang mau sedot ini link download nya

Download Di Sini

Diatas adalah gambar hasil segitiga pascal yang saya buat menggunakan bahasa C++, langsung saja ini syntaxnya :

#include <iostream>
#include <iomanip>
using namespace std;
int main()
{  
    int nJMLHBRS;
    cin>>nJMLHBRS;
    float nANGKA[nJMLHBRS][nJMLHBRS];
    for (int i=0;i<nJMLHBRS;i++){
        cout<<setw(4*(nJMLHBRS-i))<<" ";
        for (int j=0;j<=i+1;j++){
                if(j==0||j==i+1){nANGKA[i][0]=1;nANGKA[i][i+1]=1;}
                 else {nANGKA[i][j]=nANGKA[i-1][j]+nANGKA[i-1][j-1];}
            if(j==0){cout<<nANGKA[i][j];}
            else{cout<<setw(8)<<nANGKA[i][j];}
                                }
        cout<<"\n";
                                }
    return 0;
}

pada syntax diatas saya menggunakan fungsi setw() dari libary iomanip untuk membuat segitiga pascal berbentu segitiga sama kaki

 

Oke hari ini kita akan mencoba untuk mengganti atau menambahkan repository pada linux kita. Sebelumnya saya akan menjelaskan sedikit mengenai pengertian repository. 

Repository adalah sejenis server yang menyimpan kumpulan software-software  pada linux. seperti kita ketahui sebuah software pada linux kebanyakan membutuhkan software lainnya untuk dapat berjalan atau depencies, dan akan sangat merepotkan bagi kita jika harus mencari dan mendownload depencies dari setiap software secara manual. Dengan konsep repository ini maka akan memudahkan bagi kita untuk menginstall software karena semua depencies dari software tersebut sudah di sediakan oleh repositry nya.

nah file yang menyimpan kumpulan repository itu ada di :

       /etc/apt/sources.list

untuk mengeditnya caranya dukup mudah hanya dengan mengetikan perintah berikut pada terminal :

       sudo nano /etc/apt/sources.list

selanjutnya akan akan terbuka pada terminal kita kumpulan repository yang ada pada komputer kita. 

#1. Menambahkan / mengedit repository

      untuk menambahkan repository caranya cukup mudah hanya melakukan copy pada baris baru pada file CRTL+SHIFT+V. lalu setelah selesai kita dapat menyimpannya dengan CTRL+O lalu untuk keluar CTRL+X.

#2. Mengupdate repository

       untuk mengupdate repository yang telah kita tambahkan adalah dengan perintah :

      sudo apt-get update

#3. Finish

       Setelah selesai update selanjutnya kita dapat menginstall software yang terdapat pada repository dengan mengetikan perintah ;

      sudo apt-get install nama_software

Sekian artikel dari Saya semoga bermanfaat =)

Oke pada kesempatan kali ini saya akan berbagi pengetahuan saya tentang cara compilasi program C/C++ pada terminal Linux.
#1. Pastikan Compiler Terinstall pada Linux Kita
     caranya dengan mengetikan perintah :
    
           g++ --version
     atau untuk bahasa C
           gcc --version

      Jika sudah terinstall akan muncul text seperti berikut :
                 
                     g++ (Ubuntu 4.8.2-19ubuntu1) 4.8.2
                     Copyright (C) 2013 Free Software Foundation, Inc.

      Jika belum install compiler dengan mengetikan perintah berikut :

            sudo apt-get install g++
      atau untuk C
            sudo apt-get install gcc


#2. Compilasi dan Running Source Code
      Pertama pastikan jika direktori terminal kita berada pada direktori yang sama dengan direktori file cpp/c yang ingin kita compile ( direktori harus direktori system seperti home)
     ketikan perintah berikut :

         g++ -o nama_file.cpp nama_file_setelah_di_compile
    
     untuk runningnya :
     
         ./nama_file_setelah_di_compile

       Selain itu kita juga dapat menggunaka perintah berikut : 
   
     
         g++ nama_file.cpp
    
     untuk runningnya :
     
         ./a.out
 

Untuk file C gunakan gcc untuk kompilasinya. semoga bermanfaat and happy coding =) .








  

Kali ini saya akan menambahkan tema dan widget baru pada conky manager. Seperti kita ketahui bahwa widget yang terdapat pada conky adalah kumpulan syntax yang terlihat kompleks dan sulit bagi kita untuk mengeditnya secara manual sesuai dengan keinginan kita. berikut adalah cara untuk menambahkan tema dan widget pada conky manager :
#1 Requirement :
      - conky dan conky manager sudah terinstall pada linux anda.
      - download file tema dan widget untuk conky manager disini

#2 Melakukan installasi
      - Ekstrak folder conky pada file *.zip yang telah anda download.
      - rename folder menjadi ".conky" dan pindahkan ke folder home dari user
        anda.
        "/home/nama_user/"

#3 Jalankan Conky Manager
     - alt+f2
     - Ketikan conky-manager kemudian enter


Sekian tutorial dari saya semoga bermanfaat =)