<img alt="Logo" width="56" src="assets/logo.png" /> @xata.io/screenshot

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

Demos

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.

Usage

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);
  });
}

Options

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

| Option | Description | Required | Default Value | | ---------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | -------------- | | quality | The quality of the final image on a scale of 0 to 1. 0 is lowest quality, 1 is highest. | nope | .7 | | onCaptureStart | An async function that does stuff when the capture starts. You'll usually want to hide any modals or anything here. | nope | | | onCaptureEnd | An async function that does stuff after capture ends. This is usually when you'll want to clean up. | nope | | | type | What kind of image do we want? Possible values are "image/jpeg", "image/png" and "image/webp". | nope | "image/jpeg" | | soundEffectURL | Why not play a little camera click sound effect when taking a screenshot? | nope | - |

Contributing

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.