APLIKASI REAL TIME SCREEN SHARING BERBASISKAN WEB MENGGUNAKAN TEKNOLOGI PUSH
PADA WEBSOCKET
Sayuti Daniel; Eric Jessen; Alfons Lee Vinsensius Kumurur; Muhsin Shodiq
Jurusan Teknik Informatika, Fakultas Ilmu Komputer, Binus University Jl. K.H. Syahdan No. 9, Palmerah, Jakarta Barat 11480.
leealfons@gmail.com; eric.jessen@hotmail.com; sayuti.daniel@hotmail.com
ABSTRAK
The purpose of this research is the application can running in the others operation system and bandwidth savings if the bandwidth resources are limited. Research methods used is the collecting data with observation and application design. The outcome of this research is the development of real-time screen sharing application web based, so users can access the application through a web browser. The real-time screen sharing application can help screen sharing process between user as broadcaster to client in different location. In the real-time screen sharing application implement two-way communication (full-duplex) with push technology and image segmentation method. The conclusion is combination between push technology in WebSocket and segmentation image method makes the bandwidth usage becomes more efficient.
Kata Kunci: Real Time Screen Sharing, WebSocket, Push Technology
ABSTRAK
Tujuan penerapan aplikasi real time screen sharing agar aplikasi dapat berjalan pada
sistem operasi yang berbeda dan penghematan penggunaan bandwidth apabila
resource dari pengguna terbatas. Metode penelitian yang digunakan adalah metode
melalui pengumpulan data secara observasi dan perancangan aplikasi. Hasil yang
dicapai adalah pengembangan aplikasi real time screen sharing berbasis web,
sehingga pengguna dapat mengakses aplikasi melalui web browser. Aplikasi real time
screen sharing dapat membantu proses pengiriman tampilan antara pengguna
broadcaster ke client yang berada pada lokasi berjauhan dengan praktis. Dalam
penerapannya, aplikasi real time screen sharing mengimplementasikan komunikasi
dua arah (full-duplex) dengan teknologi push dan metode segmentasi gambar.
Simpulan yang didapat adalah penggabungan teknologi push pada WebSocket dengan metode segmentasi gambar membuat penggunaan bandwidth menjadi lebih hemat.
Kata Kunci: Real Time Screen Sharing, WebSocket, Push Technology
PENDAHULUAN
Latar belakang dari penelitian ini adalah sebelumnya terdapat aplikasi serupa yang pernah dikembangkan dengan kelebihan dalam teknologi, metode dan jangkauan pengguna.
Dalam beberapa tahun terakhir, komunikasi jarak jauh dalam teknologi web telah mengalami banyak kemajuan. Sebelumnya, telah dikembangkan media komunikasi jarak jauh dalam bentuk pesan elektronik atau electronic mail (e-mail). Namun, seiring dengan perjalanan waktu bentuk komunikasi melalui e-mail dinilai kurang praktis karena antara pihak pengirim dan penerima tidak dapat melakukan komunikasi secara langsung. Saat ini telah banyak dijumpai aplikasi yang mendukung pengiriman pesan secara real time. Oleh karena itu, dengan mengembangkan konsep komunikasi yang dilakukan dalam waktu bersamaan atau secara real time seperti, live-streaming, tele-conference, atau video chat akan membantu untuk mengimplementasikan komunikasi pesan dua arah (full-duplex) yang terjadi antara pengirim dan penerima informasi. Dewasa ini, telah terdapat aplikasi yang mendukung pengiriman tampilan layar dari satu komputer ke komputer lain secara real time yang disebut screen sharing. Kundaeli (2011:6) mengemukakan bahwa screen sharing adalah proses menyebarkan sebuah tampilan dari satu perangkat kepada perangkat lain. Screen sharing dapat membantu seseorang untuk memberikan gambaran mengenai idenya dan mendemonstrasikan sebuah produk baru atau menunjukkan tampilan website dalam sebuah pertemuan.Salah satu teknologi yang dapat digunakan untuk pengembangan komunikasi full-duplex secara real time adalah WebSocket. Park, Hwang, Yun, & Moon (2014:307) menerangkan bahwa teknologi WebSocket memungkinkan untuk penerimaan informasi secara cepat dengan komunikasi real time yang lebih efektif, dan memungkinkan untuk mengurangi waktu jeda yang tidak diperlukan saat terjadi pertukaran informasi secara bersamaan. Sebelumnya, terdapat metode yang pernah dikembangkan, yaitu conventional polling method atau yang lebih dikenal dengan teknologi pull. Menurut Ichimura & Matsushita (2005:136) menjelaskan bahwa aplikasi real time tersebut telah dikembangkan adalah aplikasi berbasiskan web dengan menggunakan teknologi pull yang mengharuskan client melakukan request secara berkala dengan interval waktu tertentu. Hal ini memungkinkan terjadinya pemborosan bandwidth data karena client terus-menerus mengirim request untuk mengetahui apakah ada data baru yang dapat dikirim dari server. Untuk itu, pengembangan teknologi WebSocket akan digabungkan dengan teknologi push. Teknologi push yang terdapat pada WebSocket memungkinkan pengiriman informasi dari server ke client tanpa perlu menunggu perintah request dari client terlebih dahulu. Berbeda dengan teknologi push, teknologi pull yang sebaliknya harus menunggu terlebih dahulu perintah request akan informasi data dari pihak client kepada server dalam interval jeda waktu tertentu. Sehubungan dengan penerapan teknologi push, aplikasi real time screen sharing akan berjalan secara langsung dimana pihak server yang akan menyampaikan informasi berupa gambar kepada pihak client.
Sebelumnya, telah dilakukan penelitian berjudul “Perancangan Aplikasi Real Time Screen Sharing dengan Metode Segmentasi Frame Image untuk Penghematan Bandwith” berbasis Desktop, yang menjelaskan tentang aplikasi yang dirancang dengan metode segmentasi frame image dan penghematan bandwidth pada jaringan ketika melakukan real time screen sharing dengan metode segmentasi frame image dan compare image. Dalam penelitian ini aplikasi tidak bersifat portable, karena dalam pengimplementasiannya perlu dilakukan proses instalasi untuk server dan client terlebih dahulu. Jangkauan akses dari aplikasi sifatnya masih terbatas, sehingga memungkinkan aplikasi yang dijalankan hanya dapat diakses pada cakupan tempat tertentu. Oleh karena itu, untuk melengkapi beberapa fitur yang ada pada penelitian
sebelumnya, aplikasi real time screen sharing akan dikembangkan dengan berbasiskan web yang memadukan teknologi push pada WebSocket dan metode segmentasi gambar. Teknologi WebSocket digunakan untuk pembaharuan informasi data otomatis dengan sangat cepat sehingga penyajian informasi tidak akan terlambat sampai ke client dan menghemat bandwidth data yang dikirim. Selain itu, client hanya memerlukan aplikasi berupa web browser untuk menjalankan aplikasi real time screen sharing.
Rumusan masalah yang diperoleh adalah bagaimana cara agar aplikasi dapat berjalan pada setiap sistem operasi berbeda, proses pengiriman dan penerimaan informasi dalam waktu bersamaan, dan penghematan penggunaan bandwidth apabila resources pengguna terbatas.
Hipotesis dari penelitian adalah pengembangan aplikasi real-time screen sharing sendiri diharapkan dapat menjangkau pengguna yang lebih luas dan lebih menghemat penggunaan bandwidth. Oleh karena itu, penerapan teknologi push sebagai solusi dalam penelitian ini agar pengguna tidak perlu melakukan pembaharuan data secara berkala setiap ada informasi data terbaru yang disajikan. Seperti yang telah dijelaskan, bahwa dengan teknologi push yang memungkinkan pengiriman informasi data yang akan dikirim dari server kepada client, tanpa perlu menunggu perintah request dari client kepada server akan lebih memperkecil penggunaan bandwidth data.
Tujuan dari penelitian ini adalah membuat aplikasi real-time screen sharing berbasis web, membuat aplikasi real time screen sharing yang mengimplementasikan komunikasi dua arah (full-duplex), dan penerapan teknologi push, metode segmentasi gambar, serta perbandingan gambar.
Manfaat yang dapat diberikan dari penelitian adalah pengguna dapat mengakses aplikasi pada lokasi berjauhan sehingga pengguna hanya memerlukan web browser untuk mengakses aplikasi dan pemakaian bandwidth yang lebih hemat pada resources pengguna yang terbatas.
Metode penelitian yang dilakukan adalaha pengumpulan data yang meliputi studi dan perancangan aplikasi real time screen sharing. Metode penelitian kedua adalah perancangan aplikasi yang menggunakan skema Waterfall Model akan dilanjutkan dengan perancangan modul dan pseudocode, perancangan flowchart, perancangan UML, perancangan User Interface.
Sistematika penulisan yang dilakukan dalam penelitian adalah pada bab awal akan membahas tentang mengenai latar belakang penelitian ini dilakukan, rumusan masalah yang akan dikaji untuk dicari solusinya, hipotesis mengenai penerapan teknologi yang akan dikembangkan, ruang lingkup penerapan aplikasi, tujuan dan manfaat dari pembuatan aplikasi real time screen sharing serta metodologi penelitian yang digunakan dalam penulisan karya ilmiah ini. Pada bab selanjutnya lebih membahas tentang teori-teori yang akan digunakan dan berkaitan dalam penelitian, pembuatan dan pengembangan aplikasi baik teori umum maupun teori khusus serta pembahasan mengenai hasil penelitian yang pernah dikembangkan sebelumnya. Bab ketiga lebih membahas tentang penjabaran mengenai metodologi yang digunakan dalam penelitian yang akan ditampilkan dalam bentuk diagram kerangka berpikir atau metodologi yang diterapkan, analisa aplikasi yang berkaitan, analisa proses pengembangan aplikasi, diagram perancangan aplikasi yang disajikan ke dalam bentuk UML, perancangan desain antar-muka pengguna, dan algoritma pemrograman yang digunakan dalam pengembangan aplikasi. Pada bab keempat akan memaparkan hasil dari penelitian yang telah dilakukan akan menjabarkan spesifikasi sistem yang meliputi kebutuhan software dan hardware tertentu yang harus tersedia untuk menjalankan sistem yang telah dikembangkan, tahapan dan prosedur penggunaan aplikasi, analisa pengujian aplikasi, hasil penelitian aplikasi yang ditampilkan dalam bentuk grafik dan perbandingan dari hasil penelitian. Pada bab akhir akan berisi simpulan serta saran-saran dari penelitian yang telah dilakukan yang nantinya diharapkan dapat membantu memperbaiki kekurangan pada aplikasi real time screen sharing berbasis web dan diharapkan simpulan dan saran yang diberikan dapat membantu pengembangan aplikasi yang lebih baik kedepannya.
METODE PENELITIAN
Metode yang digunakan pada penelitian melalui pengumpulan data yang meliputi studi kepustakaan yaitu pengumpulan data dan informasi yang dilakukan mulai dari buku, jurnal ilmiah, internet, dan sumber-sumber lain yang berkaitan dan mendukung penelitian dan perancangan aplikasi real time screen sharing, persyaratan dengan mendefinisikan kebutuhan- kebutuhan dari perancangan aplikasi real time screen sharing dengan penerapan teknologi push pada WebSocket, dan melakukan eksperimen terhadap kebutuhan-kebutuhan dari perancangan aplikasi real time screen sharing dengan pembuatan prototype aplikasi untuk memperoleh data yang lebih akurat yang disajikan dalam bentuk grafik bandwidth data yang dikirim per milidetik. Metode penelitian kedua adalah perancangan aplikasi yang menggunakan skema Waterfall Model akan dilanjutkan dengan perancangan modul dan pseudocode, perancangan flowchart, perancangan UML, perancangan User Interface. Beberapa tahapan proses yang digunakan menurut skema waterfall model adalah tahap communication yang meliputi pengumpulan data secara lengkap melalui riset terhadap penelitian yang berkaitan dan mengumpulkan beberapa jurnal yang berhubungan dengan penelitian berkaitan. Tahap planning yang meliputi perencanaan pembuatan aplikasi dengan menentukan jadwal kegiatan melalui pembuatan gantt chart. Tahap modeling berupa pengembangan aplikasi yang akan dilakukan akan didahului oleh perancangan aplikasi dengan menentukan penggambaran Unified Modeling Language (UML), perancangan layar aplikasi, dan algoritma yang akan digunakan. Tahap construction yang menekankan pada pengembangan berupa penulisan script code yang akan membangun aplikasi ini. Bahasa pemrograman yang digunakan adalah Java dan JavaScript, dan yang terakhir adalah tahap deployment berupa pengujian terhadap aplikasi apakah telah berjalan sesuai dengan tujuan dari penelitian ini atau belum. Hasil pengujian akan ditampilkan dalam bentuk grafik.
HASIL DAN BAHASAN
Permasalahan: Penghematan penggunaan bandwidth data dengan teknologi push, metode segmentasi, dan perbandingan gambar.
Untuk mengetahui apakah penerapan teknologi push, metode segmentasi gambar, dan perbandingan gambar dapat mempengaruhi penggunaan bandwidth data pada pengguna akan dilakukan testing aplikasi. Testing akan dilakukan pada dua jenis slide dengan konten animasi dan non-animasi masing-masing berjumlah dua. Testing yang dilakukan melalui protokol TCP dan UDP dengan lama jeda tampilan satu slide 45 menit. Pada proses segmentasi sendiri akan dilakukan sebanyak dua kolom dua baris, tiga kolom tiga baris, satu kolom tiga baris, dan tiga kolom satu baris. Berikut adalah hipotesis yang digunakan.
H0: Teknologi push, metode segmentasi, dan perbandingan gambar tidak berpengaruh pada penghematan penggunaan bandwidth data.
H1: Teknologi push, metode segmentasi, dan perbandingan gambar berpengaruh pada penghematan penggunaan bandwidth data.
Tabel Parameter Uji Coba
Sample Segment Request Time Compare Image Tech Protocol
1 1 × 1 5 s No Pull TCP
2 1 × 1 - No Push TCP
3 1 × 1 - Yes Push TCP
4 2 × 2 - Yes Push UDP
5 3 × 3 - Yes Push UDP
6 1 × 3 - Yes Push UDP
7 3 × 1 - Yes Push UDP
Perbandingan Uji Coba Send Image Time pada Slide Animasi dan Non Animasi Melalui Protokol TCP dan UDP
No Protocol Average Send Image Time (milliseconds) Non Animation Slide Animation Slide
1 2 1 2
1 TCP 208.1875
(Uji Coba 4)
231.9375 (Uji Coba 7)
461.6733 (Uji Coba
10)
224.1228 (Uji Coba
13)
UDP 175.5
(Uji Coba 4)
191.375 (Uji Coba 7)
352.8791 (Uji Coba
10)
189.0351 (Uji Coba
13)
Tabel Perbandingan Uji Coba Slide Animasi dan Non Animasi No Protocol Segment Request
Time
Compare Image
Tech Total Bandwidth Data (MB) No Animation Animation
1 2 1 2
1 TCP 1 × 1 5s No Pull 46.28
(Uji Coba 1)
- - -
2 TCP 1 × 1 - No Push 651.74
(Uji Coba 2)
- - -
3 TCP 1 × 1 - Yes Push 1.25
(Uji Coba 3)
- - -
4 UDP 2 × 2 - Yes Push 1.29
(Uji Coba 5)
1.25 (Uji Coba 8)
73.33 (Uji Coba
2.26 (Uji Coba
11) 14)
UDP 3 × 3 - Yes Push 1.27
(Uji Coba 5)
1.3 (Uji Coba 8)
51.26 (Uji Coba
11)
2.28 (Uji Coba
14)
5 UDP 1 × 3 - Yes Push 1.2
(Uji Coba 6)
1.23 (Uji Coba 9)
148.34 (Uji Coba
12)
2.59 (Uji Coba
15)
UDP 3 × 1 - Yes Push 1.31
(Uji Coba 6)
1.2 (Uji Coba 9)
105.65 (Uji Coba
12)
3.02 (Uji Coba
15)
Tabel Perbandingan Uji Coba Slide Animasi dan Non Animasi
Statistik uji:
1.
Slicing Image AlgorithmRumus untuk mencari lebar gambar per potongan (width per slice) dengan iw adalah lebar gambar (image width) dan c adalah kolom (column):
w = iw c
Rumus Mencari Lebar Gambar Per Potong (Width per Slice)
Rumus untuk mencari panjang gambar per potongan (height per slice) dengan ih adalah panjang gambar (image height) dan c adalah baris (row):
h = ih r
Rumus Mencari Panjang Gambar Per Potong (Width per Slice) Apabila baris adalah p, kolom adalah q, Xi adalah potongan horisontal ke-i dan Yj adalah potongan vertikal ke-j, maka :
- Xi = (i * width per slice) - Yj = (j * height per slice)
Rumus diatas akan digunakan untuk menentukan titik permulaan dari perpotongan yang dapat dibagi menjadi empat kemungkinan kondisi dalam pemotongan gambar.
A A B
A A B
C C D
Kondisi Pemotongan Gambar pada Layar
Berdasarkan kondisi pemotongan gambar pada gambar 3.34 terdapat empat kemungkinan yang akan terjadi.
1) Kondisi A
Pada kondisi ini potongan gambar memiliki ukuran panjang dan lebar yang sesuai dengan rumus untuk mencari ukuran panjang dan lebar gambar per potongan.
Slicing = (Xi, Yj,width, height) 2) Kondisi B
Pada kondisi ini potongan gambar memiliki ukuran panjang yang berbeda dengan potongan gambar yang lain karena pembagian ukuran yang tidak dapat habis dibagi oleh kolom.
Slicing = (Xi, Yj, (image width – Xi), height) dengan syarat i<n-1
3) Kondisi C
Pada kondisi ini potongan gambar memiliki ukuran lebar yang berbeda dengan potongan gambar yang lain karena pembagian ukuran yang tidak dapat habis dibagi oleh baris.
Slicing = (Xi, Yj, width, (image heigth – Yj)) dengan syarat j<m-1
4) Kondisi D
Pada kondisi ini potongan gambar memiliki ukuran panjang dan lebar yang berbeda dengan potongan gambar yang lain. Pada kasus nilai segmentasi gambar yang tidak habis dibagi oleh panjang atau lebar gambar akan menghasilkan kondisi potongan D. Sebagai ilustrasi, diketahui panjang gambar adalah 100 pixel, lebar gambar adalah 50 pixel, dan segmentasi gambar adalah 3 × 3. Pada kasus ini, potongan terakhir (kondisi D) akan memiliki panjang dan lebar yang berbeda dengan potongan gambar yang lain karena sisa hasil bagi 100 dengan 3 adalah 1 dan sisa hasil bagi 50 dengan 3 adalah 2, sehingga potongan terakhir akan berukuran 34×18.
Slicing : (Xi, Yj, (image width – Xi), (image heigth - Yj)) dengan syarat i < n - 1 dan j < m – 1
2.
Compare Image AlgorithmAlgoritma perbandingan gambar (Compare Image Algorthm) digunakan untuk membandingkan setiap gambar yang telah ditangkap, sehingga hanya gambar terbaru yang akan dikirim oleh aplikasi broadcaster. Untuk mengetahui apakah sebuah gambar adalah gambar terbaru atau tidak, maka dilakukan perbandingan gambar terbaru dengan gambar sebelumnya. Proses perbandingan dilakukan dengan mengambil setiap data pixel secara berulang (looping) dari koordinat awal (0, 0) sampai koordinat akhir (width, height) gambar.
Setiap data pixel memiliki spektrum warna RGB (Red, Green, Blue) yang akan menentukan perbedaan dari kedua gambar tersebut. Cara mengukur perbedaan gambar melalui warna RGB yaitu melalui nilai toleransi perbedaan kedua gambar. Nilai toleransi akan dinyatakan dalam bentuk nilai persentase. Apabila nilai toleransi yang diperoleh gambar senilai 100%
maka jika terdapat 1 data pixel berbeda maka gambar tersebut di katakan berbeda, tetapi jika toleransi senilai 70% maka dengan toleransi lebih dari 30 data pixel berbeda gambar tersebut akan dianggap berbeda.
Keputusan:
Dari hasil penelitian membuktian pada tabel uji coba perbandingan slide animasi dan non- animasi dengan teknologi push dan segmentasi gambar yang semakin banyak membuat penggunaan bandwidth data menjadi lebih hemat. Dari data uji coba erbandingan menolak H0 sehingga berdasarkan hal tersebut dapat disimpulkan bahwa teknologi push, metode segmentasi, dan perbandingan gambar berpengaruh pada penghematan penggunaan bandwidth data.
SIMPULAN DAN SARAN
Hasil Simpulan yang dapat diperoleh dari hasil perancangan aplikasi real time screen sharing dengan teknologi push dan WebSocket berbasiskan web adalah aplikasi yang saat ini dikembangkan dengan menggabungkan beberapa kelebihan dari penelitian sebelumnya dengan menerapkan teknologi push, metode segmentasi gambar dan perbandingan gambar yang dapat diakses pada lokasi berjauhan. Penerapan teknologi push, metode segmentasi gambar dan perbandingan gambar pada aplikasi real time screen sharing membuat penggunaan bandwidth data menjadi lebih hemat. Aplikasi juga dapat berjalan lebih cepat dengan tipe pengiriman broadcast melalui protokol UDP. Akan tetapi, terdapat loss bandwidth untuk pengiriman data yang ditemukan pada slide animasi pertama, tetapi masih dalam standar toleransi ITU-T. Pada aplikasi real time screen sharing berbasiskan web pengguna cukup menggunakan web browser untuk mengakses aplikasi.
Saran yang dapat diberikan untuk pengembangan hasil penelitian ini adalah metode segmentasi gambar pada aplikasi bersifat statis sesuai konfigurasi yang dilakukan aplikasi broadcaster sehingga penghematan bandwidth pada jaringan kurang maksimal. Di masa mendatang, aplikasi dapat dikembangkan agar mampu melakukan perubahan segmentasi gambar secara otomatis selama proses screen sharing berjalan sehingga penghematan bandwidth menjadi lebih maksimal. Pada pengembangan aplikasi yang lebih lanjut untuk kedepannya menemukan metode yang mampu membuat loss bandwidth data menjadi lebih rendah dan memperkecil delay tampilan. Pada perancangan desain antar-muka untuk kedepannya dapat dikembangkan menjadi lebih interaktif dan menarik.
REFERENSI
Ichimura, S., & Matsushita, Y. (2005). Lightweight Desktop-Sharing System for Web Browsers. Information Technology and Applications, 2005. ICITA 2005. Third International Conference on (Volume:2 ) , 136 - 141.
Kundaeli, F. (2011). AfriMeet: An internet meeting tool designing for low bandwidth and unstable conditions. Cape Town: University of Cape Town.
Park, J. T., Hwang, H. S., Yun, J. S., & Moon, I. Y. (2014). Study of HTML5 WebSocket for a Multimedia Communication. International Journal of Multimedia and Ubiquitous Engineering Vol.9, No.7, 61-72.
RIWAYAT PENULIS
Muhsin Shodiq lahir di Jakarta pada 8 Januari 1987. Penulis menamatkan pendidikan S1 di Universitas Bina Nusantara dalam bidang Teknik Informatika pada tahun 2008, kemudian melanjutkan pendidikan S2 di King Mongkut’s University, North Bangkok Thai-German Graduate School dan lulus pada tahun 2011. Saat ini bekerja sebagai Software System Engineer di Traveloka.
Alfons Lee lahir di Jakarta pada 18 Oktober 1993. Penulis menamatkan pendidikan S1 di Universitas Bina Nusantara dalam bidang Teknik Informatika pada tahun 2015. Saat ini bekerja sebagai mahasiswa magang di Ennouns.
Eric Jessen lahir di Jambi pada 12 Januari 1994. Penulis menamatkan pendidikan S1 di Universitas Bina Nusantara dalam bidang Teknik Informatika pada tahun 2015. Saat ini bekerja sebagai Network Administrator di Universitas Bina Nusantara.
Sayuti Daniel lahir di Palembang pada 14 Desember 1994. Penulis menamatkan pendidikan S1 di Universitas Bina Nusantara dalam bidang Teknik Informatika pada tahun 2015. Saat ini bekerja sebagai Software Engineer di Traveloka.
