https://github.com/badboysm890/airdrawjs

Draw on Screen using Webcam , Built using JS No GPU or Pre-request needed. Easy to integrate on your own apps.
https://github.com/badboysm890/airdrawjs

augumented-reality handtracking javascript webapp

Last synced: 7 months ago
JSON representation

Draw on Screen using Webcam , Built using JS No GPU or Pre-request needed. Easy to integrate on your own apps.

• Host: GitHub
• URL: https://github.com/badboysm890/airdrawjs
• Owner: badboysm890
• License: gpl-3.0
• Created: 2021-06-19T15:55:56.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-06-27T11:10:19.000Z (over 4 years ago)
• Last Synced: 2024-05-08T00:17:33.696Z (over 1 year ago)
• Topics: augumented-reality, handtracking, javascript, webapp
• Language: JavaScript
• Homepage:
• Size: 7.06 MB
• Stars: 16
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![AirDraw.js](https://github.com/badboysm890/AirDrawJS/blob/main/rsz_airdraw_js.png)

Real-time Writing with fingers on WebCamera Screen 

 

> keywords: Computer Vision, Deeplearning, Hand tracking

## Warning ⚠️

+ Live Demo : https://badboysm890.github.io/AirDrawJS/

+ Demo Video: https://vimeo.com/565236695

⚠️Use Chrome or Chromium till i fix or use this https://github.com/badboysm890/AirDrawJS/tree/6ac0358dc4c69f4695cfd8c95be39c87c276bc9f Commit to clone⚠️

##Change Log

+ verison 1.0

Just Handtracking and Drawing Enabled

If needed (https://github.com/badboysm890/AirDrawJS/tree/6ac0358dc4c69f4695cfd8c95be39c87c276bc9f)

+ Version 1.1

Background Removal Enabled

## About 

Really Guys ? Do you care ?

If you care give a Star !!

##Here is what you need 👇

+ Clone it

+ Open it in vscode

+ https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Install this and Click 

![click here](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-statusbar-3.jpg)

+ and it will automatically work !!

## Working

It works and will support this project for awhile for sure ...

![name-of-you-image](https://github.com/badboysm890/AirDrawJS/blob/main/Screenshot%202021-06-19%20at%2021-51-00%20Screenshot.png)

## Whats the use of this Project ?

+ Webinar or Meet Integration

+ Online Classes

+ Apps using AR

+ Whatever the f**k you want

## How was it done ?

![handtracking](https://github.com/badboysm890/ML_Scratch_Surface/raw/master/Screenshot%202021-06-19%20at%2021-34-30%20hand_tracking_3d_android_gpu%20gif%20(GIF%20Image%2C%20300%20%C3%97%20564%20pixels).png)

+ Thanks to mediaPipe The had a handtracking model for JS 

+ Used the handtracking to make sure we had coordinates

+ Used the coordinate distance to make a pattern and used as gesture

+ Finally the hard part we placed two canvas over another to while on makes detection and other makes drawing 

+ Simple as that

## Future Works

+ NPM package may be ?

+ And improved Gesture or Option to Choose Gesture

## GIVE A STAR PLEASE 😂