Perancangan Database Penjelasan Sistem

27

3.2. Perancangan Database

Database yang digunakan pada aplikasi website adalah MySQL. Data yang tersimpan pada database MySQL adalah video-video yang nantinya menjadi Streaming data video. Perancangan database ditunjukkan pada Gambar 3.3. Gambar 3.4. Perancangan Database Website. Di dalam database website terdapat delapan buah kolom. Kolom id berisi id dari video, kolom nama_file berisi judul dari video, kolom lokasi_file_hq , lokasi_file_mq , dan lokasi_file_lq berisi lokasi file disimpan, kolom deskripsi berisi keterangan dari video, kolom tgl_upload berisi tanggal video di- upload dan kolom image berisi gambar-gambar untuk thumbnail video. 28

3.3. Desain Arsitektur Sistem

Gambar 3.5. Bagan Sistem Streaming. Gambar 3.5. menunjukkan bagan sistem streaming. Ada 4 bagian penting dengan penjelasan sebagai berikut: 1. Database Server Pada database server terdapat file-file video yang dapat diakses client melalui aplikasi website. File video tersebut diakses dengan cara melakukan streaming melalui jaringan Local Area Network dan juga WiFi . 2. Website dan Webserver Disini Website berfungsi untuk menampilkan User Interface yang berisi konten- konten dan berita yang akan memudahkan user dalam mengunakan aplikasi. Sedangkan Webserver berfungsi untuk menjembatani Data – data serta tampilan User Interface dari komputer server ke komputer client, webserver juga bertugas untuk menerima permintaan dari user dan kemudian permintaan tersebut diolah dan dikirimkan hasilnya kembali ke client user. 3. Aplikasi data video streaming Didalam aplikasi ini terdapat layanan pemutar video dengan video player berbasis HTML5, dimana user dapat memilih dua kualitas video yang memiliki perbedaan 29 resolusi gambar, hal ini bertujuan untuk mengatasi permasalahan bandwidth pada user. 4. Aplikasi live streaming video Aplikasi ini menyediakan layanan pemutar live streaming video secara langsung melalui protocol RTP, data hasil capture dikompresi dan data mentahRAW dikirim langsung dan nantinya dapat langsung dilihat oleh user melalui aplikasi website yang dilengkapi dengan applet player sebagai pemutar live stream video.

3.3.1. Database Server

Database Server berfungsi untuk menyimpan file video yang digunakan untuk streaming data video. Didalam database server terdapat tiga buah fungsi yaitu add data, edit data, dan juga delete data. Kode dari menu utama database, add data, edit data,dan delete data menggunakan fungsi PHP yang dilengkapi dengan SQLScript sebagai pengatur koneksi pengubahan data dalam database lokal. Kode 3.1. menunjukan script untuk menampilkan keseluruhan database sedangkan Kode 3.2. hingga Kode 3.4. menunjukan script untuk melakukan add data, edit data, dan delete data. Kode 3.1. Tampilan keseluruhan database. Kode 3.2. Fungsi Add Data. sql1=insert into tb_video id, nama_file, lokasi_file_hq, lokasi_file_mq, lokasi_file_lq, deskripsi, tgl_upload, image values Unique,getNamaVideo,lokasiFileH,lokasiFileM,loka siFileL,getDeskripsi,getTanggalUpload,newImageName; deleterequest = mysql_queryDELETE FROM tb_video WHERE id = IDSor dieGagal :.mysql_error; Query = SELECT id, nama_file, lokasi_file_hq, lokasi_file_mq, lokasi_file_lq, deskripsi, tgl_upload, image FROM tb_video ORDER BY id DESC LIMIT .offset.,.dataPerPage.;; 30 Kode 3.3. Fungsi Edit Data. Kode 3.4. Fungsi Delete Data.

3.3.2. Website dan Webserver

Website dibangun menggunakan script Personal Home Page PHP, CSS Cascading Style Sheets , javascript dengan HTML5 sebagai multimedia player, PHPScript berguna untuk mengatur koneksi data multimedia serta informasi dari database, CSS berguna untuk mengatur layout dari tampilan user interface website, sedangkan javascript berguna untuk aplikasi website pemutar video. Webserver yang digunakan adalah WAMP yang menyediakan database MySQL. deleterequest = mysql_queryDELETE FROM tb_video WHERE id = IDSor dieGagal :.mysql_error; editrequest = mysql_queryUPDATE tb_video SET nama_file=.getNamaVideo., lokasi_file_hq=.lokasiFileH., lokasi_file_mq=.lokasiFileM., lokasi_file_lq=.lokasiFileL., deskripsi=.getDeskripsi., tgl_upload=.getTGL., image=.newImageName. WHERE id=.getIDS.;; 31

3.3.3. Perancangan Aplikasi Streaming Data Video

Gambar 3.6. Bagan Arsitektur Aplikasi Streaming Data Video. Gambar 3.6 menjelaskan arsitektur aplikasi website dimana aplikasi ini dibuat menggunakan PHPscript, HTML5 serta dilengkapi oleh javascript. Disini HTML5 berfungsi untuk mengatur User Interface website yang dibantu dengan CSS sebagai latar layoutnya, HTML5 juga memiliki fungsi untuk mengatur player serta kualitas video dengan dua kualitas video yang berbeda. Pada website tersedia dua kualitas video yaitu Low 240 x 360 pixel, Medium 360 x 480 pixel dan High 480 x 720 pixel, untuk mengkoneksikan kualitas video akan menggunakan javascript, sedangkan WAMP sebagai webserver serta database MySQL yang bertugas menyimpan file – file video, serta informasi video tersebut.

3.3.4. Perancangan Aplikasi Live Streaming Data Video

Gambar 3.7. Bagan Arsitektur Aplikasi Live Streaming Data Video. Gambar 3.7. merupakan arsitektur live streaming video, aplikasi ini dibuat menggunakan IDE Eclipse Galileo berbasis Java, Aplikasi ini menggunakan library fobs4jmf 32 dan jmf library, yang merupakan bagian dari Java Media Framework JMF untuk membantu proses pengambilan, kompresi, serta pengiriman data media multimedia. Dengan bantuan jmf library, webcamera digunakan sebagai media locator live streaming video, masukkan gambar diterima webcamera dan di-capture dengan frame rate sebesar 15 frame per second. Data yang dicapture lalu dikirim dengan bantuan protocol RTP, data akan dikirim dalam bentuk RAW yang nantinya akan diterima oleh komputer client. Disisi client, user dapat menerima kiriman data RAW yang ditampilkan di browser yang sudah dilengkapi oleh applet plugin sebagai player video RTP.

3.4. Penjelasan Sistem

Gambaran sistem perangkat lunak memberikan gambaran umum mengenai proses- proses yang terjadi dalam perangkat lunak beserta detail bagaimana proses-proses tersebut dijalankan. Gambaran sistem juga memberikan gambaran tentang aliran data yang terjadi antar proses-proses yang ada maupun antar proses dengan entitas luar. Aliran data tersebut akan mendefinisikan masukan dan keluaran yang terdapat pada masing-masing proses yang terjadi, sehingga hubungan antar proses dapat terlihat dengan jelas. Proses video streaming dapat dilihat pada Gambar 3.8 sampai Gambar 3.11. Gambar 3.8 merupakan gambaran umum proses video streaming yang terjadi pada sisi transmitter. Gambar 3.9 merupakan rancangan model enkripsi video yang diterapkan pada saat video akan dikirim ke receiver, dimana proses enkripsi video diletakkan di bagian send stream. Bagian yang diberi warna abu-abu merupakan bagian proses enkripsi yang ditambahkan pada model video streaming. Gambar 3.10 merupakan gambaran proses video streaming di sisi receiver, sedangkan Gambar 3.11 merupakan penerapan dekripsi video pada sisi receiver- nya. Bagian yang diberi warna abu-abu merupakan bagian proses dekripsi yang ditambahkan pada model video streaming. Gambar 3.8. Model Proses yang terjadi di Transmitter 33 Gambar 3.9. Detail Proses yang Terjadi didalam Send Stream Gambar 3.10. Model proses yang terjadi di Receiver Gambar 3.11. Detail proses yang terjadi di dalam Receive Stream 34 Penjelasan proses yang terjadi di Transmitter :  File Video File video yang akan dikirimkan melalui streaming.  Media Locator Menemukan lokasi file dari string yang diberikan oleh user. Contoh string : “file:c:datamovie.mpg”.  Processor Membaca file dari media locator, dan menyiapkan file tersebut agar dapat dikirim oleh Send Stream.  Data Source Representasi file video yang siap dikirimkan oleh Send Stream. Yang dimaksud dengan representasi yang siap dikirim adalah format file yang sudah RTP compliant. Misalnya frame MPEG harus diubah menjadi format MPEG_RTP agar dapat dikirim dan dibaca oleh pihak penerima receiver. Proses pengubahan dilakukan oleh processor, menggunakan codec-codec yg sesuai.  RTP Manager Menginisialisasi koneksi menentukan port mana yg dibuka, IP address dan port yang menjadi tujuan pengiriman file, dan menciptakan Send Stream objek.  Send Stream Membaca data source objek, dan mengirimkan frame-frame video, termasuk mengatur penggunaan buffer untuk mengirimkan frame-frame tersebut.  RTP Socket Adapter Mengambil frame per frame dari data source, frame ini akan dikirimkan ke encryptor untuk dienkripsi .  Encryptor Mengenkripsi frame-frame dengan menggunakan algoritma DES. Encryptor akan menyimpan hasil enskripsi di OutputStreamBuffer.  OutputStreamBuffer Mengirimkan semua data yg tersimpan di dalam buffer-nya . 35 Penjelasan proses yang terjadi di Receive :  RTP Manager Menciptakan Receive Stream.  Receive Stream Menerima RTP stream, mendeskripsi, dan mengubah format RTP menjadi format video yang dapat dimainkan oleh Player.  Input Stream Buffer Menerima RTP Stream, mengatur penggunaan buffer untuk proses penerimaan, dan mengirimkan data yang diterima ke Decryptor.  Descryptor Mendeskripsi data yang didapat.  RTP Socket Adaptor Mengubah format RTP menjadi format video yg dapat dikenali oleh player Misalnya dari MPEG_RTP menjadi MPEG.  Player Menerima format video yang dapat dimainkan.  Output Device Video ditampilkan pada layar monitor.

3.5. Cara Kerja Sistem