Modern browsers nowadays are more powerful than ever before. We can do all kinds of stuff in the browser with JavaScript now, like motion-sensing, Bluetooth pairing, capturing photos, videos, audio and much more. We’ll look into how to take pictures in a browser with JavaScript. A live demo of this project is . here What Is Navigator Object? According to MDN Docs, The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. Simply put, Navigator Object contains data/information about the browser. The Navigator object is accessed with, or just . window.navigator navigator With object, you can access information like geolocation of the browser, media devices available to the browser, are cookies enabled or not, etc. navigator For more info on the navigator object, visit the . MDN Docs for Navigator For our purpose, we’ll be dealing with property. mediaDevices mediaDevices Property mediaDevices is a property that provides access to media input devices like webcams, microphones, etc. read-only NOTE: We’ll need a secure context (HTTPS), to access these input devices. So, we’ll start by installing a server for us to test the results. NOTE: If you’re using a text editor like VS Code, using a live server extension will also work. Make sure you have Node and NPM installed. Install serve with the following command, npm i -g serve Now, let’s get into some code. Create an file with the following code. index.html Now, a with some basic styles. styles.css Now, in , first, we’ll capture the media from the webcam, and output the stream via video element. app.js Enter the following command to start the server. serve /PATH/TO/YOUR/DIRECTORY This will give you a working video element. For taking a picture, When the Capture photo button is clicked, we: Collected video element’s intrinsic width and height. made the canvas of the same width and height. Drew an image onto the canvas with the video element being the source. Encoded the canvas into an image data URL. Downloaded the image via a downloadable link. And so, we successfully captured a picture on a browser with JavaScript.

Mozilla

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Too Long; Didn't Read

Make resilience your competitive advantage

How to Take a Photo in Your Browser with JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Using 7Zip to View Archive in Browser with JavaScript

Follow These Steps To Replay Browser’s Network Offline

Google's Best Semi-Secret Experiment: Chrome Flags

How to Avoid Online Phishing Scams this Holiday Season

How Do You Clear Your Google Search History?

Using 7Zip to View Archive in Browser with JavaScript

Follow These Steps To Replay Browser’s Network Offline

Google's Best Semi-Secret Experiment: Chrome Flags

How to Avoid Online Phishing Scams this Holiday Season

How Do You Clear Your Google Search History?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps