The latest articles on DEV Community by Benson Ruan (@bensonruan). https://dev.to/bensonruan https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1125726%2F449027be-a378-4ae0-b053-bb94fc2f30b1.jpeg https://dev.to/bensonruan en Benson Ruan Mon, 31 Jul 2023 10:24:38 +0000 https://dev.to/bensonruan/motion-detection-with-javascript-i8 https://dev.to/bensonruan/motion-detection-with-javascript-i8 <p>Have fun with the virtual drum that I built, that’s how #computervision #motiondetection come into play.</p> <p>To demonstrate motion detection with javascript, I built a web app which let you play drums by waving your hands in the air.<br> Checkout the demo in the link below: </p> <p>Tutorial + Demo : <br> <a href="https://bensonruan.com/motion-detection-javascript-play-drums-with-webcam/">https://bensonruan.com/motion-detection-javascript-play-drums-with-webcam/</a></p> <p>Github: <a href="https://github.com/bensonruan/Motion-Detection-Virtual-Drums">https://github.com/bensonruan/Motion-Detection-Virtual-Drums</a></p> Benson Ruan Fri, 28 Jul 2023 09:18:22 +0000 https://dev.to/bensonruan/virtual-try-on-glasses-with-javascript-3mdb https://dev.to/bensonruan/virtual-try-on-glasses-with-javascript-3mdb <p>Learn how to add virtual try on feature for your online glasses store. Utilize AR and 3D rendering for a seamless shopping experience. </p> <p>In below tutorial, I will explore how to use combination of TensorFlow.js + Face Mesh model + Three.js, that can transform the e-commerce industry by providing a virtual try on function for glasses. This innovative technology not only enhances customer satisfaction but also boosts sales and reduces product returns.</p> <p>Tutorial + Demo : <br> <a href="https://bensonruan.com/virtual-try-on-glasses-with-javascript/">https://bensonruan.com/virtual-try-on-glasses-with-javascript/</a> </p> <p>Github : <a href="https://github.com/bensonruan/Virtual-Glasses-Try-on">https://github.com/bensonruan/Virtual-Glasses-Try-on</a></p> javascript ai machinelearning tensorflow Benson Ruan Wed, 26 Jul 2023 12:19:09 +0000 https://dev.to/bensonruan/changing-virtual-webcam-background-with-javascript-58j https://dev.to/bensonruan/changing-virtual-webcam-background-with-javascript-58j <p>From The Great Wall to the Moon, webcam background change is not limited to Zoom now, I just did it in the browser with <strong>Tensorflowjs</strong> + <strong>BodyPix</strong> model.<br> Want to know how I implement this? checkout below <br> Tutorial + Demo : <br> <a href="https://bensonruan.com/selfie-anywhere-person-segmentation-with-bodypix/">https://bensonruan.com/selfie-anywhere-person-segmentation-with-bodypix/</a><br> GitHub repo : <br> <a href="https://github.com/bensonruan/Selfie-Anywhere">https://github.com/bensonruan/Selfie-Anywhere</a></p> javascript tensorflow machinelearning ai Benson Ruan Mon, 24 Jul 2023 14:20:12 +0000 https://dev.to/bensonruan/learn-how-to-access-webcam-and-take-photo-with-javascript-3oel https://dev.to/bensonruan/learn-how-to-access-webcam-and-take-photo-with-javascript-3oel <p>To contribute to the JavaScript open source community, I had built a npm module called ‘webcam-easy‘, which provides an easy to use JavaScript module that can access webcam and take photo. <br> Github : <a href="https://github.com/bensonruan/webcam-easy">https://github.com/bensonruan/webcam-easy</a><br> npm : <a href="https://www.npmjs.com/package/webcam-easy">https://www.npmjs.com/package/webcam-easy</a><br> Blog : <a href="https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript/">https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript/</a></p> javascript webcam computervision demo