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
4.2.1
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
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
98
START
PENGECEKAN VALIDASI
LOGIN
HASIL
tidak
DATABASE
ya
PENGECEKAN DATA USERNAME & PASSWORD
SUBMIT FORM ADD USER
HALAMAN HOME WEB APLIKASI
HASIL
tidak
END
ya
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,
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.
4.2.2
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.
100
Gambar 4.3 State Transition Diagram Login
VIEW
Tampilkan view
Klik view camera
VIEW CAMERA
Tampilkan home
Klik home
Home
Tampilkan add user
Klik add user
Add User
Gambar 4.4 State Transition Diagram View
Tampilkan login
Klik logout
Logout
101
Gambar 4.5 State Transition Diagram Add User
4.2.3
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.
102
Incorrect username or password!
Gambar 4.6 Rancangan layar login
Gambar 4.7 Rancangan layar halaman Home
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
104
Gambar 4.9 Rancangan layar halaman Add User
4.3
Instalasi Sistem yang diusulkan 4.3.1
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.
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.
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
107
4.
Jika semua tahap diatas telah dilakukan, maka CCTV siap digunakan.
Gambar 4.14 Kamera terinstal
4.3.2
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.
108
3. 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 Linux BSD Unix Solaris X Terdukung Tidak Tidak Tidak Tidak Terdukung Terdukung Terdukung Terdukung
Unix Lainnya Tidak 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.
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
Tidak dapat diembed Tidak dapat diembed Dapat diembed
Tidak dapat diembed Tidak dapat diembed Dapat diembed
Google Chrome Tidak 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
PC
Laptop
UMPC
Windows Media Player Real Media Player Flash Media Player
Ya*
Ya*
Ya*
Handphone / PDA Phone 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
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 2008. 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.
111
Nama Sistem Windows Media
DRM tersedia Ya
Helix Media
Ya
Flash Media
Ya
Keterangan Enkripsi dilakukan dengan menambah bit enkripsi di dalam file source Enkripsi dilakukan dengan menambah bit enkripsi di dalam file source 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.
112
4.3.3
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 3.0.1
•
Adobe Flash CS4
•
XAMPP
4.3.3.1 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.
113
5.
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
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.
115
Konfigurasi untuk Menyimpan Hasil Encoding
Gambar 4.18 Menentukan Letak Penyimpanan File
4.3.3.2 Instalasi Adobe Flash Media Server 3.0.1 1.
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
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.
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.
118
Gambar 4.21 Halaman Install Adobe FMS 3
10. 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.
4.3.3.3 Langkah – langkah instalasi XAMPP 1.7.1 1. Jalankan file installer xampp-win32-1.7.1.exe dan user dapat memilih bahasa yang diinginkan. Tekan tombol OK untuk memulai instalasi.
119
2. 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.
120
4.3.3.4 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.
121
4. 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
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
123
4.5
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.
124
2. 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.
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.
