Analisis Sistem Aplikasi Video Cenferenc

(1)

43

PERANCANGAN S IS TEM

3.1 Diagram Perancangan Sistem 3.1.1 Use Case Diagram

(2)

3.1.2 Use Case Narrative

3.1.2.1 Use Case Narrative View Main Menu

Tabel 3.1 Use Case Narrative View Main Menu

Pelaku : Guest, Student, Lecturer

Deskripsi : User dapat melihat main menu yang terdapat

pada aplikasi

Kegiatan Pelaku Respon Sistem Langkah 1 :

User memasukkan

URL website pada

web browser

Langkah 2 : Sistem akan

menampilkan halaman

Index

Bidang khas suatu event :

Langkah 3 :

User dapat memilih

pilihan yang tersedia untuk user (lihat pilihan)

Langkah 4 :

Sistem akan merespon pilihan yang dipilih oleh user

Pilihan : Kegiatan Pelaku Respon Sistem M enampilkan

informasi mengenai

camera ELM O

PTC 401C-IP

Langkah 1 :

User mengklik menu

Camera Overview

menampilkan halaman

Camera Overview yang

berisi informasi mengenai camera ELM O PTC 401C-IP M enampilkan

informasi mengenai Video

Conference

Langkah 1 :

About Video

Conference

menampilkan halaman

About Video

(3)

informasi mengenai Video Conference M enampilkan

informasi bagaimana cara menggunakan

site

Langkah 1 :

How To Use This Site

menampilkan halaman

How To Use This Site

yang berisi informasi mengenai cara menggunakan site M enampilkan

informasi mengenai pertanyaan-pertanyaan seputar aplikasi

Langkah 1 :

FAQ

menampilkan halaman FAQ yang berisi pertanyaan-pertanyaan mengenai aplikasi

3.1.2.2 Use Case Narrative Chatting

Tabel 3.2 Use Case Narrative Chatting

Pelaku : Guest, Student, Lecturer

Deskripsi : User dapat melakukan chatting (interaksi berupa

pengiriman teks) dengan user yang lain Kegiatan Pelaku Respon Sistem Bidang khas

suatu event : _{Langkah 1 :}

User memasukkan

teks pada field yang tersedia

menampilkan teks pada

(4)

3.1.2.3 Use Case Narrative Login

Tabel 3.3 Use Case Narrative Login

Pelaku : Student, Lecturer

Deskripsi : User harus melakukan login terlebih dahulu

sebelum masuk ke dalam aplikasi

User memasukkan

URL website pada

web browser

menampilkan halaman

Index

Langkah 3 :

User memasukkan

username dan

password kemudian

melakukan submit

menampilkan halaman

home apabila username

dan password valid Alternatif :

Langkah 2 Apabila username dan password yang dimasukkan tidak valid maka sistem akan membuka kembali halaman index dengan notifikasi error

3.1.2.4 Use Case Narrative View Rules

Tabel 3.4 Use Case Narrative View Rules

Deskripsi : User dapat melihat aturan mengenai penggunaan

aplikasi video conference Prakondisi : User harus login terlebih dahulu

Kegiatan Pelaku Respon Sistem Bidang khas

(5)

Rules

Sistem akan

menampilkan halaman

Rules

3.1.2.5 Use Case Narrative Open Video Conference Application

Tabel 3.5 Use Case Narrative Open Video Conference Application

Deskripsi : User dapat menggunakan aplikasi video conference untuk melakukan proses

pembelajaran maupun diskusi Prakondisi : User harus login terlebih dahulu

Home

menampilkan halaman

Home

Langkah 3 :

Langkah 4 :

Sistem akan merespon pilihan yang dipilih oleh

user

Pilihan : Kegiatan Pelaku Respon Sistem Langkah 1 :

d601

menampilkan login box M elakukan

video

conference

dengan

lecturer

Langkah 3 : User memasukkan

username dan

password

menampilkan window

(6)

Langkah 5 :

User memilih bahasa

yang diinginkan

menampilkan halaman utama camera ELM O Langkah 7 :

ukuran image yang ingin ditampilkan dengan mengklik Live

View sesuai dengan

ukuran yang diinginkan

menampilkan Camera ELM O Live Display

Langkah 1 :

602

menampilkan login box Langkah 3 :

User memasukkan

username dan

password

menampilkan window

camera ELM O

Langkah 5 :

User memilih bahasa

yang diinginkan

menampilkan halaman utama camera ELM O M elakukan

video

conference

dengan student

Langkah 7 :

ukuran image yang ingin ditampilkan dengan mengklik Live

View sesuai dengan

ukuran yang diinginkan

(7)

3.1.2.6 Use Case Narrative Leave Video Conference Application

Tabel 3.6 Use Case Narrative Leave Video Conference Application

Deskripsi : User ingin keluar dari aplikasi video conference

Prakondisi : User harus login ke dalam aplikasi video

conference terlebih dahulu

User mengklik icon

tanda silang (close) yang berada di sisi kanan atas window

Camera ELMO Live

Display

Langkah 2 :

Sistem akan menutup aplikasi video

conference

3.1.2.7 Use Case Narrative Control Camera

Tabel 3.7 Use Case Narrative Control Camera Pelaku : Lecturer

Deskripsi : User dapat mengontrol posisi camera dan

melakukan pengaturan terhadap objek Prakondisi : User harus login ke dalam aplikasi video

conference terlebih dahulu

User mengklik Live View sesuai dengan ukuran yang

diinginkan

(8)

Langkah 3 :

Langkah 4 :

Sistem akan merespon pilihan yang dipilih oleh

user

Pilihan : Kegiatan Pelaku Respon Sistem M engarahkan

posisi camera

Langkah 1 :

User menggerakkan

scroll bar atau

mengklik camera

position

menampilkan objek sesuai dengan pergerakan yang dilakukan M engembalikan

camera ke

posisi semula

Langkah 1 :

User mengklik

tombol Reset

menampilkan objek posisi semula

Zoom objek Langkah 1 :

User mengklik

tombol Wide untuk memperkecil objek atau tombol Tele untuk memperbesar objek pada scroll bar

zoom

menampilkan objek sesuai dengan

pengaturan yang telah dilakukan

M enyimpan posisi objek

Langkah 1 :

User memilih preset

number yang terdapat

pada preset combo

box lalu mengklik

tombol Save Preset

Langkah 2 :

(9)

M elihat objek yang telah disimpan

Langkah 1 :

User memilih preset

number kemudian

mengklik tombol

Goto Preset

menampilkan objek

M engatur cahaya pada objek

Langkah 1 :

User mengklik

tombol open untuk meningkatkan cahaya atau mengklik tombol

close untuk

mengurangi cahaya pada objek dan apabila tingkat cahaya ingin diatur pada level normal,

user mengklik tombol

Normal

pengaturan yang telah dilakukan

M engatur focus pada objek

Langkah 1 :

User mengklik

tombol near apabila ingin mendekatkan

focus atau far apabila

ingin menjauhkan

focus. Apabila focus

dari objek ingin diatur secara otomatis, user mengklik tombol

Auto

(10)

3.1.2.8 Use Case Narrative Logout

Tabel 3.8 Use Case Narrative Logout

Deskripsi : User melakukan logout untuk keluar dari aplikasi

Prakondisi : User harus login terlebih dahulu

User mengklik tombol

Log out

menampilkan halaman

index

3.1.2.9 Use Case Narrative Setting MPEG4

Tabel 3.9 Use Case Narrative Setting M PEG4

Pelaku : Admin

Deskripsi : User melakukan pengaturan terhadap image

MPEG4

Prakondisi : User harus login ke dalam window camera ELM O terlebih dahulu

User mengklik link

Setup

menampilkan halaman ELM O IP Camera

Setup

Langkah 3 :

MPEG4 Setup

(11)

Langkah 5 :

User menginput bit

rate dan memilih

frame rate, resolution,

dan mode yang akan digunakan kemudian mengklik tombol OK

Langkah 6 :

Sistem akan menyimpan data yang telah

dimasukkan Langkah 7 : Sistem akan

Setup

3.1.2.10 Use Case Narrative Setting Network

Tabel 3.10 Use Case Narrative Setting Network

Pelaku : Admin

Deskripsi : User membuat pengaturan yang berkaitan

dengan jaringan yang akan digunakan Prakondisi : User harus login ke dalam window camera

ELM O terlebih dahulu

Setup

Langkah 3 :

Network Setup

menampilkan halaman

Network Setup

Langkah 5 :

tipe pengiriman data

Langkah 6 :

(12)

dan menginput IP,

Gateway, Netmask,

Broadcast, serta port

kemudian mengklik tombol OK

Setup

3.1.2.11 Use Case Narrative Setting User

Tabel 3.11 Use Case Narrative Setting User

Pelaku : Admin

dengan administrasi user

Setup

Langkah 3 :

User Setup

menampilkan halaman

User Setup

Langkah 5 :

pilihan yang tersedia (lihat pilihan)

Langkah 6 :

Sistem akan merespon pilihan user

(13)

Langkah 1 :

User menginput ID,

password, dan

memilih authority kemudian mengklik tombol Add

menampilkan data yang telah dimasukkan pada

list

M enambah

user

Langkah 3 :

OK

Langkah 4 :

Setup

Langkah 1 :

User mengklik user

yang ingin diubah pada list

menampilkan data user

Langkah 3 :

User menginput data kemudian mengklik tombol Modify

menampilkan data yang telah diubah pada list M engubah

user

Langkah 5 :

OK

Langkah 6 :

(14)

Setup

Langkah 1 :

User mengklik user

yang ingin dihapus pada list

menampilkan data user

Langkah 3 :

User mengklik tombol

Remove

Langkah 4 :

Sistem akan menghapus

user yang telah dipilih

dari list M enghapus

user

Langkah 5 :

OK

Langkah 6 :

Setup

3.1.2.12 Use Case Narrative Setting Camera

Tabel 3.12 Use Case Narrative Setting Camera

Pelaku : Admin

dengan camera

(15)

Langkah 1 :

Setup

Langkah 3 :

Camera Setup

menampilkan halaman

Camera Setup

Langkah 5 :

Misc. (miscellaneous)

Settings

menampikan halaman

Misc. Settings

suatu event :

Langkah 7 :

pengaturan-pengaturan yang diinginkan pada

camera kemudian

mengklik tombol OK

Langkah 8 :

menampilkan halaman

Camera Setup

3.1.3 Activity Diagram

3.1.3.1 Activity Diagram View Main Menu

Pada halaman index terdapat 4 jenis main menu yang dapat diakses oleh user yaitu Camera Overview, About Video Conference,

(16)

Gambar 3.2 Activity Diagram View Main Menu

3.1.3.2 Activity Diagram Chatting

User dapat melakukan pengiriman teks melalui chat box yang

(17)

Gambar 3.3 Activity Diagram Chatting

3.1.3.3 Activity Diagram Login

User harus melakukan login terlebih dahulu untuk dapat

menggunakan fitur utama yang terdapat pada aplikasi yaitu video

conference. Login dibagi menjadi dua jenis, yaitu login sebagai

student dengan username berupa nomor ruang kelas dan password

berupa IP yang tertera pada camera dan login sebagai lecturer dengan username berupa kode d beserta nomor ruang kelas dan

password berupa IP yang tertera pada camera.

Apabila username dan password yang dimasukkan oleh user tidak valid maka sistem akan menampilkan kembali halaman index dengan notifikasi error. Error untuk login dibedakan menjadi 2 jenis, yaitu

error karena username dan password yang dimasukkan salah atau

(18)

Gambar 3.4 Activity Diagram Login

3.1.3.4 Activity Diagram View Rules

User dapat melihat rule-rule mengenai penggunaan aplikasi video

conference pada menu ini. Rule untuk lecturer berbeda dengan rule

untuk student. Apabila user yang login adalah lecturer maka rule yang akan ditampilkan adalah rule untuk lecturer yang berisi informasi mengenai username dan password untuk masuk ke dalam aplikasi video conference.

(19)

mengenai username dan password untuk masuk ke dalam aplikasi video conference.

Gambar 3.5 Activity Diagram View Rules

3.1.3.5 Activity Diagram Open Video Conference Application

Fitur video conference merupakan fitur utama yang terdapat pada aplikasi. Fitur ini hanya dapat diakses oleh user yang telah melakukan login. Fitur ini dapat digunakan dengan mengklik menu dengan kode d disertai nomor ruang kelas (contoh : d601) yang menunjukkan bahwa menu tersebut adalah menu untuk melakukan video conference dengan lecturer dan menu dengan nama nomor ruang kelas (contoh : 602) yang menunjukkan bahwa menu tersebut adalah menu untuk melakukan video conference dengan student.

(20)

user login ke dalam aplikasi video conference. Hal ini akan

dijelaskan lebih detail pada point berikutnya yaitu setting user. Oleh karena itu, informasi mengenai username dan password ini dijelaskan pada menu Rules dan user dapat memperoleh username dan password untuk login pada menu tersebut.

Setelah login, sistem akan meminta user untuk memilih bahasa yang ingin digunakan pada aplikasi. Terdapat dua jenis pilihan bahasa, yaitu English dan Japanese. Setelah user memilih bahasa, sistem akan menampilkan halaman utama dari camera ELM O.

Untuk menampilkan live display dari camera ELM O, user dapat mengklik link Live View (image size). User dapat memilih ukuran tampilan dari live display. Terdapat tiga jenis ukuran, yaitu half-D1 dengan ukuran layar 704 x 480 pixels, SIF dengan ukuran 352 x 240

(21)

(22)

3.1.3.6 Activity Diagram Leave Video Conference Application

User dapat mengklik tombol close (tanda silang) yang terdapat

pada sisi kanan atas window jika user telah selesai menggunakan aplikasi video conference and ingin keluar dari aplikasi.

Gambar 3.7 Activity Diagram Leave Video Conference Application

3.1.3.7 Activity Diagram Control Camera

Setelah user masuk ke dalam aplikasi video conference, user dapat mengontrol camera. User yang memiliki privilege ini hanya

lecturer karena authority untuk lecturer telah diatur oleh admin pada

setting user sebagai operator. Hal ini dimaksudkan agar lecturer

dapat mengontrol dan memantau student yang berada di dalam kelas. Pengaturan posisi camera dapat dilakukan dengan dua cara, yaitu dengan menggerakkan scroll bar atau titik kuning yang terdapat pada

camera position. Untuk mengembalikan camera ke posisi semula,

(23)

Selain dapat mengontrol arah dan posisi dari camera, user juga dapat memperbesar dan memperkecil objek dengan mengklik tombol

Wide dan Tele. Tombol Wide digunakan untuk memperkecil objek

sedangkan tombol Tele digunakan untuk memperbesar objek.

User dapat menyimpan image dengan memilih preset number

pada preset combo box (range : Home, Preset 1-16) kemudian mengklik tombol Save Preset. Jika user ingin melihat image yang telah disimpan, user dapat memilih preset number lalu mengklik tombol Goto Preset kemudian image yang telah disimpan akan ditampilkan pada live display.

User dapat mengatur tingkat keterangan (brightness) objek pada

iris. Terdapat tiga jenis pengaturan cahaya, yaitu klik tombol Open

untuk meningkatkan cahaya pada objek, klik tombol Normal untuk mengatur cahaya objek pada level normal, dan klik tombol Close untuk mengurangi cahaya pada objek.

User dapat mengatur focus dari objek dengan mengklik tombol

Near untuk memfokuskan objek lebih dekat, mengklik tombol Auto

untuk memfokuskan objek secara automatis, dan mengklik tombol

(24)

(25)

3.1.3.8 Activity Diagram Logout

User dapat keluar dari aplikasi dengan mengklik tombol Log out.

Gambar 3.9 Activity Diagram Logout

3.1.3.9 Activity Diagram Setting MPEG4

Sebelum aplikasi dapat dijalankan, admin harus melakukan pengaturan terlebih dahulu pada camera. Setting M PEG4 dimaksudkan untuk mengatur bit rate, frame rate, resolution dan

mode dari image. Admin dapat menginput bit rate dan memilih frame

rate, resolution, dan mode dari image. Range bit rate : 64 – 2000

kbps, range frame rate : 30, 15, 10, 5, dan 1 frame/second, resolution : D1 : 704 x 480 dan SIF : 352 x 240, mode : frame (mengurangi

delay untuk image) dan GOP (memungkinkan camera untuk

(26)

Klik Link Setup

Tampilkan halaman ELMO I P Camera Set up

Klik Link MPEG 4 Setup

Tampilkan halaman MPEG 4 Setup

Input Data & Klik OK

Tampilkan halaman ELMO IP Camera Setup Simpan data yang telah dimasukkan

Gambar 3.10 Activity Diagram Setting M PEG4

3.1.3.10 Activity Diagram Setting Network

Setting network dimaksudkan untuk mengatur tipe pengiriman

(27)

gateway, netmask, broadcast, serta mengatur port yang akan

digunakan oleh camera.

Klik Link Setup

Tampilkan halaman ELMO I P Camera Set up

Klik Link Network Setup

Tampilkan halaman Network Setup

Input Data & Klik OK

Tampilkan halaman ELMO IP Camera Setup Simpan data yang telah dimasukkan

(28)

3.1.3.11 Activity Diagram Setting User

Setting user dimaksudkan untuk melakukan pengaturan yang

berhubungan dengan administrasi user. Admin harus mendaftarkan

user terlebih dahulu dengan mengisikan ID, password, dan

menentukan authority agar user dapat mengakses aplikasi. Hanya admin yang mempunyai privilege untuk menambah, mengubah, dan menghapus user.

(29)

3.1.3.12 Activity Diagram Setting Camera

Setting camera dimaksudkan untuk melakukan pengaturan yang

berhubungan dengan tampilan object sebelum camera digunakan oleh user. Penjelasan mengenai setting user akan dijelaskan pada

point berikutnya.

(30)

3.1.4 Statechart Diagram

3.1.4.1 Statechart Diagram View Menu Camera Overview

Gambar 3.14 Statechart Diagram View Menu Camera Overview

3.1.4.2 Statechart Diagram View Menu About Video Conference

Gambar 3.15 Statechart Diagram View Menu About Video

Conference

3.1.4.3 Statechart Diagram View Menu How To Use This Site

(31)

3.1.4.4 Statechart Diagram View Menu FAQ

Gambar 3.17 Statechart Diagram View Menu FAQ

3.1.4.5 Statechart Diagram Chatting

Gambar 3.18 Statechart Diagram Chatting

3.1.4.6 Statechart Diagram Login

Gambar 3.19 Statechart Diagram Login

3.1.4.7 Statechart Diagram View Rules

(32)

3.1.4.8 Statechart Diagram Open Video Conference Application (Lecturer)

Gambar 3.21 Statechart Diagram Open Video Conference

Application (Lecturer)

3.1.4.9 Statechart Diagram Open Video Conference Application (Student)

Gambar 3.22 Statechart Diagram Open Video Conference

(33)

3.1.4.10 Statechart Diagram Leave Video Conference Application

Gambar 3.23 Statechart Diagram Leave Video Conference

Application

3.1.4.11 Statechart Diagram Control Camera (Position)

Gambar 3.24 Statechart Diagram Control Camera (Position)

3.1.4.12 Statechart Diagram Control Camera (Reset)

(34)

3.1.4.13 Statechart Diagram Control Camera (Zoom In Object)

Gambar 3.26 Statechart Diagram Control Camera (Zoom In Object)

3.1.4.14 Statechart Diagram Control Camera (Zoom Out Object)

Gambar 3.27 Statechart Diagram Control Camera (Zoom Out

Object)

3.1.4.15 Statechart Diagram Control Camera (Save Preset)

(35)

3.1.4.16 Statechart Diagram Control Camera (View Preset)

Gambar 3.29 Statechart Diagram Control Camera (View Preset)

3.1.4.17 Statechart Diagram Control Camera (Iris Increase)

Gambar 3.30 Statechart Diagram Control Camera (Iris Increase)

3.1.4.18 Statechart Diagram Control Camera (Iris Normal)

(36)

3.1.4.19 Statechart Diagram Control Camera (Iris Decrease)

Gambar 3.32 Statechart Diagram Control Camera (Iris Decrease)

3.1.4.20 Statechart Diagram Control Camera (Focu s Near)

Gambar 3.33 Statechart Diagram Control Camera (Focus Near)

3.1.4.21 Statechart Diagram Control Camera (Focu s Auto)

(37)

3.1.4.22 Statechart Diagram Control Camera (Focu s Far)

Gambar 3.35 Statechart Diagram Control Camera (Focus Far)

3.1.4.23 Statechart Diagram Logout

Gambar 3.36 Statechart Diagram Logout

3.1.4.24 Statechart Diagram Setting MPEG4

(38)

3.1.4.25 Statechart Diagram Setting Network

Gambar 3.38 Statechart Diagram Setting Network

3.1.4.26 Statechart Diagram Setting User (Add User)

(39)

3.1.4.27 Statechart Diagram Setting User (Modify User)

Gambar 3.40 Statechart Diagram Setting User (Modify User)

3.1.4.28 Statechart Diagram Setting User (Delete User)

(40)

3.1.4.29 Statechart Diagram Setting Camera

Gambar 3.42 Statechart Diagram Setting Camera

3.1.5 Sequence Diagram

3.1.5.1 Sequence Diagram View Main Menu

(41)

3.1.5.2 Sequence Diagram Chatting

Gambar 3.44 Sequence Diagram Chatting

3.1.5.3 Sequence Diagram Login

(42)

3.1.5.4 Sequence Diagram View Rules

Gambar 3.46 Sequence Diagram View Rules

3.1.5.5 Sequence Diagram Open Video Conference Application

(43)

3.1.5.6 Sequence Diagram Leave Video Conference Application

(44)

3.1.5.7 Sequence Diagram Control Camera

L ectur er

Ca mera E LMO Liv e Di spla y

mo ve_ scrol l_ bar( )

ELMO Ca mera

click _Ca mer a_Po sitio n()

cl ick_ Res et() sele ct_Pre set_N umb er()

cli ck_Sa ve_ Prese t()

cl ick_ Go to _Pr eset()

save () retur n_re sul t( )

g et_d ata() retur n_re sul t( ) clic k_Ope n()

cl ick_ Cl ose () cl ick_ No rmal ()

i ncre ase _b rig htne ss() return _re sul t() no rmal _bri gh tn ess( )

return _re sul t() d ecre ase _b rig htne ss()

retur n_re sul t( ) sho rte n_ th e_ focus ()

retur n_re sul t( ) a utoma tical ly_ ad jus t()

retu rn_r esu lt() fa r_the _focu s() retur n_re sul t( ) clic k_L ive_ Vie w()

EL MO Mai n Pag e

o pe n()

sele ct_Pre set_N umb er()

click _Ne ar()

cli ck_Au to()

click _Far()

(45)

3.1.5.8 Sequence Diagram Logout

Student, Lecturer

Home Page Index Page

open() click_Log_out ()

Gambar 3.50 Sequence Diagram Logout

3.1.5.9 Sequence Diagram Setting MPEG4

A dm in

EL MO Mai n Pa ge

in pu t_d ata ()

op en () c lic k_M PEG4 _Se tup ()

op en () cl ick _Se tup ()

MPEG4 Setu p Pa ge ELM O IP C am era Setu p

P ag e

cl ick _OK()

re turn resu lt()

E LMO C am era

save ()

(46)

3.1.5.10 Sequence Diagram Setting Network

(47)

3.1.5.11 Sequence Diagram Setting User

(48)

3.1.5.12 Sequence Diagram Setting Camera

(49)

3.2 Rancangan Layar

3.2.1 Halaman Index

Gambar 3.55 Perancangan Layar Halaman Index Keterangan gambar :

1. Terdapat lima jenis menu dalam Main Menu yaitu Home, Camera Overview,

About Video Conference, How To Use This Site, FAQ. Penjelasan mengenai

(50)

2. Login form yang terdiri dari username dan password untuk masuk ke dalam

sistem.

3. Tombol Log in untuk submit username dan password.

4. Chat box untuk melakukan chatting antara user yang satu dengan user yang

lain.

3.2.2 Halaman Home

Gambar 3.56 Perancangan Layar Halaman Home Keterangan gambar :

1. M enunjukkan nama user yang sedang login.

(51)

3. User Menu merupakan menu tambahan setelah user login. User menu terdiri

dari Rules dan menu untuk menggunakan video conference. Penjelasan mengenai menu tambahan tersebut akan dijelaskan lebih lanjut.

3.2.3 Halaman Camera Overview

Gambar 3.57 Perancangan Layar Halaman Camera Overview Keterangan gambar :

Halaman Camera Overview berisi content dengan judul ELM O PTC 401C-IP

Camera yang berisi penjelasan, spesifikasi, serta fitur yang terdapat pada camera

(52)

3.2.4 Halaman About Video Conference

Gambar 3.58 Perancangan Layar Halaman About Video Conference Keterangan gambar :

Halaman About Video Conference ini berisi content dengan judul Video

Conference yang berisi penjelasan mengenai sejarah dan perkembangan video

(53)

3.2.5 Halaman How To Use This Site

Gambar 3.59 Perancangan Layar Halaman How To Use This Site Keterangan gambar :

Halaman How To Use This Site ini berisi content dengan judul How To Use This

Site yang berisi penjelasan mengenai cara dan langkah-langkah menggunakan

(54)

3.2.6 Halaman FAQ

Gambar 3.60 Perancangan Layar Halaman FAQ Keterangan gambar :

(55)

3.2.7 Halaman Rules

Gambar 3.61 Perancangan Layar Halaman Rules Keterangan gambar :

1. M enunjukkan nama user yang sedang login.

2. Tombol Log out yang berguna untuk keluar dari sistem.

3. User Menu merupakan menu tambahan setelah user login. User menu terdiri

dari Rules dan menu untuk menggunakan video conference.

(56)

3.2.8 Halaman Control Camera

Gambar 3.62 Perancangan Layar Halaman Control Camera Keterangan gambar :

1. Scroll bar dan camera position yang digunakan untuk memindahkan posisi

image pada koordinat yang diinginkan.

2. Tombol Reset untuk mengembalikan posisi camera ke posisi semula yang

telah disimpan oleh camera.

3. Dengan mengklik tombol Save Preset, posisi sekarang (current) akan tersimpan pada preset number yang dipilih.

4. Tombol Release Control untuk mendaftarkan state focus dan brightness pada

(57)

5. Checkbox Speaker dipilih apabila ingin mendengarkan output suara yang

diinput melalui microphone.

6. Checkbox External GPIO untuk mengaktifkan atau mengnonaktifkan GPIO

terminal.

7. Scrool bar zoom untuk memperbesar (tele) atau memperkecil (wide) tampilan

objek.

8. Tombol Open dan Close pada Iris untuk meningkatkan atau mengurangi

brightness sedangkan tombol Normal mengarahkan brightness ke level

normal.

9. Tombol Near dan Far pada Focus untuk mengatur focus secara manual sedangkan tombol Auto untuk mengatur focus secara automatis.

10. Pilih preset yang ingin ditampilkan pada preset combo box. Range preset

adalah Home, Preset 1-16. Dengan mengklik tombol Goto Preset, preset yang terdaftar akan ditampilkan.

3.2.9 Halaman Setting MPEG4

(58)

Keterangan gambar :

1. Tentukan batas atas pada jumlah data untuk membatasi jumlah data yang

dihasilkan selama komunikasi atau distribusi image berlangsung. Range pengaturan bit rate mulai dari 64 sampai 2000 kbps.

2. Tentukan jumlah frame yang akan ditampilkan per detik. Range pengaturan

frame rate terdiri dari 30, 15, 10, 5, dan 1 frame / detik. Sound tidak akan

diterima atau dikirimkan ketika frame rate diatur menjadi 1 frame / detik. 3. Tentukan ukuran dari image yang akan ditampilkan. Pengaturan resolusi

terdiri dari dua jenis, yaitu D1 (704 x 480 pixels) dan SIF (352 x 240 pixels). 4. Atur delay untuk gambar sesuai dengan lingkungan jaringan. Pengaturan

mode terdiri dari dua jenis, yaitu frame (mengurangi delay untuk image) dan

GOP (memungkinkan kamera untuk menangani performa lingkungan jaringan yang sempit menjadi luas meskipun delay untuk image lama).

(59)

3.2.10 Rancangan Layar Halaman Setting Network

Networ k Setup

Send Type

MAC Addr ess

UDP Unicast

Start Port Range

End Por t Range

HT TP Port

Option Port

Multicast Po rt

3000

Gambar 3.64 Perancangan Layar Halaman Setting Network Keterangan gambar :

1. Pilih mode untuk mengirimkan M PEG4 image. Ada tiga jenis mode

pengiriman image, yaitu :

• UDP Unicast

(60)

• Multicast

Data UDP image didistribusikan, terlepas dari apakah

camera terhubung atau tidak dari host, mengakibatkan penurunan

beban pada kamera dan jalur transmisi. M eskipun berbagai address dapat diatur, data image mungkin tidak didistribusikan dengan baik, tergantung pada lingkungan jaringan.

• TCP Unicast

Data TCP image didistribusikan berdasarkan permintaan dari host untuk koneksi. Hanya sampai tiga alamat saja yang bisa terkoneksi dari viewer ke camera.

2. Atur IP address dari camera.

3. Tentukan IP address dari router ketika router digunakan untuk

menghubungkan camera ke jaringan luar.

4. Atur address dari DNS server kemana camera dihubungkan. Pada DNS2, atur address dari DNS server kemana camera akan dihubungkan jika camera tidak dapat terhubung ke DNS1.

5. Atur subnet mask address dari camera. 6. Atur broadcast address dari camera. 7. M enampilkan M AC address dari camera.

8. Tentukan port pertama camera terbuka ke jaringan. 9. Tentukan port terakhir camera terbuka ke jaringan.

10. Tentukan port yang digunakan untuk web server pada camera (80, 1024

(61)

11. Tentukan port yang digunakan untuk mendistribusikan image dari camera (1024 sampai 65535).

12. Tentukan port yang digunakan ketika camera menggunakan mode multicast

(1024 sampai 65535).

13. Tentukan port yang digunakan untuk mengirimkan dan menerima suara dari atau ke camera (1024 sampai 65535).

14. Atur ID address dari RS-485 dari camera (1 sampai 223). 15. Tombol OK untuk menyimpan data yang telah dimasukkan. 16. Tombol Cancel untuk membatalkan.

3.2.11 Rancangan Layar Halaman Setting User

(62)

Keterangan gambar :

1. Tampilan list yang terdiri dari ID, Authority setelah data dimasukkan. 2. M asukkan ID user.

3. M asukkan password user.

4. Pilih authority dari user. Ada tiga jenis authority yang dapat dipilih, yaitu :

• Administrator

Login ID untuk administrasi sudah ditetapkan, yaitu ‘root’. Dengan

ID ini, admin dapat menampilkan image, mengoperasikan camera, dan mengatur setting camera.

• Operator

Dapat menampilkan image dan mengoperasikan camera.

• User

Hanya dapat menampilkan image saja.

Note :

Hanya root yang dapat didaftarkan sebagai administrator. Sedangkan untuk

operator dan user dapat didaftarkan sampai 99 nama.

5. Tombol Add untuk menambah user baru.

6. Tombol Modify untuk mengubah ID, password, atau authority dari user. Untuk root, yang bisa diubah hanyalah password saja.

7. Tombol Remove untuk menghapus user. Semua user dapat dihapus kecuali

root.

(63)

3.2.12 Rancangan Layar Setting Camera

Misc. Set tin gs

AUT O R ET URN:

100 120 130

20m

back Home Options Main 1

Gambar 3.66 Perancangan Layar Halaman Setting Camera Keterangan gambar :

1. Pilih waktu otomatis untuk kembali ke posisi semula.

2. Bila fungsi ini diatur ke ON, image selama pergerakan antara posisi preset menjadi statis (image sebelum pergerakan). Pada mode ini, gerakan diaktifkan antara posisi preset (termasuk posisi awal), tetapi operasi PAN-TILT-ZOOM dinon-aktifkan. Fungsi ini berguna untuk menyimpan image selain image posisi awal dan image posisi preset. Hanya ketika tombol

PRESET ditekan, image tidak dapat statis.

3. Pilih sudut putar image.

4. Untuk mengatur posisi preset (PRESET 1-16) untuk gerakan dalam hal input pada terminal <1>ALARM IN.

(64)

6. Untuk mengatur posisi preset (PRESET 1-16) untuk gerakan dalam hal input pada terminal <2>ALARM IN.

7. Tombol OK untuk menyimpan data yang telah dimasukkan. 8. Tombol Cancel untuk membatalkan.

3.3 Rancang Bangun

Berikut adalah gambar rancang bangun secara keseluruhan untuk menghubungkan

camera ke speaker dan microphone serta koneksi ke jaringan menggunakan switch.