This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

Pick your preference. You can easily learn about this project in the following ways:

• Watch an explainer on YouTube.
• See it in action on StackBlitz. You'll need to open the preview in a new window to get around extra iframe security that StackBlitz needs.
• Read about the details on the Xata Blog.

First, you'll want to install it:

npm install @xata.io/screenshot

Then, you can add it to your app and use it like so:

import { takeScreenshot, checkIfBrowserSupported } from "@xata.io/screenshot";

/**
 * Only do this if your browser supports it.
 * To check, visit https://caniuse.com/mdn-api_mediadevices_getdisplaymedia
 */
if (checkIfBrowserSupported()) {
  takeScreenshot().then((screenshot) => {
    /**
     * This is a base64-encoded string representing your screenshot.
     * It can go directly into an <img>'s `src` attribute, or be sent to a server to store.
     */
    console.log(screenshot);
  });
}

takeScreenshot accepts a few options to help you customize the user flow and the resulting image. These are:

You're always welcome to open an issue if you encounter any, or even better, open a PR directly to solve issues. We don't (yet) have more contributing guidelines than this because the project is quite small. This may change as things develop.

Made with ❤️ in Berlin.