Apa itu OpenCV? Wikipedia menyatakan bahwa OpenCV (Open Source Computer Vision Library) adalah sebuah pustaka perangkat lunak yang ditujukan untuk pengolahan citra dinamis secara real-time. OpenCV dapat melakukan tugas-tugas seperti object detection, shape analysis, face detection, face recognition dan lain sebagainya.
Apa itu Flask? Flask adalah sebuah framework disebut juga sebagai microframework berbahasa pemrograman Python yang memungkinkan kita untuk mengembangkan aplikasi berbasis web dengan mudah.
Di tutorial kali ini saya akan menggunakan Pycharm IDE untuk membuat project aplikasi face detection sederhana yang berjalan di web browser. Dalam Pycharm IDE ini nantinya saya akan menginstall OpenCV dan Flask. Pycharm yang saya gunakan dalam tutorial ini adalah versi 2022.1 dalam Operating System Windows 10. Bagi teman-teman yang mau mempraktikkan tutorial pembuatan aplikasi ini, silahkan install Pycharm terlebih dahulu. Saya sudah buatkan panduan instalasinya di tutorial "Cara Instal Pycharm di Windows 10".
Syarat lain untuk dapat mempraktikkan tutorial ini PC teman-teman harus dilengkapi webcam !
1. Create Project
Jika Pycharm IDE sudah terinstal, silahkan buka Pycharm untuk memulai project baru kita. Pada textbox Location ketikkan nama project yang akan sekaligus membuat folder kerja baru sebagai folder project face detection ini. Project ini saya beri nama FlaskOpenCV_FaceDetection, untuk Create main.py tidak saya check dan untuk pengaturan environment-nya saya atur sesuai defaultnya saja. Kemudian klik tombol Create.
Tampilan project FlaskOpenCV_FaceDetection di Pycharm.
2. Install Package
Pilih Setting pada menu File untuk menampilkan jendela Setting. Kemudian klik menu Python Interpreter.
Berikutnya saya akan menambahkan package OpenCV dan Flask ke dalam project. Caranya dengan mengklik icon plus pada halaman menu Python Interpreter.
2.1 Install opencv-python
Proses instalasi package python-opencv
Proses instalasi selesai
2.2 Install Flask
Lakukan langkah yang sama seperti pada install package python-opencv.
Berikut hasil akhir dari instalasi package OpenCV Python dan Flask. Klik tombol Ok untuk menutup jendela Setting dan kembali ke tampilan menu utama Project.
3. Membuat Folder Untuk File-file Pendukung Project
Berikutnya saya akan membuat 3 folder baru di dalam folder root Project, yaitu folder resources, static dan templates. Klik kanan pada folder FlaskOpenCV_FaceDetection dan arahkan mouse ke New Directory.
Akan tampil pop up New Directory untuk mengisi nama directory. Isikan resources pada text box kemudian Enter.
Lakukan hal yang sama untuk membuat directory static dan templates, sehingga susunan folder-folder tersebut menjadi seperti berikut:
4. Download File-file Pendukung
File-file pendukung project ini ada 2 file yaitu haarcascade_frontalface_default.xml dan static_file.zip. File haarcascade_frontalface_default.xml merupakan file classifier untuk face detection dan file static_file.zip berisi file css, javascript dan image untuk menghias tampilan halaman web.
Berikut link downloadnya:
Setelah berhasil didownload, copy file haarcascade_frontalface_default.xml kemudian paste ke dalam folder resources di pycharm. Extract file static_files.zip, copy 3 folder di dalamnya yaitu folder css, img dan js ke dalam folder static di pycharm.
Folder resources dan static di Pycharm
5. Mainkan Kodingannya
5.1 index.html
Create file index.html di dalam directory templates.
Pada pop up text box ketikkan index, kemudian Enter.
Dobel klik file index.html yang baru saja kita buat untuk kita lakukan pengkodingan. Copy paste script kode di bawah ini:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<title>Flask OpenCV Face Detection</title>
</head>
<body>
<nav class="navbar navbar-expand-lg py-2 navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand">
<!-- Logo Image -->
<img src="{{ url_for('static', filename='img/logo.png') }}" width="45" alt="" class="d-inline-block align-middle mr-2">
<!-- Logo Text -->
<span class="font-weight-bold">Flask OpenCV Face Detection</span>
</a>
</div>
</nav>
<section class="py-1">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<br>
<img src="{{ url_for('video_feed') }}" width="100%" class="img-thumbnail">
</div>
</div>
</section>
</body>
</html>
5.2 app.py
Create file python dengan nama app.py di root directory.
Pada pop up text box ketikkan app, kemudian Enter.
Dobel klik file app.py yang baru saja kita buat untuk kita lakukan pengkodingan. Copy paste script kode di bawah ini:
from flask import Flask, render_template, Response
import cv2
face_cascade = cv2.CascadeClassifier("C:/Users/Erik/PycharmProjects/FlaskOpenCV_FaceDetection/resources/haarcascade_frontalface_default.xml")
app = Flask(__name__)
def faceDetection(): # generate frame by frame from camera
cap = cv2.VideoCapture(0) # use 0 for web camera
while True:
success, img = cap.read()
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
faces = face_cascade.detectMultiScale(gray,1.1, 4)
for (x, y, w, h) in faces:
cv2.rectangle(img, (x, y), (x+w, y+h), (255, 0, 0), 2)
frame = cv2.imencode('.jpg', img)[1].tobytes()
yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
key = cv2.waitKey(1)
if key == 27:
break
@app.route('/video_feed')
def video_feed():
#Video streaming route. Put this in the src attribute of an img tag
return Response(faceDetection(), mimetype='multipart/x-mixed-replace; boundary=frame')
@app.route('/')
def index():
"""Video streaming home page."""
return render_template('index.html')
if __name__ == '__main__':
# app.run(debug=True)
app.run(host='127.0.0.1', port=5000, debug=True)
6. Running Program
Setelah selesai mengikuti langkah-langkah di atas, kini saatnya menjalankan aplikasi face detection kita. Klik kanan pada file app.py kemudian pilih Debug App (boleh juga pilih Run App).
Tunggu beberapa saat sampai tampil jendela Console di bagian bawah jendela Pycharm.
Klik URL yang tampil di jendela Console : http://127.0.0.1:5000
Jika tidak ada error maka Face Detection app akan running id browser.
