In this blog, we will build a simple application to capture photos from your machine using JavaScript Web API.
Let's get started.
What is Web API?
- API stands for Application Programming Interface.
- A Web API is an application programming interface for the Web.
- A Browser API can extend the functionality of a web browser.
- A Server API can extend the functionality of a web server
All browsers have a set of built-in Web APIs to support complex operations and help to access data.
Here, we will use - MediaDevices interface
The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing.
In essence, it lets you obtain access to any hardware source of media data.
Read here to know more about it.
Screenshot of our application
Check out the live demo here.
Step 1 - Building UI
Step 2 - The JavaScript
Get the ID of the elements,
Step 3
Add click event to the start button, here media devices Web API is called,
Syntax
The constraints parameter is a MediaStreamConstraints object with two members: video and audio, describing the media types requested.
Either or both must be specified.
The browser asks for permission, select allow. Here video view has been highlighted since the camera is on ;)
Step 4
Capture your photo, on the Click Photo button,
Step 5 - Download the photo
The base64 canvas is stored in the variable image_data_url, with which we added as href attribute to the <a> tag.
To write a custom file name add the below code,
Step 6 - Reset the current photo and continue capturing
No comments:
Post a Comment