How to Take Screenshots in the Browser Using JavaScript

Taking screenshots within a browser is a skill that can be very useful to you. You might need it to capture some content for user interfaces, if you are building custom tools, automating some tasks – or anything else, for that matter. But, what happens if you don’t know how to make a Javascript screenshot? 📸

Don’t worry about it. We wrote this post specifically to tell you how to make this happen. Before we get started, it’s important to make sure that you have all the tools necessary to fix your problem.

While working on browser-based apps, it’s very common for users to face hardware issues that can also impact their experience negatively. For instance, there are many users who report problems like their iphone camera not working properly when they try to capture screenshots using different applications, the ones that rely on camera functionality. If you were wondering how to fix iPhone camera or asking yourself why is my front camera not working, these issues can come from software glitches, hardware malfunctions, or even something as simple as permission settings. You can fix this problem by updating iOS, resetting the permissions or, if everything fails, consulting Apple’s support.

Now let’s see what you can do to take those screenshots with Javascript.

Generate Screenshots with a Screenshot Service

The idea that the web needs a service for screenshots with JavaScript is not new, which is why there are some tools you can use to simplify this. Take, for instance, Stillio. You can use this software to make their famous Stillio automatic screenshots without much effort. Some alternative options are url2png, Urlbox, etc.

The implementation of this can differ depending on what you use, but the general idea is pretty much the same. You send the URL and any customizable parameters to the service and wait for the response.

Use the html2canvas Library

Another option for capturing screenshots on your web screen using Javascript is this – using the html2canvas library. The library will take a snapshot of a DOM element and render it as a canvas element. It’s pretty simple to use. Here is an example of this:

html2canvas(document.body).then(function (canvas) {
  document.body.appendChild(canvas);
});

Use the Native Screenshot API

Some browsers support native capabilities for taking screenshots by using APIs. This is still in development when it comes to the Javascript frameworks, but there are already some options that have proven to work.

Around the same time than html2canvas was released on the market, Google released Hangouts, the famous video and audio platform. To support it, they put forward the idea of RTC, which later turned into WebRTC. This is now a standard in modern browsers, and it is what you can use to take those screenshots.

One part of WebRTC is getDisplayMedia – the screen sharing API. You can use it to capture a still image from a video, which will basically become a screenshot. Here is an example of this:

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");
  try {
	const captureStream = await navigator.mediaDevices.getDisplayMedia();
	video.srcObject = captureStream;
  }
}

How does this work, really? For starters, the video and canvas elements are added to the memory. Next, the getDisplayMedia API will help you request access to your desktop or tab. When you grant permission for this, the screen stream is set to the video element, and the canvas is drawn. What you get is an image from the canvas in a process that is very similar to the one with the html2canvas example we mentioned above.

Wrapping Up

Whether you need some screenshots to get feedback for a feature in your app, or you need it to automate some tasks, you need to find the right solution for this problem you have – taking screenshots using JavaScript.

Using an API or a client-side solution like html2canvas means that you can generate images fast and won’t have to manage any server infrastructure. If you outsource this, the process gets even simpler and you get fast and pixel-perfect screenshots that you can use for whatever purposes you intended.