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
July 2013
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
Pembimbing II
Hartanto Kusuma Wardana, M.T
Saptadi Nugroho, S.T, M.Sc
Tgl ..............................
Tgl ..............................
3
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.
Kata Kunci : Internet, Streaming, Live Streaming, Web Browser, Buffering
i
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.
Keywords : Internet, Streaming, Live Streaming, Web Browser, Buffering
ii
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.
iii
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
Penulis
iv
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
2.3.1. TCP/IP
11 v
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
3.5.2.Aplikasi Website Live Streaming Data Video
37
vi
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
DAFTAR PUSTAKA
67
vii
DAFTAR GAMBAR
Gambar 1.1. Bagan Sistem
2
Gambar 2.1. Arsitektur RTSP
13
Gambar 2.2. Arsitektur Streaming Video
16
Gambar 3.1. Use Case 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 Player Live 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
Gambar 4.9. Tampilan Delete Data Video
55
viii
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
Gambar 4.23. Grafik Delay Live Streaming
64
ix
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
Tabel 4.6. Hasil Pengujian Capture Device
65
x
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
Kode 3.9. Pembuatan Class StreamingApplet
41
xi
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
NT
Named Pipes xii
QOS
Quality Of Service
xiii
