{"id":26563966,"url":"https://github.com/badboysm890/airdrawjs","last_synced_at":"2025-03-22T16:18:52.256Z","repository":{"id":46143006,"uuid":"378450256","full_name":"badboysm890/AirDrawJS","owner":"badboysm890","description":"Draw on Screen using Webcam , Built using JS No GPU or Pre-request needed. Easy to integrate on your own apps.","archived":false,"fork":false,"pushed_at":"2021-06-27T11:10:19.000Z","size":7406,"stargazers_count":16,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-05-08T00:17:33.696Z","etag":null,"topics":["augumented-reality","handtracking","javascript","webapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/badboysm890.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-19T15:55:56.000Z","updated_at":"2024-04-18T04:14:02.000Z","dependencies_parsed_at":"2022-09-21T16:53:05.661Z","dependency_job_id":null,"html_url":"https://github.com/badboysm890/AirDrawJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badboysm890%2FAirDrawJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badboysm890%2FAirDrawJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badboysm890%2FAirDrawJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badboysm890%2FAirDrawJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/badboysm890","download_url":"https://codeload.github.com/badboysm890/AirDrawJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244982053,"owners_count":20542301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["augumented-reality","handtracking","javascript","webapp"],"created_at":"2025-03-22T16:18:51.550Z","updated_at":"2025-03-22T16:18:52.246Z","avatar_url":"https://github.com/badboysm890.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![AirDraw.js](https://github.com/badboysm890/AirDrawJS/blob/main/rsz_airdraw_js.png)\r\n\r\nReal-time Writing with fingers on WebCamera Screen \r\n \r\n\u003e keywords: Computer Vision, Deeplearning, Hand tracking\r\n\r\n## Warning ⚠️\r\n\r\n+ Live Demo : https://badboysm890.github.io/AirDrawJS/\r\n+ Demo Video: https://vimeo.com/565236695\r\n\r\n⚠️Use Chrome or Chromium till i fix or use this https://github.com/badboysm890/AirDrawJS/tree/6ac0358dc4c69f4695cfd8c95be39c87c276bc9f Commit to clone⚠️\r\n\r\n##Change Log\r\n\r\n+ verison 1.0\r\nJust Handtracking and Drawing Enabled\r\nIf needed (https://github.com/badboysm890/AirDrawJS/tree/6ac0358dc4c69f4695cfd8c95be39c87c276bc9f)\r\n\r\n+ Version 1.1\r\nBackground Removal Enabled\r\n\r\n\r\n## About \r\n\r\nReally Guys ? Do you care ?\r\n\r\nIf you care give a Star !!\r\n\r\n##Here is what you need 👇\r\n\r\n+ Clone it\r\n+ Open it in vscode\r\n+ https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Install this and Click \r\n\r\n![click here](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-statusbar-3.jpg)\r\n\r\n+ and it will automatically work !!\r\n\r\n## Working\r\n\r\nIt works and will support this project for awhile for sure ...\r\n\r\n![name-of-you-image](https://github.com/badboysm890/AirDrawJS/blob/main/Screenshot%202021-06-19%20at%2021-51-00%20Screenshot.png)\r\n\r\n## Whats the use of this Project ?\r\n\r\n+ Webinar or Meet Integration\r\n+ Online Classes\r\n+ Apps using AR\r\n+ Whatever the f**k you want\r\n\r\n\r\n## How was it done ?\r\n\r\n![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)\r\n\r\n+ Thanks to mediaPipe The had a handtracking model for JS \r\n+ Used the handtracking to make sure we had coordinates\r\n+ Used the coordinate distance to make a pattern and used as gesture\r\n+ Finally the hard part we placed two canvas over another to while on makes detection and other makes drawing \r\n+ Simple as that\r\n\r\n\r\n## Future Works\r\n\r\n+ NPM package may be ?\r\n+ And improved Gesture or Option to Choose Gesture\r\n\r\n\r\n## GIVE A STAR PLEASE 😂\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadboysm890%2Fairdrawjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbadboysm890%2Fairdrawjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadboysm890%2Fairdrawjs/lists"}