DEV Community

loading...
Cover image for Introducing Handsfree.js - Integrate hand, face, and pose gestures to your frontend πŸ–πŸ‘€πŸ–

Introducing Handsfree.js - Integrate hand, face, and pose gestures to your frontend πŸ–πŸ‘€πŸ–

Oz Ramos on January 02, 2021

Hello and thank you for checking out this introductory post, I'm so excited to share Handsfree.js with you! Handsfree.js is a client side library...
pic
Editor guide
Collapse
shaileshcodes profile image
Shailesh Vasandani

Amazing project! Super excited to see how this can be used for accessibility β€” I see it opening up entirely new avenues of interacting with the web, especially if paired with something like VR. The possibilities are endless!

Thanks so much for sharing!

Collapse
midiblocks profile image
Oz Ramos Author

Thank you! Accessibility is actually what initially inspired this project. There are many nights when I have a hard time falling asleep because of all the possibilities lol and by releasing this as a library and browser extension I'm hoping to provide the tools to help others explore them!

Collapse
braydentw profile image
Brayden W ⚑️ • Edited

Looks awesome! and a bit familiar... πŸ˜‰

stark gif

🀯

Collapse
midiblocks profile image
Oz Ramos Author

100% what I think about every time I sit down to code haha

Collapse
braydentw profile image
Brayden W ⚑️

πŸ˜‚πŸ˜‚

Collapse
aidenybai profile image
Aiden Bai

I tried out handsfree around dec of 2019. Easily one of the coolest js libraries out there!

Collapse
midiblocks profile image
Oz Ramos Author

Oh thank you so much! I ended up taking a break for almost a year πŸ˜… but the break has allowed me to recharge and take this in a new and exciting direction

Now I'm solely focused on the journey and not the destination, and I've been having sooo much fun making it! Thanks for the comment :)

Collapse
tyler320sc profile image
Tyler Carroll

I’m a noob who will be building a portfolio in the next few months and I would LOVE to have a project in there made with handsfree.js! However, idk what would be plausible for someone with limited experience to make. Any ideas? Amazing lib btw!!!

Collapse
midiblocks profile image
Oz Ramos Author

Hi that would be amazing and also great question! The thing is there are so many applications so it's hard to suggest something πŸ˜… how I go about it is to just making something as normal (where you can use with mouse and keyboard) and then make it handsfree...my next batch of plugins will emit mouse and keyboard events, so you wouldn't even really need to do much with Handsfree.js other than to listen to the events in your app as you would any other mouse or keyboard event

I know how vague that response was πŸ˜… I'll end my next series of posts with an "Ideas" section to help you pick a direction to try and I'll include more boilerplate code and samples.

Thanks for the question and have fun with your portfolio!

Collapse
thomasbnt profile image
Thomas Bnt

Badass 🀩🀩🀩

Collapse
midiblocks profile image
Oz Ramos Author

Thanks! I have lists upon lists for follow up tutorials, can't wait!

Collapse
thomasbnt profile image
Thomas Bnt

Greaat ! You can notify me if you want when you posted a new tutorial πŸ˜ƒ

Thread Thread
midiblocks profile image
Oz Ramos Author

That's super encouraging, thank you! I'll make a few first and then ping ya πŸ™

Collapse
akbartus profile image
akbartus

Oz thank you for great solution for tracking. I wonder is it also suitable for mobile based experiences. I already tried MediaPipe hands before and it was not mobile friendly meaning it was supporting well only latest models of phones with bigger Ram. On older devices there was lag. Is handsfree good also for mobile web (Chrome, Mozilla)?

Collapse
tqbit profile image
tq-bit

That's easily one of the coolest project I've ever seen.

Collapse
jenlooper profile image
Jen Looper

wow, this is incredible. Looking to do some hand shadows with this, great that you can have two hands showing!

Collapse
sirseanofloxley profile image
Sean Allin Newell

WOWOW!! Big major stonks coming your way.

Collapse
chiubaca profile image
Alex Chiu

This is amazing!!!

Collapse
naowal profile image
Naowal Siripatana

Awesome, It​ can.expand to.many thing.

Collapse
nikhilmwarrier profile image
Nikhil M Warrier • Edited

Badass! Really cool! I am pretty darn sure it will be the jQuery of the AR/VR web...

Collapse
jaketracey profile image
Jake Tracey

This is incredible! Going to do some proof of concepts for users with limited mobility using Face pointer!

Collapse
midiblocks profile image
Oz Ramos Author

Thank you and please do! Here is the documentation for my current implementation of the Face Pointer along with the different configs. At the bottom is the current code for it if you'd like to see how it's done: handsfree.js.org/ref/plugin/facePo...

I'll be re-implementing the automatic face pointer calibrator from the last version soon. By default it works best when the webcam is directly in front of you but the calibrator allows it to be used from different positions (ex: when the webcam is attached to the arm of a wheelchair).

Collapse
gorfadvijay profile image
Vijay Gorfad

I tried out handsfree today. Easily one of the coolest js libraries out there!

Collapse
midiblocks profile image
Oz Ramos Author

Thank you for trying it out πŸ™Œ

Collapse
flyingduck92 profile image
Sekti

Awesome man.

Collapse
martineboh profile image
Martin Eboh

Simply...Brilliance...best ever js library since 1998!

Collapse
midiblocks profile image
Oz Ramos Author • Edited

haha thank you! the docs are designed to look like a Windows 98 app so I love this comment so much πŸ’œ (I'm using 98.css)

Collapse
benjaminguma profile image
benjaminguma

Ohh woww nice

Collapse
iliark82 profile image
iliark82

Sooo Cool!

Collapse
slaven3kopic profile image
Slaven Kopic

Very cool!!

Collapse
houdinii profile image
Brian B.

Oh, man, you just destroyed this week's productivity. This is the absolute coolest project I've seen in the past year. I can't wait to play!

Collapse
j94 profile image
j-94

The number of tabs im going to accidentally open when in use this on p**hub.com....

Collapse
lallenfrancisl profile image
Allen Francis

Wooo...the demos are next level

Collapse
mayankkalbhor profile image
Mayank Kalbhor

Brilliant !! This is next generation thing.

Collapse
midiblocks profile image
Oz Ramos Author

Aaah thank you! I'm so excited to be sharing this!

Collapse
ahmedghazi profile image
Ahmed

Funny, i used something similar to track emotions and build a smile gate on my website. It is called clmtrackr.js.
You can see the result here ahmedghazi.com

Collapse
escornwell profile image
Eric Cornwell

Very cool. Possible post edit: in the code sample for advancedLogger should the last function be "onDisabled" or something like that?

Collapse
beginnercoder17 profile image
BeginnerCoder17

WOW! clap, clap, clap