Deteksi Jari Tangan Real-Time Menggunakan MediaPipe, JavaScript & Tailwind CSS

Deteksi Jari Tangan Real-Time Menggunakan MediaPipe, JavaScript & Tailwind CSS

By. Iyon Manakarra // Mekatronika Manakarra

Perkembangan teknologi Artificial Intelligence (AI) dan Computer Vision saat ini sudah semakin pesat. Menariknya, kita tidak lagi harus selalu bergantung pada bahasa pemrograman Python atau server berdaya tinggi hanya untuk menjalankan model AI.

Lewat artikel ini, kita akan belajar cara membuat aplikasi Pendeteksi Jari Tangan Real-Time yang modern, interaktif, dan berjalan langsung di browser web hanya dengan modal HTML, Tailwind CSS, JavaScript, dan pustaka AI buatan Google bernama MediaPipe.

Subscribe "MEKATRONIKA MANAKARRA"

Fitur Utama Aplikasi

1. Deteksi Real-Time Berbasis AI: Menggunakan pustaka MediaPipe Hands buatan Google.

2. Detail Status Per Jari: Menampilkan status spesifik (Ibu Jari, Telunjuk, Tengah, Manis, Kelingking) apakah sedang Terangkat atau Tertutup.

3. Deteksi Sisi Tangan: Otomatis mengenali apakah tangan yang tampil adalah tangan Kanan atau Kiri.

4. Indikator FPS & Toggle Kamera: Dilengkapi penghitung FPS real-time dan tombol ON/OFF kamera.

5. Tampilan Modern & Responsif: Menggunakan antarmuka tema gelap (dark mode) berbasi Tailwind CSS.

Apa itu MediaPipe dan JavaScript?

Sebelum masuk ke teknis pembuatan, mari kita pahami dua komponen utama yang membuat proyek ini bekerja:

• MediaPipe (Google): Framework pembelajaran mesin (machine learning) buatan Google yang dirancang khusus untuk memproses data visual secara cepat (real-time). Pustaka ini mampu memetakan 21 titik koordinat landmark pada tangan manusia.

• JavaScript & HTML: Kombinasi bahasa pemrograman web yang bertugas mengakses kamera pengguna, mengirimkan cuplikan video ke MediaPipe, menghitung logika jari mana yang terbuka, dan memperbarui tampilan UI secara dinamis.

Bagaimanakah Sistem Menghitung Jari?

MediaPipe membaca tangan dan memberinya 21 titik koordinat (X, Y, Z).

Logika perhitungan pada kode ini bekerja sebagai berikut:

• 4 Jari Utama (Telunjuk, Tengah, Manis, Kelingking): Membandingkan koordinat Y antara ujung jari (tip) dengan sendi di bawahnya (PIP). Jika koordinat Y ujung jari lebih kecil (posisi di layar lebih tinggi), maka jari dianggap Terangkat.

• Ibu Jari (Thumb): Menggunakan perbandingan horizontal (koordinat X) yang disesuaikan dengan posisi Tangan Kanan atau Tangan Kiri (Handedness).

Kode Program Lengkap

Kamu bisa membuat satu berkas bernama index.html dan memasukkan seluruh kode di bawah ini:

== Link Download "Klik disini" ==

Cara Menjalankan Proyek

1. Simpan File: Buat berkas baru di komputer kamu, beri nama index.html, lalu tempelkan kode di atas.

2. Buka di Browser: Klik dua kali berkas index.html tersebut untuk membukanya di browser (Chrome, Edge, atau Firefox).

3. Izinkan Akses Kamera: Ketika muncul jendela pop-up pemberitahuan dari browser, pilih Allow / Izinkan untuk memberi akses kamera web.

4. 
   
   
   

5. Uji Coba: Arahkan tangan kamu ke kamera dan cobalah menekuk atau membuka jari-jarimu!

Kesimpulan

Dengan mengombinasikan MediaPipe dan JavaScript, kita bisa membangun aplikasi Hand Tracking interaktif langsung di browser tanpa perlu instalasi perangkat lunak atau server backend yang rumit. Proyek ini sangat cocok dijadikan dasar untuk pengembangan aplikasi lain, seperti game berbasis gestur tangan, navigasi web bebas sentuhan (touchless interface), atau pengenal bahasa isyarat.

Desiminate Media Ajar Embedded System Programming Menggunakan Trainer dan E-Jobsheet Berbasis Arduino Nano di SMK

Media Ajar Embedded System Programming Menggunakan Trainer dan E-Jobsheet Berbasis Arduino Nano di SMK
By. Wiyono (Iyon Manakarra)

Pengembangan media pembelajaran merupakan salah satu upaya strategis untuk meningkatkan kualitas pembelajaran kejuruan, khususnya pada mata pelajaran Embedded System Programming di SMK Jurusan Teknik Elektronika Industri. Berdasarkan hasil penelitian pengembangan dengan model 4-D (Define, Design, Develop, dan Disseminate), pada Program Pascasarjana PPS-UNM Makassar Tahun 2026, telah dihasilkan Trainer Embedded System Programming berbasis Arduino Nano yang terintegrasi dengan E-Jobsheet digital. Media ini dirancang untuk menjawab permasalahan pembelajaran praktik, seperti keterbatasan trainer, penggunaan jobsheet konvensional, serta rendahnya keterlibatan siswa dalam praktik pemrograman mikrokontroler. Integrasi trainer fisik dan E-Jobsheet digital diharapkan mampu menjembatani kesenjangan antara teori dan praktik secara lebih kontekstual.

 

E-Jobsheet yang dikembangkan berbasis Google Sites sehingga mudah diakses melalui berbagai perangkat, baik laptop maupun smartphone. Di dalamnya tersedia materi ringkas, panduan praktik langkah demi langkah, gambar rangkaian, contoh kode program, serta evaluasi interaktif yang mendukung pembelajaran mandiri dan berbasis proyek. Hasil uji kelayakan menunjukkan bahwa media ini berada pada kategori Layak hingga Sangat Layak, sedangkan hasil uji kepraktisan pada siswa dan guru menunjukkan kategori Sangat Praktis. Temuan tersebut mengindikasikan bahwa E-Jobsheet dan Trainer tidak hanya mudah digunakan, tetapi juga efektif dalam mendukung pencapaian capaian pembelajaran pada elemen pemrograman sistem embedded, khususnya dalam penerapan input/output digital, analog, dan komunikasi serial.

Sebagai bagian dari tahap penyebaran (disseminate), E-Jobsheet ini dibagikan secara terbuka agar dapat dimanfaatkan oleh guru dan siswa SMK secara lebih luas sebagai referensi pembelajaran praktik pemrograman Arduino. Guru dapat mengadopsi media ini sebagai alternatif bahan ajar berbasis proyek, sementara siswa dapat menggunakannya untuk latihan mandiri di luar jam pelajaran. E-Jobsheet dapat diakses melalui tautan berikut:

👉 https://sites.google.com/guru.smk.belajar.id/e-jobsheet-arduino-programming

Diharapkan media pembelajaran ini dapat berkontribusi dalam meningkatkan kualitas pembelajaran vokasi, memperkuat keterampilan praktik siswa, serta mendukung implementasi Kurikulum Merdeka yang relevan dengan kebutuhan dunia industri.

LINK PRODUK

Salam:
Iyon Manakarra