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

Hartanto Kusuma Wardana, M.T

Tgl ..............................

Pembimbing II

Saptadi Nugroho, S.T, M.Sc

Tgl ..............................

3

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.

Kata Kunci : Internet, Streaming, Live Streaming, Web Browser, Buffering

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.

Keywords : Internet, Streaming, Live Streaming, Web Browser, Buffering

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

Penulis

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

2.3.1. TCP/IP 11

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

3.5.2.Aplikasi Website Live Streaming Data Video 37

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

DAFTAR PUSTAKA 67

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

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

Gambar 4.23. Grafik Delay Live Streaming 64

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

Tabel 4.6. Hasil Pengujian Capture Device 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

Kode 3.9. Pembuatan Class StreamingApplet 41

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

NT Named Pipes

xiii

QOS Quality Of Service