BAB 4 RANCANGAN SISTEM YANG DIUSULKAN. Sistem yang penulis usulkan adalah sebuah sistem berbasis web yang berfungsi

Transkripsi

1 BAB 4 RANCANGAN SISTEM YANG DIUSULKAN 4.1 Gambaran umum sistem yang diusulkan Sistem yang penulis usulkan adalah sebuah sistem berbasis web yang berfungsi sebagai interface pengamatan dari output video kamera. Sistem ini juga membutuhkan dukungan perancangan topologi agar sistem CCTV terintegrasi dengan jaringan komputer pada SMPN 49. Sistem ini bertujuan untuk memperluas pengamatan admin (personel yang bersangkutan) sehingga output video tidak hanya dapat dilihat dari ruang kontrol tetapi juga dapat diakses dari setiap komputer client dalam jaringan dan juga melalui internet. 4.2 Pemodelan Aplikasi Web Berikut merupakan pemodelan dari detil-detil perancangan aplikasi web yang akan dikembangkan. Perancangan ini meliputi : 1. Perancangan Diagram Aliran Dokumen 2. Perancangan State Transition Diagram 3. Perancangan Layar Tampilan Web Perancangan Diagram Aliran Dokumen Pada perancangan Diagram Aliran Dokumen ini digambarkan mengenai diagram alur akan berjalannya sistem dari kondisi awal hingga kondisi akhir atau 96

2 97 final. Diagram Aliran Dokumen merupakan penjabaran lebih lanjut berdasarkan perancangan-perancangan yang telah dilakukan sebelumnya. Pada saat memulai sistem ini, user akan dihadapkan dengan proses login, kemudian proses pengecekan validasi akan membandingkan data yang di input user dengan data yang sudah ada pada database. Apabila username dan password tidak sesuai, proses validasi akan mengembalikan user ke halaman login dan apabila sesuai maka akan membuka halaman home web aplikasi. Kemudian untuk melihat output CCTV, user dapat melihatnya di halaman view, dimana outputnya merupakan data yang diambil dari hasil encoding live streaming yang berada pada server. Gambar 4.1 DAD Proses View Camera

3 98 START LOGIN PENGECEKAN VALIDASI DATABASE tidak HASIL ya HALAMAN HOME WEB APLIKASI SUBMIT FORM ADD USER PENGECEKAN DATA USERNAME & PASSWORD HASIL tidak ya END LOGOUT ADD USERNAME & PASSWORD Gambar 4.2 DAD Proses Add User Untuk menambah user, penulis merancang form add user yang posisinya berada di depan proses login, dengan tujuan agar hanya user yang sudah terdaftar yang dapat menambah account pada web aplikasi, karena sistem aplikasi CCTV berbasis web ini hanya ditujukan terbatas untuk pihak-pihak yang berkepentingan saja. User memulai dengan melakukan proses login, kemudian proses pengecekan validasi akan membandingkan data yang di input user dengan data yang sudah ada pada database. Apabila username dan password tidak sesuai,

4 99 proses validasi akan mengembalikan user ke halaman login, dan apabila sesuai akan membuka halaman home web aplikasi. Dari halaman home user menuju halaman add user, dan user akan menginput data berupa username dan password yang akan ditambah. Yang kemudian akan dilakukan proses pengecekan data username dan password bertujuan untuk mencegah keseragaman username. Apabila gagal, akan mengembalikan user ke halaman add user, apabila berhasil data yang baru akan dimasukkan ke dalam database Perancangan State Transition Diagram Pada perancangan State Transition Diagram, digambarkan mengenai peta navigasi yang dapat diakses oleh pengguna sistem. Halaman dari web yang diusulkan terdiri dari 4 halaman, yang pertama adalah halaman login yang bertujuan untuk verifikasi dan validasi user. Halaman kedua merupakan halaman Home. Halaman ketiga adalah halaman View untuk melihat CCTV. Halaman keempat adalah halaman Add User.

5 100 Gambar 4.3 State Transition Diagram Login VIEW Tampilkan view Klik view camera Tampilkan home Klik home Tampilkan add user Klik add user Tampilkan login Klik logout VIEW CAMERA Home Add User Logout Gambar 4.4 State Transition Diagram View

6 101 Gambar 4.5 State Transition Diagram Add User Perancangan Layar Aplikasi Web Pada sistem aplikasi CCTV berbasis web, penulis membangun suatu halaman web menggunakan bahasa pemrograman PHP. Seperti yang dicantumkan pada State Transition Diagram, terdapat empat buah halaman, yang pertama adalah halaman login, yang kedua adalah halaman home, yang ketiga adalah halaman View dan yang terakhir adalah halaman Add User. Halaman login berfungsi untuk verifikasi user, kemudian halaman home berisi tentang quick-tutorial penggunaan web aplikasi ini.

7 102 Incorrect username or password! Gambar 4.6 Rancangan layar login Gambar 4.7 Rancangan layar halaman Home

8 103 Pada Halaman View, terdapat 4 buah output kamera. Setiap output dapat memilih kamera dengan menentukannya di dalam list-box. Setelah mentukan pilihan maka untuk melihat output kamera yang sudah dipilih adalah dengan menekan tombol View Camera. Pada halaman Add User, terdapat tiga field yang harus user input yaitu field username, password dan confirm password. Gambar 4.8 Rancangan layar halaman View

9 104 Gambar 4.9 Rancangan layar halaman Add User 4.3 Instalasi Sistem yang diusulkan Instalasi Perangkat Keras Instalasi perangkat keras dalam sistem yang penulis sarankan meliputi instalasi video kamera, dan cara menghubungkannya ke input DVR. Berikut langkah langkah membuat video kamera yang tersambung langsung dengan PCI card computer CCTV DVR dengan menggunakan video kamera dome : 1. Pada video kamera tipe dome ini terdapat 2 jenis kabel. Kabel yang pertama adalah BNC connector dan yang kedua adalah power connector.

10 105 Gambar 4.10 Kabel Coaxial Gambar 4.11 BNC connector 2. Sambungkan kabel BNC connector ke port BNC yang terdapat pada PCI card CCTV DVR.

11 106 Gambar 4.12 Kabel terhubung ke PCI card 3. Berikutnya sambungkan power adapter ke kabel power connector yang terdapat pada video kamera. Gambar 4.13 Power connector

12 Jika semua tahap diatas telah dilakukan, maka CCTV siap digunakan. Gambar 4.14 Kamera terinstal Pemilihan Perangkat Lunak Yang Akan Digunakan Sebelum implementasi dilaksanakan, telah dilakukan perbandingan untuk menguji fleksibilitas dari sistem yang akan digunakan. Kedua sistem tersebut meliputi : 1. Windows Media Services sebagai streaming server, yang menggunakan Windows Media Encoder sebagai encoder dan Windows Media Player sebagai player untuk menerima streaming. 2. Flash Media Server sebagai streaming server, yang menggunakan Flash Media Encoder sebagai encoder dan Flash Media Player sebagai player untuk menerima streaming.

13 Helix Media Server sebagai streaming server, yang menggunakan Real Producer sebagai encoder dan Real Media Player sebagai player untuk menerima streaming. Tabel 4.1 membandingkan sistem operasi yang dapat mendukung sistem untuk diimplementasikan. Dapat terlihat bahwa Windows Media Services hanya dapat didukung oleh sistem operasi Windows, sedangkan Flash Media Server dan Helix Media Server dapat didukung oleh berbagai sistem operasi. Nama Sistem Windows Media Services Helix Media Server (Real) Flash Media Server Windows Mac OS X Terdukung Tidak Terdukung Linux BSD Unix Solaris Unix Lainnya Tidak Tidak Tidak Tidak Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Terdukung Tabel 4.1 Perbandingan Sistem Operasi Untuk Menjalankan Streaming Server Tabel 4.2 membandingkan web browser yang dapat diembed oleh player yang diperlukan untuk menerima streaming dari streaming server. Dapat terlihat bahwa Flash Media Player mempunyai fleksibilitas web browser yang lebih baik dibandingkan dengan Windows Media Player dan Real Media Player.

14 109 Nama Player Windows Media Player Real Media Player Flash Media Player Internet Explorer Dapat diembed Dapat diembed Dapat diembed Mozilla Firefox Diperlukan pengaturan tertentu* Tidak dapat diembed Dapat diembed Opera Safari Google Chrome Tidak Tidak Tidak dapat dapat dapat diembed diembed diembed Tidak dapat diembed Dapat diembed Tidak dapat diembed Dapat diembed Tidak dapat diembed Dapat diembed Tabel 4.2 Perbandingan Browser Yang Dapat Diembed Dengan Player Tabel 4.3 membandingkan device yang dapat menjalankan player yang diperlukan untuk menerima streaming. Dapat terlihat bahwa Flash Media Player memiliki fleksibilitas device yang lebih banyak dibandingkan Windows Media Player. Nama Player Windows Media Player Real Media Player Flash Media Player PC Laptop UMPC Handphone / PDA Phone Ya* Ya* Ya* Tidak Ya** Ya** Ya** Tidak Ya Ya Ya Ya** Tabel 4.3 Device Yang Dapat Menjalankan Streaming * Terbatas pada Internet Explorer dan sistem operasi berbasis Windows **Terbatas pada Internet Explorer

15 110 Tabel 4.4 membandingkan besarnya ukuran player untuk menerima streaming, dan juga membandingkan persentase jumlah pemakai secara keseluruhan berdasarkan pada server log LongTail Video yang tercatat pada bulan Juli Dapat dilihat bahwa Flash Media Player lebih mencakup keseluruhan pemakai, serta lebih memiliki ukuran player yang lebih kecil daripada Windows Media Player dan Real Player. Nama Player Persentase Pemakai Ukuran Player Windows Media Player 79 % 7 MB Real Media Player 60% 10 MB Flash Media Player 96 % 2 MB Tabel 4.4 Persentase Pemakaian Player* *) berdasarkan server log LongTail Video yang tercatat pada bulan Juli 2008 Pada tabel di bawah, ditemukan juga bahwa DRM milik Flash Media lebih sederhana dan fleksibel, mengingat enkripsi dilakukan secara on-the-fly atau dilakukan saat streaming sedang berlangsung, tidak seperti Windows Media dan Helix Media yang mengimplementasikan dan memasukkan enkripsi sebagai bagian dalam file.

16 111 Nama Sistem DRM tersedia Keterangan Windows Media Ya Enkripsi dilakukan dengan menambah bit enkripsi di dalam file source Helix Media Ya Enkripsi dilakukan dengan menambah bit enkripsi di dalam file source Flash Media Ya Enkripsi dilakukan secara on-the-fly (ketika proses streaming sedang berlangsung) Tabel 4.5 Perbandingan DRM yang Tersedia Berdasarkan lima perbandingan di atas, ditemukan hasil perbandingan yakni Flash Media Server dan Helix Media Server dapat beroperasi pada sistem operasi yang lebih banyak dibanding Windows Media Services. Namun, hanya Flash Media Player yang dapat diakses dengan menggunakan lebih banyak web browser jika dibandingkan dengan Windows Media Player dan Real Media Player, serta kompatibel pada berbagai device (dalam hal ini Handphone dan PDA Phone). Oleh karena itu, sistem yang akan diimplementasikan adalah Adobe Flash Media Server sebagai streaming server, Adobe Flash Media Encoder sebagai encoder dan Adobe Flash Media Player sebagai player pada sistem aplikasi CCTV berbasis web untuk menghasilkan akses yang fleksibel.

17 Instalasi dan Konfigurasi Perangkat Lunak Sistem yang diusulkan oleh penulis membutuhkan perangkat lunak dukungan di luar web page yang dirancang. Perangkat-perangkat lunak tersebut antara lain adalah : Adobe Flash Media Live Encoder 3 Adobe Flash Media server Adobe Flash CS4 XAMPP Instalasi dan konfigurasi Adobe Flash Media Live Encoder 3 1. Jalankan file installer FME 3, dan tekan tombol Next untuk memulai konfigurasi instalasi. 2. Pada halaman selanjutnya user akan diminta persetujuan Software License Agreement, tekan pilihan yang pertama dan tekan tombol Next. Pada halaman selanjutnya user akan diminta menentukan Destination Folder. Klik Next untuk melanjutkan instalasi. 3. Halaman berikutnya adalah page penentuan instalasi. User dapat kembali ke halaman sebelumnya dengan menekan tombol Back. Tekan tombol Install untuk memulai proses instalasi. 4. Halaman ini adalah proses instalasi. User diminta untuk menunggu hingga proses ini selesai.

18 Jika proses diatas sudah selesai maka proses instalasi sudah berakhir. Tekan finish untuk keluar dari halaman ini. Gambar 4.15 Tampilan Adobe Flash Media Encoder 1. Tampilan Input 2. Tampilan Output 3. Encoding Options untuk Video 4. Encoding Options untuk Audio 5. Tempat untuk menginput tujuan server streaming 6. Tempat untuk menentukan lokasi penyimpanan file yang telah diencode Encoding Options untuk Video

19 114 Gambar 4.16 Tampilan Video Encoding Option Konfigurasi untuk melakukan stream ke Flash Streaming Server Gambar 4.17 Tampilan Encoding Option Untuk Streaming Server 1. Pada URL, input dengan alamat streaming server yang dituju. Jika streaming server terletak pada satu device yang sama, input dengan localhost. 2. Pada input Stream, beri nama sesuai dengan alamat yang akan dipakai untuk pengalamatan user untuk melakukan streaming video.

20 115 Konfigurasi untuk Menyimpan Hasil Encoding Gambar 4.18 Menentukan Letak Penyimpanan File Instalasi Adobe Flash Media Server Jalankan file installer Flash Media Server 3 dan tekan tombol Next untuk memulai konfigurasi instalasi. 2. Pada halaman selanjutnya user akan diminta persetujuan License Agreement, tekan pilihan yang pertama dan tekan tombol Next 3. Pada halaman selanjutnya user akan diminta memasukkan serial number yang tercantum di Cover CD instalasi atau yang ada di kotak CD. 4. Halaman berikutnya adalah page penentuan instalasi. User dapat kembali ke halaman sebelumnya dengan menekan tombol Back. Tekan tombol Install untuk memulai proses instalasi. 5. Pada halaman selanjutnya user akan diminta menentukan Destination Location. Klik Next untuk melanjutkan instalasi. 6. Pada halaman ini user akan diminta menentukan letak Start Menu Shortcuts untuk peletakan program ini pada start menu. 7. Pada halaman ini user akan diminta mengisi 3 field yaitu Administrator username, Administrator password dan confirm password. User bisa mengisinya sesuai keinginan. Sesuai dengan

21 116 gambar dibawah, field username dan password diisi dengan admin. Klik Next jika user sudah selesai memasukkan input ketiga field tersebut. Gambar 4.19 Halaman Administration Services Instalasi Adobe FMS 3 8. Pada halaman ini user diminta memasukkan port yang dibutuhkan untuk proses listening server. User akan diminta Server Port dan Administration Server Ports. Nilai default port akan tertulis di halaman ini sesuai dengan port yang tersedia. Klik Next untuk melanjutkan proses instalasi.

22 117 Gambar 4.20 Halaman Configuration Ports Instalasi Adobe FMS 3 9. Pada halaman ini adalah halaman pengecekan konfigurasi instalasi yang sebelumnya telah dilakukan, user dapat kembali merubah konfigurasi dengan menekan tombol back. Klik Next untuk memulai proses instalasi.

23 118 Gambar 4.21 Halaman Install Adobe FMS Halaman berikutnya adalah halaman proses instalasi. User diminta untuk menunggu sampai hasil instalasi selesai. 11. Jika proses diatas sudah selesai maka proses instalasi sudah berakhir. Tekan finish untuk keluar dari halaman ini Langkah langkah instalasi XAMPP Jalankan file installer xampp-win exe dan user dapat memilih bahasa yang diinginkan. Tekan tombol OK untuk memulai instalasi.

24 Klik next untuk memulai konfigurasi instalasi. 3. Pada halaman berikutnya user akan diminta untuk menentukan lokasi dimana program akan diinstal. Klik next untuk melanjutkan instalasi. 4. Pada halaman ini user akan diminta untuk memilih jenis service yang diberikan. Klik install untuk memulai proses instalasi. Gambar 4.22 Halaman Sevice Pakcage Instalasi XAMPP 5. Halaman ini adalah halaman proses instalasi. User diminta untuk menunggu sampai proses ini selesai. 6. Jika proses diatas sudah selesai maka proses instalasi sudah berakhir. Tekan finish untuk keluar dari halaman ini.

25 Langkah langkah instalasi Adobe Flash CS4 1. Halaman awal instalasi adalah halaman destinasion folder dimana user dapat memilih lokasi untuk Adobe Flash CS4. Klik next untuk melanjutkan. Gambar 4.23 Halaman Destination Folder Instalasi Adobe Flash CS4 2. Halaman berikutnya adalah proses persiapan instalasi Adobe CS4. Pada Halaman ini user diminta untuk menunggu sampai prosesnya selesai. 3. Pada halaman berikutnya merupakan halaman awal instalasi dimana user akan diminta untuk memasukkan serial number produk Adobe CS4 yang dimiliki ataupun dapat juga memilih trial version. Kemudian klik next untuk melanjutkan.

26 Pada halaman berikutnya adalah halaman persetujuan atas syaratsyarat dan ketentuan yang berlaku untuk user dalam memiliki produk. Tekan accept untuk melanjutkan. 5. Pada halaman berikut ini merupakan halaman opsi instalasi. User dapat memilih bahasa, dan fitur-fitur dukungan pada Adobe Flash CS4. 6. Pada halaman berikutnya, user akan diminta untuk menunggu sampai proses instalasi selesai. 7. Instalasi Adobe Flash CS4 sukses. 4.4 Topologi jaringan CCTV yang terintegrasi Pada sistem CCTV yang sedang berjalan, LCD terhubung dengan DVR menggunakan interface VGA yang di-convert melalui DIV-VGA converter. Sedangkan pada sistem yang diusulkan, DVR terhubung ke dalam jaringan melalui port LAN menuju switch dengan menggunakan interface kabel UTP. Gambar 4.24 port LAN pada DVR

27 122 Pada gedung A, terdapat 16 buah video kamera yang terhubung pada sebuah DVR 16 port yang akan kemudian di hubungkan ke dalam jaringan melalui port switch yang tersedia, dan yang terdekat dari lokasi DVR. Sama halnya pada gedung B, DVR 4 port akan dihubungkan ke switch yang tersedia pada gedung B. Gambar 4.25 Jaringan CCTV yang disarankan

28 Proses Live Video Streaming Setelah melakukan instalasi diatas, maka langkah selanjutnya adalah capturing video, membuat tampilan video dan menampilkannya ke dalam web. Langkah langkah yang perlu dilakukan adalah: 1. Jalankan Adobe Flash Media Live Encoder 3. Gambar 4.26 Flash Media Live Encoder interface Tampilan video di kiri adalah tampilan adalah Input dan tampilan video di kanan adalah Output.

29 Tentukan alat yang digunakan sebagai input gambar video pada Device popup menu. Gambar 4.27 Video kamera yang terhubung ke komputer 3. Di Format pop-up menu, pilih VP6. Ini akan digunakan sebagai codec untuk kompresi hasil file FLV. 4. Pada pop-up menu Bit Rate dapat dipilih sesuai dengan kecepatan koneksi yang ada. Semakin tinggi Bit Rate yang di berikan maka semakin tinggi total bandwith yang digunakan untuk proses streaming. Dalam hal ini penulis memilih 200 Kbps. 5. Pada area interface Output, pastikan Stream to Flash Media Server sudah terpilih. Lalu isilah alamat dari field Flash Media Server URL dengan alamat server yang digunakan, dalam hal ini rtmp://localhost/live. Kemudian isi field Stream menjadi livestream. Untuk mencoba tersambungnya koneksi ke server bisa dilakukan dengan menekan tombol Connect.

30 125 Gambar 4.28 Konfigurasi Output untuk live broadcast 6. Buka Adobe Flash CS 4 Professional dan pada kolom Create New pilih Flash File (Action Script 3.0) dengan dimensi 640 x 480 pixels. 7. Untuk membuat tampilan video dalam bentuk flash didalam web, maka langkah selanjutnya adalah membuat tampilan video itu sendiri. Tekan Window pada pilihan menu Adobe Flash CS 4 Professional, lalu tekan Components dan akan muncul window baru yang berisi 2 pilihan komponen. Pilih komponen Video dan klik dua kali pada pilihan FLVPlayback untuk memasukkan tampilan video kedalam flash.