How to Take a Photo in Your Browser with JavaScript by@paragwebdev

How to Take a Photo in Your Browser with JavaScript

Modern browsers nowadays are more powerful than ever before. We’ll look into how to take pictures in a browser with JavaScript. 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. The mediaDevices property is a **read-only** property that provides access to media input devices like webcams, microphones, etc. It provides information like geolocation of the browser, media devices available to the browser.
image
parag mahale HackerNoon profile picture

parag mahale

I am a full-stack web developer. I enjoy developing browser-based HTML games.

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, window.navigator or just navigator.


With navigator object, you can access information like geolocation of the browser, media devices available to the browser, are cookies enabled or not, etc.


For more info on the navigator object, visit the MDN Docs for Navigator.


For our purpose, we’ll be dealing with mediaDevices property.

mediaDevices Property

mediaDevices is a read-only property that provides access to media input devices like webcams, microphones, etc.


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 index.html file with the following code.


index.html

index.html


Now, a styles.css with some basic styles.


styles.css

styles.css


Now, in app.js, first, we’ll capture the media from the webcam, and output the stream via video element.


get webcam feed

get webcam feed


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,


Taking the picture from canvas context

Taking the picture from canvas context


When the Capture photo button is clicked, we:


  1. Collected video element’s intrinsic width and height.
  2. made the canvas of the same width and height.
  3. Drew an image onto the canvas with the video element being the source.
  4. Encoded the canvas into an image data URL.
  5. Downloaded the image via a downloadable link.



And so, we successfully captured a picture on a browser with JavaScript.

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!