PERANCANGAN STREAMING VIDEO BERDASARKAN KECEPATAN BANDWIDTH USER. Oleh Eric Setiawan NIM :

Transkripsi

1 PERANCANGAN STREAMING VIDEO BERDASARKAN KECEPATAN BANDWIDTH USER Oleh Eric Setiawan NIM : 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

2

3 PERANCANGAN STREAMING VIDEO BERDASARKAN KECEPATAN BANDWIDTH USER Oleh Eric Setiawan NIM : 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 Tgl... Saptadi Nugroho, S.T, M.Sc Tgl...

4 3

5 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

6 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

7 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

8 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

9 DAFTAR ISI INTISARI ABSTRACT KATA PENGANTAR DAFTAR ISI DAFTAR GAMBAR DAFTAR TABEL DAFTAR KODE DAFTAR SINGKATAN Error! Bookmark not defined. ii ierror! Bookmark not defined. v viii x xi xii BAB I PENDAHULUAN Error! Bookmark not defined Tujuan Error! Bookmark not defined Latar Belakang Masalah Error! Bookmark not defined Gambaran Sistem Batasan Masalah Perincian Tugas Sistematika Penulisan 4 BAB II DASAR TEORI HTTP Sejarah HTTP Fungsi dan Cara Kerja HTTP HTML HTML Tujuan HTML Fitur HTML Kelebihan HTML Protokol Protokol Model OSI TCP/IP 11 v

10 Layer pada TCP/IP RealTime Transport Protokol Real Time Streaming Protokol Streaming Video Coding Modulasi Arsitektur Streaming Video Delay Error! Bookmark not defined Jitter Packet Loss Kompresi Video Pulse Code Modulation (PCM) Discrete Cosine Transform (DCT) MySQL PHP Java Media Framework (JMF) Wireshark 23 BAB III PERANCANGAN SISTEM Error! Bookmark not defined Gambaran Sistem Error! Bookmark not defined Perancangan Database Error! Bookmark not defined Desain Arsitektur Sistem Database Server Website dan Webserver Perancangan Aplikasi Streaming Data Video Perancangan Aplikasi Live Streaming Data Video Penjelasan Sistem Cara Kerja Sistem Aplikasi Website Streaming Data Video Aplikasi Website Live Streaming Data Video 37 vi

11 Aplikasi Live Streaming Pada Sisi Server Aplikasi Live Streaming Pada Sisi Client 40 BAB IV PENGUJIAN DAN ANALISIS Spesifikasi Alat Prosedur pengujian Pengujian Kompatibilitas Aplikasi Pengujian dengan Skenario Spesifikasi Pengujian Skenario Langkah-langkah Pengujian Skenario Pengujian Capture Device Hasil Pengujian Hasil Pengujian Kompatibilitas Hasil Pengujian Skenario Hasil Pengujian Capture Device 65 BAB V KESIMPULAN DAN SARAN Kesimpulan Saran 66 DAFTAR PUSTAKA 67 vii

12 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 Model Proses yang Terjadi di Receiver 33 Gambar Detail Proses yang Terjadi didalam Receive Stream 33 Gambar Diagram Alir Aplikasi Streaming Data Video 36 Gambar Diagram Alir Live Streaming Data Video 37 Gambar Diagram Alir Aplikasi Live Streaming Data Video Sisi Server 38 Gambar 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

13 Gambar Tampilan Halaman Home Pada Website Streaming Video 56 Gambar Tampilan Menu Pada Aplikasi Website 56 Gambar Tampilan Halaman Record Pada Aplikasi Website 57 Gambar Tampilan Player Saat Client Memilih Salah Satu Kualitas 58 Gambar Video High Quality 58 Gambar Video Medium Quality 59 Gambar Video Low Quality 59 Gambar Tampilan Applet Player 60 Gambar Permintaan Mengaktifkan Java Plugin Pada Web Browser 60 Gambar Screenshot Software Wireshark 61 Gambar Hasil Analisa Filter Telephony RTP Streams Yang Ditangkap 61 Gambar Hasil Analisa Paket Data RTP Visual 62 Gambar Hasil Analisa Paket Data RTP Audio 63 Gambar Grafik Delay Live Streaming 64 ix

14 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

15 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

16 DAFTAR SINGKATAN Singkatan PC RTP RTSP RTCP TCP WAMP PHP PCM DCT JMF HTML HTTP WWW IP LAN SMTP NNTP FTP WAIS URL SGML W3C WHATWG SDP UDP GPL RDBMS NT Kepanjangan Personal Computer RealTime Transport Protocol Real Time Streaming Protocol Real Time Control Protocol Transmission Control Protocol Windows Apache MySQL PHP Hypertext Preprocessor Pulse Code Modulation Discrete Cosine Transform Java Media Framework Hyper Text Markup Language HyperText Transfer Protocol World Wide Web Internet Protocol Local Area Network Simple Mail Transfer Protocol Network News Transfer Protocol File Transfer Protocol Wide Area Information Servers Uniform Resource Locator Standard Generalized Markup Language World Wide Web Consortium Web Hypertext Application Technology Working Group Session Description Protocol User Data Protocol General Public License Relational Database Management System Named Pipes xii

17 QOS Quality Of Service xiii