Webcam Direct Access Package for Angular | Accubits Dev Blog

Originally published at https://dev.accubits.com on January 29, 2020.

In many web applications, uploading images are a necessity. For example, uploading profile pictures to a social media website or uploading a photo for a KYC verification. The majority of web apps provide an option for the user to upload an image from the local file system. but, how convenient is this?

A Throwback,

About a month ago, when I was registering for an online competition, I was required to upload a profile photo to complete the registration process. Like most of the other websites, I had an option to upload the photo from the local file system. Convenient it would seem, but in fact, the whole process of registration was a pain in the heart for me.

I checked my local file system for a nice looking photo, but to my surprise, I couldn’t find any. Okay, my next option is to take a photo and to save it in my hard drive. I visited an online webcam tool, took a photo and saved to my hard drive. Perfect. I tried to upload the photo again, Now it says the photo need to be JPG, not PNG! Duh!

Now I have to open another online tool to convert my PNG image to JPG and save it to my hard drive. I tried to upload it once again. And darn it, now the alert says “Your photo should be 400px*400px max” Process repeat — open an online tool to resize the photo.

If there was one more alert, I was determined to abandon the registration. And guess what? “The photo should be a maximum of 500kb size”. As per determination, I closed the laptop and had a good long walk. But my thought was — why didn’t they just do it themselves? As a customer, ideally, I should only be providing them my photo and it’s their responsibility to edit it however they want to fit it to their application’s architecture.

User Experience Matters!

A bad experience led me to abandon this registration. I’m sure, at least a thousand customers dropped off like that just because the user experience is poor. The thoughts I had led to further research and it took me by surprise to know that there aren’t many packages or plugins available to do such tasks. I’m an angular developer and I explored further to see if any Angular packages are available to access the webcam directly and take photos. I found one package, but it was complicated to use. And that’s when I decided to develop an opensource package to fix this problem. I spent time after my regular works to work on this package and in a week, I completed and published it.

You can use this angular package in your web application, and the users of your website would not need to go through the hassles I went through. Using this package, your web application can allow your users to take photos directly by accessing the webcam. Once the photo is captured by the webcam, the package can handle the tasks such as converting the image format, resizing dimensions, reducing file size, etc.

Moreover, in web apps that required KYC verification using the user’s photo, this package can prevent a user from uploading a photo from the computer and prompt them to capture the photo from the webcam itself. This will be very helpful for live online KYC verifications.

To my surprise, one day after I published the package, it got 800+ downloads in a single day. Seems like a lot of developers faced the same problem and were seeking in vain for a solution. Glad that I could be of help. You can download the package from HERE and if you have any questions about the package, please drop an email to faizal@accubits.com