BAB II

SOCIAL DISTANCING DETECTOR

A. Latar Belakang Produk

Perkembangan teknologi yang pesat belakangan ini, telah
meningkatkan kreasi manusia dalam menciptakan perangkat yang dapat
mendukung kinerja manusia dalam melakukan proses pekerjaan agar lebih
praktis dan efisien. Perkembangan teknologi itu dapat memberikan
manfaat bila diterapkan secara tepat, tak terkecuali dalam masa pandemi
covid-19.
Dalam masa pandemi covid-19 tentu harus diterapkan protokol
kesehatan yang baik dan teratur. Masalahnya selalu ada saja yang
melanggar protokol kesehatan dengan tidak menjaga jarak. Saat ini,
menjaga jarak merupakan salah satu hal yang diperlukan untuk
mengurangi dampak dari penyebaran covid-19.
Oleh karena itu, kami telah merancang sebuah sistem aplikasi yang
bernama “Pendeteksi Social Distancing”. Sistem aplikasi ini berfungsi
untuk memonitoring orang yang berkerumunan.

B. Latar Belakang Seena Tech

Seena Tech merupakan sebuah apikasi social distancing yang di ambil
dari nama ibnu Sina, Karena produk kita alat pendeteksi social distancing
dan selama social distancing kita lebih di sarankan untuk isolasi di dalam
rumah dan tidak keluar rumah kalau gak ada keperluan yang mendesak,
isolasi diri selama 14 hari sendiri merupakan metode yang di gagas ibnu
sina selain itu dipakai see yang berarti melihat karena aplikasi kita
bergerak di bidang computer vision yang mana bidang dan kita mencoba
membuat computer untuk bias melihat.
C. Penjelasan Komponen-Komponen Produk
1. XAMPP

Gambar 2.1 Xampp tampilan Control Panel

XAMPP adalah perangkat lunak bebas, yang mendukung banyak

sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya
adalah sebagai server yang berdiri sendiri, yang terdiri atas program
Apache HTTP Server, MySQL database, dan penerjemah bahasa yang
ditulis dengan bahasa pemrograman PHP dan Perl. Fungsinya :
a. Setting Database phpMyAdmin : Dengan menggunakan XAMPP
Anda bisa mengakses halaman phpMyAdmin. Sama seperti saat
Anda menggunakan hosting atau VPS pasti Anda akan
membutuhkan phpMyAdmin untuk mengedit, menghapus,
menambah database, dan menambahkan user.
b. Install WordPress Offline : XAMPP berguna untuk menjalankan
Apache, MariaDB, dan PHP pada localhost atau komputer tanpa
harus ada koneksi internet. Dengan Adanya XAMPP akan
mempermudah pekerjaan frontend dan backend developer. Karena
mereka dapat melakukan testing pada program sebelum nantinya
akan diupload ke server online website.
c. Menjalankan Laravel Pada Komputer : Laravel adalah salah satu
framework php yang dipakai untuk mempermudah developer
dalam mengembangkan website. Dengan menjalankan Laravel pada
localhost komputer Anda menggunakan XAMPP, Anda jadi lebih
mudah untuk
Editor : yang akan digunakan untuk mengubah default text editor.
 Browser : browser default yang akan digunakan untuk akses web
server.

Fitur – fitur di XAMPP :

Tabel 2.1 Komponen dan Fitur Xampp

Component Deskripsi Version
Apache Sebagai aplikasi web server default 2.4.31
MariaDB Sebagai sistem manajemen database 10.4.11
PHP Sebagai server side scripting untuk 7.2.27,
membuat aplikasi berbasis web 7.3.14, 7.4.2
phpMyAdmin Sebagai tools untuk menggunakan 5.0.1
MySQL berbasis web
OpenSSL Sebagai protokol keamanan 1.1.1d
XAMPP Control Panel Untuk mengatur komponen berbeda 3.2.4
pada XAMPP
Webalizer Sebagai tools analytics untuk user log 2.23-04
dan penggunaan
Mercury Mail Sebagai email server 4.63
Transport System
FileZilla FTP Server Untuk melakukan transfer file 0.9.41
Tomcat Digunakan untuk melayani aplikasi 7.0.99
Java
Strawberry Distribusi perl yang populer untuk 5.16.3.1
Windows

2. Sublime Text

Gambar 2.2 Sublime Text

 Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat
berjalan diberbagai platform operating system dengan menggunakan
teknologi Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi
Vim, Aplikasi ini sangatlah fleksibel dan powerfull. Fungsionalitas dari
aplikasi ini dapat dikembangkan dengan menggunakan sublime-packages.
Sublime Text bukanlah aplikasi opensource dan juga aplikasi yang dapat
digunakan dan didapatkan secara gratis, akan tetapi beberapa fitur
pengembangan fungsionalitas (packages) dari aplikasi ini merupakan
hasil dari temuan dan mendapat dukungan penuh dari komunitas serta
memiliki linsensi aplikasi gratis.
Sublime Text mendukung berbagai bahasa pemrograman dan
mampu menyajikan fitur syntax highlight hampir di semua bahasa
pemrogramman yang didukung ataupun dikembangkan oleh komunitas
seperti; C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell,
Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl,
PHP, Python, R, Ruby, SQL, TCL, Textile and XML. Biasanya bagi
bahasa pemrograman yang didukung ataupun belum terdukung secara
default dapat lebih dimaksimalkan atau didukung dengan menggunakan
add-ons yang bisa didownload sesuai kebutuhan user.

3. PHP

Gambar 2.3 PHP

PHP meupakan bahasa pemrograman yang di digunakan untuk

membuat website dinamis yang memungkinkan kita melakukan update
website setiap saat. Berbeda dengan HTML yang source kodenya di
tampilkan di website, source code PHP tidak di tampikan di halaman
muka suatu website karena PHP di olah dan dip roses di server, PHP
bersifat server-side scripting yang mampu berjalan di brbagai system
operasi seperti windows, Linux, Mac OS, dll.PHP memiliki kedinamisa
dalam hal database yang bisa dihubungkan dengan PHP seperti MySQL,
Oracle, MS Access, PostgreSQL. Namun untuk pemrograman website yang
paling digunakan adalah MySQL. PHP sendiri sampai sekarang sudah
mengalami perkembangan yang pesat dan sudah mencapai PHP 5.5. untuk
mengawali kode dalam PHP menggunakan kode <?php Dan diakhiri
tanda ?>.
HyperText Markup Language (HTML) adalah sebuah bahasa markah
yang digunakan untuk membuat sebuah halaman web, menampilkan
berbagai informasi di dalam sebuah penjelahan web Internet dan
pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII
agar dapat menghasilkan tampilan wujud yang terintegerasi. Untuk saat
ini versi HTML yang digunakan oleh client-server yakni HTML 5.

4. Framework Css Bootstraps

Gambar 2.4 Css Bootstraps

Bootstrap adalah sebuah library framework CSS yang dibuat khusus

untuk bagian pengembangan front-end website. Bootstrap juga merupakan
salah satu framework HTML, CSS dan javascript yang paling populer di
kalangan web developer yang digunakan untuk mengembangkan sebuah
website yang responsive. Sehingga halaman website nantinya dapat
menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet,
ponsel ) yang digunakan pengguna disaat mengakses website website dari
browser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang
dikembankan oleh Mark Otto dan Jacob Thornton di Twitter sebagai
kerangka kerja untuk mendorong konsistensi di alat internal. Dengan
menggunakan Bootstrap seorang developer dapat dengan mudah dan
cepat dalam membuat front-end sebuah website. Anda hanya perlu
memanggil class-class yang diperlukan, misalnya membuat tombol, grid,
tabel, navigasi dan lainnya.
Bootsrap telah menyediakan kumpulan komponen class interface dasar
yang telah dirancang sedemikian rupa untuk menciptakan sebuah
tampilan yang menarik dan ringan. Selain komponen class interface,
bootsrap juga memiliki grid yang berfungsi untuk mengatur layout pada
halaman website. Selain itu developer juga dapat menambahkan class dan
CSS sendiri, sehingga memungkinkan untuk membuat desain yang lebih
variatif. Salah satu contoh website yang menggunakan framework
bootsrap yaitu twitter.
Berikut tiga file utama yang mengelola interface user dan fungsionalitas
website.
a. Bootstrap.css
Bootstrap.css adalah framework yang mengatur dan mengelola layout
website. HTML mengatur konten dan struktur halaman web, sedangkan
CSS berurusan dengan layout situs. Oleh karena itu, kedua struktur ini
harus bekerja bersama-sama untuk melakukan tindakan tertentu.
Dengan CSS, Anda bisa menghadirkan tampilan yang seragam di
banyak halaman website. Semua ini berkat keberadaan fungsinya. Anda
pun tak perlu lagi menghabiskan waktu berjam-jam lamanya hanya untuk
mengubah, misalnya, lebar desain. Jika menggunakan CSS, yang perlu
dilakukan adalah merujuk atau mengarahkan halaman web ke file CSS.
Nantinya semua perubahan dapat dilakukan di satu file saja.
Fungsi CSS tidak terbatas hanya di gaya teks saja, tetapi juga dapat
digunakan untuk membuat aspek lainnya di halaman web, seperti
tampilan tabel dan gambar.

b. Bootstrap.js
File ini merupakan bagian inti dari Bootstrap. Di dalamnya terdapat file
JavaScript yang bertanggung jawab atas interaktivitas website.
Developer menggunakan jQuery untuk menghemat waktu karena tidak
perlu menulis sintaks JavaScript berulang kali. jQuery sendiri adalah open
source yang populer dan juga library JavaScript lintas platform yang
memperbolehkan usernya untuk menambah berbagai fungsionalitas ke
website.
Berikut contoh fungsi dan kegunaan jQuery:
 1) Menjalankan permintaan Ajax, seperti mengurangi (subtract) data
dari lokasi lain secara dinamis.
2) Membuat widget menggunakan koleksi plugin JavaScript.
3) Membuat animasi menggunakan CSS property.
4) Membuat konten website terlihat lebih dinamis.

Walaupun Bootstrap dengan CSS property dan elemen HTML-nya bisa

berfungsi normal, tetap saja framework ini mebutuhkan jQuery untuk
membuat desain yang responsif. Jika tidak, Anda hanya bisa menikmati
CSS yang statis dan datar.
c. Glyphicons
Ikon berperan penting pada front-end website. Bahkan terkadang ikon
dikaitkan dengan tindakan tertentu serta data yang ada di dalam interface
user. Untuk task ini, Bootstrap menggunaan Glyphicons.
Bootstrap menawarkan Glyphicons Halflings yang bisa dipakai secara
gratis. Versi gratisnya punya tampilan yang standard tapi sudah lebih dari
cukup dengan adanya fungsi-fungsi yang penting. Jika menginginkan ikon
yang lebih stylish, Glyphicons menyediakan berbagai set premium yang
akan membuat website terlihat lebih menarik dan juga sesuai dengan
niche. Masing-masing ikon serta ikon yang dikhususkan untuk suatu tema
dapat diunduh secara gratis di sejumlah website, seperti Flaticon,
GlyphSearch, dan Icons8. Tampilan sebagian ikon dapat dimodifikasi
dengan CSS, sedang sebagian lainnya sudah default. Pilih dan gunakan
ikon yang sesuai dengan konsep dan tema website.

5. Google Chrome

Gambar 2.5 Google Chrome

Google Chrome adalah peramban web lintas platform yang

dikembangkan oleh Google. Peramban ini pertama kali dirilis pada tahun
2008 untuk Microsoft Windows, kemudian diporting ke Linux, macOS,
iOS, dan Android yang menjadikannya sebagai peramban bawaan dalam
sistem operasi.
Berikut ini kelebihan Google Chrome:
a. Mempunyai nilai pengguna tertinggi: Kecepatan dan desain
antarmuka yang user-friendly menjadikan web browser ini banyak
diminati. Selain itu Fitur bawaan dari Google Chrome cukup
banyak dan sangat mendukung kita dalam mencari, mengelola dan
menyimpan informasi.
b. Fitur bawaan menarik: Setiap web browser pasti mempunyai fitur-
fitur yang berbeda didalamnya. Contohnya pada Google Chrome
mempunyai fitur menarik seperti adanya Task Manager, Omnibox,
Mode Incognito dll.
c. Bisa ditambahkan fitur baru: Ekstensi adalah fitur-fitur yang dapat
kita install pada web browser Google Chrome. Dengan
menambahkan ekstensi, maka Google Chrome akan mendapatkan
sebuah fitur baru yang sangat membantu kita.
d. Terhubung langsung dengan Google Search Engine: Dengan
menggunakan search engine Google, kita dapat memuat banyak
informasi didalamnya. Search engine dari Google ini adalah yang
paling sering digunakan dibanding yang lainnya seperti Bing dan
Yandex.
e. Lebih hemat ram dan kecilnya ukuran memori: Karena Google
Chrome mempunyai ukuran memori yang kecil menjadikan dapat
digunakan pada perangkat dengan speksifikasi rendah sekalipun.
Selain itu, Google Chrome dapat melakukan proses awal lebih cepat
dibanding yang lainnya.

Fitur-Fitur Pada Google Chrome

Fitur-fitur pada web browser sangat berpengaruh kepada pengguna
yang memakainya. Setiap web browser juga mempunyai fitur-fitur
berbeda agar mempunyai ciri khas didalamnya. Berikut ini adalah Fitur-
fitur pada Google Chrome :
1) Menyimpan riwayat situs yang telah kita kunjungi.
2) Menyimpan riwayat data yang telah kita download.
3) Dapat mengelola Bookmark untuk menyimpan situs yang kita sukai
dengan baik.
4) Mempunyai mode Incognito atau penelusuran situs tanpa
meninggalkan jejak.
 5) Adanya Bandwidth Saving yang dapat menghemat data.
6) Adanya Task Manager untuk mengelola program, seperti
memeriksa memori dan menghentikan pemasangan installasi
didalamnya.
7) Adanya Omnibox atau pencarian memori.
8) Terjemahan pada Google Chrome mendukung lebih dari 50 bahasa.
9) Multi Profil jika kita mempunyai beberapa akun Google.
10) Adanya pin tab untuk menandai beberapa tab yang ingin kita
utamakan dan akan bergeser ke paling kiri.
11) Berfungsi penuh untuk jaringan, baik itu internet dan intranet.

6. Python

Gambar 2.6 Python

Python adalah bahasa pemrograman tujuan umum yang ditafsirkan,

tingkat tinggi. Dibuat oleh Guido van Rossum dan pertama kali dirilis
pada tahun 1991, filosofi desain Python menekankan keterbacaan kode
dengan penggunaan spasi putih yang signifikan.

D. Tahapan Pembuatan Produk

Tahapan produk dimulai dari pembuatan front-end sampai back-end.
Untuk front-end atau halaman depan kita menggunakan framework css
Bootstraps dan PHP dan untuk back-end yang menjalankan fungsi-fungsi
nya menggunakan pemrograman python.
1. Siapkan terlebih dahulu assets atau bahan untuk membuat aplikasinya,
bisa download melalui link berikut :
https://drive.google.com/drive/folders/1xvcGKi_MXYLhnni54JV-
g1rMSgN-cW8Y?usp=sharing.
2. Membuat Halaman Utama
Buat file php dengan nama index.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<title>Seena Tech | Social Distancing Detector</title>

<meta content="" name="description">
<meta content="" name="keywords">

<!-- Favicons -->S

<link href=".assets/img/seena.png" rel="icon">

<!-- Google Fonts -->

<link href="https://fonts.googleapis.com/css?
family=Open+Sans:300,300i,400,400i,600, 600i,700,700i|
Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,30
0i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

<!-- Vendor CSS Files -->

<link href=".assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href=".assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href=".assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href=".assets/vendor/animate.css/animate.min.css" rel="stylesheet">
<link href=".assets/vendor/owl.carousel/assets/owl.carousel.min.css"
rel="stylesheet">
<link href=".assets/vendor/venobox/venobox.css" rel="stylesheet">

<!-- Template Main CSS File -->

<link href=".assets/css/style.css" rel="stylesheet">

<!-- =======================================================
* Template Name: Green - v2.3.0
* Template URL: https://bootstrapmade.com/green-free-one-page-bootstrap-
template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>

<!-- ======= Top Bar ======= -->

<div id="topbar" class="d-none d-lg-flex align-items-center fixed-top">
<div class="container d-flex">
<div class="contact-info mr-auto">
<i class="icofont-envelope"></i> <a
href="mailto:contact@example.com">SeenaTech7@gmail.com</a>
<i class="icofont-phone"></i> +628511152221
</div>
<div class="social-links">
<!--SocLinks-->
</div>
</div>
</div>

<!-- ======= Header ======= -->

<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">

<h1 class="logo mr-auto"><a href="index.html"><img

src=".assets/img/logo.png"></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <a href="index.html" class="logo mr-auto"><img
src=".assets/img/logo.png" alt="" class="img-fluid"></a>-->

</div>
</header><!-- End Header -->

<!-- ======= Hero Section ======= -->

<section id="hero">
<div id="heroCarousel" class="carousel slide carousel-fade" data-
ride="carousel">

<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->

<div class="carousel-item active" style="background-image:
url(.assets/img/bg.jpg)">
 <div class="carousel-container">
<div class="container">
<h2 class="animate animated animate fadeInDown">Jaga
<span>Jarak!</span></h2>
<p class="animate__animated animate fadeInUp">Tetap disiplin dengan
menjalankan protokol kesehatan yang baik dan benar.</p>
<a href="?menu=run" class="btn-get-started animate animated
animate fadeInUp scrollto">Start</a>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Hero -->

<main id="main">

<!-- ======= Featured Services Section ======= -->

<section id="featured-services" class="featured-services section-bg">
<div class="container">

<div class="row no-gutters">

<div class="col-lg-4 col-md-6">
<div class="icon-box">
<div class="icon"><i class="icofont-image"></i></div>
<h4 class="title"><a href="">Capture</a></h4>
<p class="description">Pertama adalah pengambilan gambar atau video di
khalayak ramai untuk dijadikan bahan sebagai percobaan deteksi Social
Distancing.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="icon-box">
<div class="icon"><i class="icofont-computer"></i></div>
<h4 class="title"><a href="">Start</a></h4>
<p class="description">Kedua adalah menjalankan aplikasi nya dengan
mengklik tombol Start diatas</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="icon-box">
 <div class="icon"><i class="icofont-tasks-alt"></i></div>
<h4 class="title"><a href="">Report</a></h4>
<p class="description">Report ini adalah hasil dari video yang telah
diekstrak oleh aplikasi dan akan menghasilkan laporan berupa video dengan
beberapa keterangan didalamnya.</p>
</div>
</div>
</div>

<?php
if(isset($_GET['menu'])){
$menu = $_GET['menu'];
}else{
$menu = " ";
}
switch ($menu) {
case 'run':
include("run.php");
break;

}
?>

</div>
</section><!-- End Featured Services Section -->

</main><!-- End #main -->

<!-- ======= Footer ======= -->

<footer id="footer">
<div class="container">
<h3>SEENA TECH</h3>
<p>Dalam kondisi pandemi ini kita dituntut untuk tetap kreatif mesik banyak
sekali halangan apapun yang datang, dan kami seena tech menemukan suatu ide
baru untuk diterapkan. Ini adalah sebuah aplikasi social distancing untuk melihat
mana yang menjaga jarak mana yang tidak dan bertujuan untuk lebih disiplin
dalam penerapan 3M, Menjaga jarak - Mencucui tangan - Memakai masker.</p>
<div class="copyright">
&copy; Copyright <strong><span>Seena Tech</span></strong>. All Rights
Reserved
</div>
 <div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form:
https://bootstrapmade.com/green-free-one-page-bootstrap-template/ -->
Designed by <a href="https://bootstrapmade.com/">SeenaTECH</a>
</div>
</div>
</footer><!-- End Footer -->

<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

<!-- Vendor JS Files -->

<script src=".assets/vendor/jquery/jquery.min.js"></script>
<script src=".assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src=".assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src=".assets/vendor/php-email-form/validate.js"></script>
<script src=".assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src=".assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src=".assets/vendor/venobox/venobox.min.js"></script>

<!-- Template Main JS File -->

<script src=".assets/js/main.js"></script>

</body>

</html>
Tampilan :

Gambar 2.7 Tampilan Menu Beranda

3. Membuat File Run Php

Buat file dengan nama run.php
<?php
$run=exec('c:\WINDOWS\system32\cmd.exe /c START run.bat'); if($run)
{
?>
<script type="text/javascript"> document.location='index.php?
menu=run';
</script>

<?php

}else{

?>
<script type="text/javascript">
document.location='index.php';
</script>

<?php
}

?>
4. Membuat file Run Bat
Buat file dengan nama run.bat
@ECHO OFF
python sd.py
PAUSE

5. Membuat File Python

Buat file dengan nama sd.py
from config import social_distancing_config as config
from config import seena_boxes
from config.detection import detect_people
from scipy.spatial import distance as dist
import random
import string
import sys
import numpy as np
import imutils
import cv2
import os

def pilih():
masukan
=
seena_boxes.fileopenbox(ico="C:\xampp\htdocs\SOCDIS\.assets\seena.ico",
msg="Pilih Video", title="Social Distancing Detector", default="*.mp4",
filetypes=["*.mp4"], multiple=False)

return masukan

def getname():
entry1 =
seena_boxes.enterseena(ico="C:\xampp\htdocs\SOCDIS\.assets\seena.ico",
msg="Nama file output yang diinginkan", title="Social Distancing Detector")
nama = entry1
form = ".avi"
output = os.path.join('output/', nama + form)

return output

def proses():
masukan = pilih()
output = getname()
labelsPath = os.path.sep.join([config.MODEL_PATH, r'coco.names'])
LABELS = open(labelsPath).read().strip().split("\n")

weightsPath = os.path.sep.join([config.MODEL_PATH, "yolov3.weights"])

configPath = os.path.sep.join([config.MODEL_PATH, "yolov3.cfg"])

net = cv2.dnn.readNetFromDarknet(configPath, weightsPath)

if config.USE_GPU:
net.setPreferableBackend(cv2.dnn.DNN_BACKEND_CUDA)
net.setPreferableTarget(cv2.dnn.DNN_TARGET_CUDA)

ln = net.getLayerNames()
ln = [ln[i[0] - 1] for i in net.getUnconnectedOutLayers()]

vs = cv2.VideoCapture(masukan)
writer = None

while True:
(grabbed, frame) = vs.read()

if not grabbed:
break
frame = imutils.resize(frame, width=700)
results = detect_people(frame, net, ln,
personIdx=LABELS.index("person"))

violate = set()
people = set()
safe = set()

if len(results) >= 2:
centroids = np.array([r[2] for r in results])
D = dist.cdist(centroids, centroids, metric="euclidean")

for i in range(0, D.shape[0]):

for j in range(i + 1, D.shape[1]):
if D[i, j] < config.MIN_DISTANCE:
violate.add(i)
violate.add(j)
else:
 people.add(i)
people.add(j)

for (i, (prob, bbox, centroid)) in enumerate(results):

(startX, startY, endX, endY) = bbox
(cX, cY) = centroid
color = (0, 255, 0)

if i in violate:
color = (0, 0, 255)

cv2.rectangle(frame, (startX, startY), (endX, endY), color, 2)

cv2.circle(frame, (cX, cY), 5, color, 1)
safe = people - violate

text = "Tidak Aman : {}".format(len(violate))

cv2.putText(frame, text, (10, frame.shape[0] - 25),
cv2.FONT_HERSHEY_SIMPLEX, 0.60, (0, 20, 231), 2)

text = "Aman : {}".format(len(safe))

cv2.putText(frame, text, (10, frame.shape[0] - 50),
cv2.FONT_HERSHEY_SIMPLEX, 0.60, (0, 255, 0), 2)
text = "Total Orang : {}".format(len(people))
cv2.putText(frame, text, (10, frame.shape[0] - 75),
cv2.FONT_HERSHEY_SIMPLEX, 0.60, (185, 118, 0), 2)

cv2.imshow("Social Distancing Detector", frame)

key = cv2.waitKey(1) & 0xFF

if key == ord("q"):
break

if output != "" and writer is None:

fourcc = cv2.VideoWriter_fourcc(*"MJPG")
writer = cv2.VideoWriter(output, fourcc, 25,
(frame.shape[1], frame.shape[0]), True)

if writer is not None:

writer.write(frame)

proses()
E. Cara Penggunaan Produk
1. Cara Penggunaan
a. Pertama, user membuka aplikasi xampp yang telah diinstal. Lalu
aktifkan Apache dan Mysql.

Gambar 2.8 Xampp setting

b. Kedua, buka google chrome dan ketik localhost/socdis.

Gambar 2.9 Localhost Pada Browser

c. Ketiga, setelah mengetikkan alamat user akan diarahkan pada halaman
utama aplikasi. Lalu Klik tombol start untuk memulai aplikasi Social
Distancing Detector.
 Gambar 2.10 Halaman Utama

d. Setelah itu, user akan diarahkan untuk memilih file video yang akan di
deteksi oleh aplikasi.

Gambar 2.11 Menu Deteksi Video

e. User me-rename file video tersebut dengan nama bebas.

Gambar 2.12 Case Video yang akan di identifikasi

f. Video akan di run dan dideteksi oleh aplikasi, dan membutuhkan

waktu beberapa menit untuk menghasilkan output akhir.

Gambar 2.13 Video yang di deteksi

g. Jika video tersebut sudah selesai diproses oleh aplikasi maka video tersebut
akan dipindahkan ke folder output didalam aplikasi sebagai hasil akhir.

Gambar 2.14 Case Video yang sudah di identifikasi

h. Silakan buka file video yang telah diproses tadi difolder output. Hasilnya
ditandai dengan kotak warna merah dan hijau dimana untuk warna merah
berarti orang tersebut berdekatan dan tidak menjaga jarak, dan untuk
warna hijau berarti orang tersebut aman dan mengaplikasikan social
distancing.

Gambar 2.15 Case Video hasil identifikasi