PERANCANGAN STREAMING VIDEO BERDASARKAN KECEPATAN BANDWIDTH USER Oleh Eric Setiawan NIM : 612007013 Skripsi
Untuk melengkapi syarat-syarat memperoleh Ijasah Sarjana Teknik
Fakultas Teknik Elektronika dan Komputer Program Studi Teknik Elektro Universitas Kristen Satya Wacana
Salatiga
PERANCANGAN STREAMING VIDEO BERDASARKAN KECEPATAN BANDWIDTH USER
Oleh Eric Setiawan NIM : 612007013
Skripsi ini telah diterima dan disahkan Sebagai salah satu persyaratan guna mencapai
SARJANA TEKNIK Dalam
KONSENTRASI TEKNIK KOMPUTER
FAKULTAS TEKNIK ELEKTRONIKA DAN KOMPUTER UNIVERSITAS KRISTEN SATYA WACANA
SALATIGA
Disahkan oleh
Pembimbing I
Hartanto Kusuma Wardana, M.T Tgl ...
Pembimbing II
Saptadi Nugroho, S.T, M.Sc Tgl ...
i
INTISARI
Pada skripsi ini dirancang dan direalisasikan sebuah aplikasi website yang dilengkapi
dengan fitur pilihan kualitas video yang dapat dipilih oleh client sesuai dengan kecepatan
internet yang dimiliki user. Selain itu, pada aplikasi website dilengkapi dengan fitur live
streaming data video yang menyiarkan secara langsung sebuah acara. Aplikasi website
dibangun menggunakan bahasa pemprograman HTML 5 dan PHP. Sedangkan untuk aplikasi
live streaming menggunakan bahasa pemprograman Java dengan Java Media Framework dan
menggunakan WAMP sebagai webserver-nya.
Dari pengujian yang telah dilakukan, diperoleh hasil bahwa aplikasi website dapat
berjalan dengan sempurna untuk aplikasi live streaming data video. Aplikasi website dapat
beroperasi pada semua sistem operasi seperti Windows XP, Windows 7 Ultimate, dan
Windows Vista, tetapi aplikasi website belum dapat berjalan pada semua web browser. Web
browser yang tidak men-support aplikasi website adalah web browser Microsoft Internet Explorer. Aplikasi website dilengkapi dengan fitur pilihan kualitas untuk streaming data
video dan juga live streaming data video. Pada streaming data video terdapat tiga pilihan
kualitas video yang bertujuan untuk menghemat waktu pada saat melakukan buffering. Selain
itu client juga dapat menikmati siaran langsung yang sedang disiarkan melalui fasilitas live streaming sehingga client tidak kehilangan informasi-informasi suatu acara penting.
ii
ABSTRACT
In this paper designed and realized a website application that comes with the features of video quality option that can be chosen by the client in accordance with its internet speed. Furthermore, the application site is equipped with features live streaming video data are broadcasted in the live events. Application site was built using HTML 5 and the programming language PHP. As for the live streaming applications using Java programming language with the Java Media Framework and using WAMP as its web server.
From the testing that has been done, the result that the website application can run perfectly for the live streaming video data applications. Website applications can operate on all operating systems like Windows XP, Windows 7 Ultimate, and Windows Vista, but have not been able to run web applications on all web browsers. Web browsers that do not support the application as a web browser is Microsoft Internet Explorer. Application site is equipped with a quality selection of features for streaming video data as well as live streaming video data. On streaming video data there are three video quality options that aim to save time during buffering. Additionally clients can also enjoy live broadcast is being broadcast via live streaming facility so that the client does not lose the information an important event.
iii
KATA PENGANTAR
Puji syukur ke hadirat Tuhan Yang Maha Esa untuk berkat kesehatan, kelancaran, dan keselamatan yang senantiasa diberikan-Nya sehingga penulis dapat menyelesaikan studi dan skripsi ini untuk mendapatkan gelar Sarjana Teknik.
Tak lupa penulis mengucapkan terima kasih kepada:
1. Pembimbing skripsi baik itu Pembimbing I Bapak Hartanto W, M.T. dan Pembimbing
II Bapak Saptadi Nugroho,M.Sc. untuk bimbingannya.
2. Untuk keluarga yang terkasih, Papa Soehartoyo Tanuwijaya, Mama Yeny Mulyawati,
Kakak Feny Susanti, Adi Wijaya, dan Aprilia Susanti, dan keluarga besar yang lain. Mengucap syukur untuk semua kasih, nasehat, dukungan dan bahkan teguran yang senantiasa membangun.
3. Sahabat – sahabat kos terkasih, Krisna, Christian, Michael, Roy, Cerian, dan juga
Sanjaya yang sudah menjadi teman bercerita, berdiskusi, membantu proses koreksi, dan memberi semangat untuk menyelesaikan skripsi ini dengan cepat.
4. Bapak Hartanto K. W, M.T. selaku Wakil Dekan Fakultas Teknik Elektronika dan
Komputer dan wali studi untuk bimbingan dan nasehat dalam menjalankan dan merencanakan studi.
5. Bapak Saptadi Nugroho,M.Sc selaku Kaprogdi Sistem Komputer untuk bantuan
penjelasan mengenai hal-hal yang belum dimengerti mengenai kurikulum Teknik Elektro.
6. Mbak Tin, Mbak Rista, Mbak Dita, dan pihak Tata Usaha yang telah membantu dalam
proses pengurusan administrasi skripsi dan perkuliahan.
7. Segenap panitia sidang skripsi yang telah menyusun jadwal sidang skripsi.
8. Para dosen, dan laboran yang telah mengajar, membantu, dan membimbing dalam
perkuliahan, dan praktikum selama hampir enam tahun.
9. Teman – teman monkeys, yang telah memberi dukungan dan bantuan dalam pengujian
skripsi ini.
10. Para sahabat, teman, dan rekan-rekan mahasiswa Fakultas Teknik Elektronika dan
Komputer angkatan 2007 baik yang telah lulus, maupun belum di mana telah memberi banyak inspirasi untuk terus belajar, berjuang dan berusaha.
iv
11. Dan untuk pihak-pihak yang belum tersebutkan yang telah membantu dalam proses
penyelesaian skripsi ini.
Skripsi yang telah dikerjakan ini tentunya masih belum sempurna, mengingat keterbatasan waktu, sumber daya, dan pengetahuan yang dialami. Tetapi terlepas dari itu semua penulis bersyukur karena dapat menyelesaikan skripsi ini hingga tahap akhir dan berharap semoga skripsi ini dapat memperkaya pengetahuan kita semua. Skripsi ini tentunya masih dapat dikembangkan dengan teknologi yang lebih canggih, mengingat perkembangan teknologi yang senantiasa maju.
Akhir kata, semoga pengetahuan yang telah dipelajari senantiasa dipergunakan untuk kebaikan sesama dengan terus berpedoman pada prinsip Takut akan Tuhan adalah permulaan pengetahuan. Tuhan Memberkati Pelayanan kita.
Salatiga, Juni 2013
v DAFTAR ISI
INTISARI Error! Bookmark not defined.
ABSTRACT ii
KATA PENGANTAR iError! Bookmark not defined.
DAFTAR ISI v
DAFTAR GAMBAR viii
DAFTAR TABEL x
DAFTAR KODE xi
DAFTAR SINGKATAN xii
BAB I PENDAHULUAN Error! Bookmark not defined.
1.1. Tujuan Error! Bookmark not defined.
1.2. Latar Belakang Masalah Error! Bookmark not defined.
1.3. Gambaran Sistem 2
1.4. Batasan Masalah 3
1.5. Perincian Tugas 4
1.6. Sistematika Penulisan 4
BAB II DASAR TEORI 6
2.1. HTTP 6
2.1.1.Sejarah HTTP 6
2.1.2.Fungsi dan Cara Kerja HTTP 6
2.2. HTML 7 2.2.1. HTML5 8 2.2.1.1. Tujuan HTML 5 8 2.2.1.2. Fitur HTML5 9 2.2.1.3. Kelebihan HTML 5 9 2.3. Protokol 9
2.3.1. Protokol Model OSI 10
vi
2.3.3. Layer pada TCP/IP 12
2.3.4. RealTime Transport Protokol 12
2.3.5. Real Time Streaming Protokol 13
2.4. Streaming 14
2.4.1.Video Coding 14
2.4.2. Modulasi 15
2.4.3.Arsitektur Streaming Video 16
2.4.4.Delay Error! Bookmark not defined.7
2.4.5.Jitter 18
2.4.6.Packet Loss 18
2.5. Kompresi Video 18
2.5.1. Pulse Code Modulation (PCM) 19
2.5.2. Discrete Cosine Transform (DCT) 20
2.6. MySQL 20
2.7. PHP 22
2.8. Java Media Framework (JMF) 22
2.9. Wireshark 23
BAB III PERANCANGAN SISTEM Error! Bookmark not defined.4
3.1. Gambaran Sistem Error! Bookmark not defined.4
3.2. Perancangan Database Error! Bookmark not defined.7
3.3. Desain Arsitektur Sistem 28
3.3.1.Database Server 29
3.3.2.Website dan Webserver 30
3.3.3.Perancangan Aplikasi Streaming Data Video 31
3.3.4.Perancangan Aplikasi Live Streaming Data Video 31
3.4. Penjelasan Sistem 32
3.5. Cara Kerja Sistem 35
3.5.1.Aplikasi Website Streaming Data Video 36
vii
3.5.2.1.Aplikasi Live Streaming Pada Sisi Server 38
3.5.2.2.Aplikasi Live Streaming Pada Sisi Client 40
BAB IV PENGUJIAN DAN ANALISIS 42
4.1. Spesifikasi Alat 42
4.2. Prosedur pengujian 43
4.2.1. Pengujian Kompatibilitas Aplikasi 43
4.2.2. Pengujian dengan Skenario 45
4.2.2.1.Spesifikasi Pengujian Skenario 45
4.2.2.2.Langkah-langkah Pengujian Skenario 46
4.2.3.Pengujian Capture Device 49
4.3. Hasil Pengujian 49
4.3.1. Hasil Pengujian Kompatibilitas 49
4.3.2. Hasil Pengujian Skenario 52
4.3.3.Hasil Pengujian Capture Device 65
BAB V KESIMPULAN DAN SARAN 66
5.1. Kesimpulan 66
5.2. Saran 66
viii
DAFTAR GAMBAR
Gambar 1.1. Bagan Sistem 2
Gambar 2.1. Arsitektur RTSP 13
Gambar 2.2. Arsitektur Streaming Video 16
Gambar 3.1. UseCase Pengguna 24
Gambar 3.2. Use Case Administrator 25
Gambar 3.3. Diagram Alir Aplikasi Website 26
Gambar 3.4. Perancangan Database Website 27
Gambar 3.5. Bagan Sistem Streaming 28
Gambar 3.6. Bagan Arsitektur Aplikasi Streaming Data Video 31
Gambar 3.7. Bagan Arsitektur Aplikasi Live Streaming Data Video 31
Gambar 3.8. Model Proses yang Terjadi di Transmitter 32
Gambar 3.9. Detail Proses yang Terjadi didalam Send Stream 33
Gambar 3.10. Model Proses yang Terjadi di Receiver 33
Gambar 3.11. Detail Proses yang Terjadi didalam Receive Stream 33
Gambar 3.12. Diagram Alir Aplikasi Streaming Data Video 36
Gambar 3.13. Diagram Alir Live Streaming Data Video 37
Gambar 3.14. Diagram Alir Aplikasi Live Streaming Data Video Sisi Server 38
Gambar 3.15. Diagram Alir Aplikasi Live Streaming Data Video Sisi Client 40
Gambar 4.1. Format Video dan Browser yang Support HTML5 45
Gambar 4.2. Player HTML 5 pada Web Browser Google Chrome 50
Gambar 4.3. Player HTML 5 pada Web Browser Mozilla Firefox 51
Gambar 4.4. Player HTML 5 pada Web Browser Internet Explorer 51
Gambar 4.5. Applet PlayerLive Streaming Data Video 52
Gambar 4.6. Website Tidak Dapat Diakses Melalui Browser 53
Gambar 4.7. Tampilan Add Data Video 53
Gambar 4.8. Tampilan Edit Data Video 54
ix
Gambar 4.10. Tampilan Halaman Home Pada Website Streaming Video 56
Gambar 4.11. Tampilan Menu Pada Aplikasi Website 56
Gambar 4.12. Tampilan Halaman Record Pada Aplikasi Website 57
Gambar 4.13. Tampilan Player Saat Client Memilih Salah Satu Kualitas 58
Gambar 4.14. Video High Quality 58
Gambar 4.15. Video Medium Quality 59
Gambar 4.16.Video Low Quality 59
Gambar 4.17. Tampilan Applet Player 60
Gambar 4.18. Permintaan Mengaktifkan Java Plugin Pada Web Browser 60
Gambar 4.19. Screenshot Software Wireshark 61
Gambar 4.20. Hasil Analisa Filter Telephony RTP Streams Yang Ditangkap 61
Gambar 4.21. Hasil Analisa Paket Data RTP Visual 62
Gambar 4.22. Hasil Analisa Paket Data RTP Audio 63
x
DAFTAR TABEL
Tabel 4.1. Identifikasi dan pelaksanaan pengujian kompatibiltas 44
Tabel 4.2. Identifikasi dan Pelaksanaan Pengujian Skenario 48
Tabel 4.3. Hasil Pengujian Kompabilitas 49
Tabel 4.4. Hasil Pengujian Delay Pada Aplikasi Website Live Streaming Data Video 64
Tabel 4.5. Hasil Pengujian Skenario 65
xi
DAFTAR KODE
Kode 3.1. Tampilan keseluruhan database 29
Kode 3.2. Fungsi Add Data 29
Kode 3.3. Fungsi Edit Data 30
Kode 3.4. Fungsi Delete Data 30
Kode 3.5. Fungsi Webcamera 39
Kode 3.6. Fungsi MediaLokator 39
Kode 3.7. Fungsi Pengiriman Data 39
Kode 3.8. Applet yang Digunakan. 40
xii
DAFTAR SINGKATAN
Singkatan Kepanjangan PC Personal Computer
RTP RealTime Transport Protocol
RTSP Real Time Streaming Protocol
RTCP Real Time Control Protocol
TCP Transmission Control Protocol
WAMP Windows Apache MySQL PHP
PHP Hypertext Preprocessor
PCM Pulse Code Modulation
DCT Discrete Cosine Transform
JMF Java Media Framework
HTML Hyper Text Markup Language
HTTP HyperText Transfer Protocol
WWW World Wide Web
IP Internet Protocol
LAN Local Area Network
SMTP Simple Mail Transfer Protocol
NNTP Network News Transfer Protocol
FTP File Transfer Protocol
WAIS Wide Area Information Servers
URL Uniform Resource Locator
SGML Standard Generalized Markup Language
W3C World Wide Web Consortium
WHATWG Web Hypertext Application Technology Working Group
SDP Session Description Protocol
UDP User Data Protocol
GPL General Public License
RDBMS Relational Database Management System
xiii QOS Quality Of Service
