@xata.io/screenshot

A zero-dependency browser-native way to take screenshots powered by the nat...

Screenshot
xataio/screenshot@xata.io/screenshot

README

# Logo `@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:

  1. ``` sh
  2. npm install @xata.io/screenshot
  3. ```

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

  1. ``` js
  2. import { takeScreenshot, checkIfBrowserSupported } from "@xata.io/screenshot";

  4. /**
  5. * Only do this if your browser supports it.
  6. * To check, visit https://caniuse.com/mdn-api_mediadevices_getdisplaymedia
  7. */
  8. if (checkIfBrowserSupported()) {
  9.   takeScreenshot().then((screenshot) => {
  10.     /**
  11.      * This is a base64-encoded string representing your screenshot.
  12.      * It can go directly into an 's `src` attribute, or be sent to a server to store.
  13.      */
  14.     console.log(screenshot);
  15.   });
  16. }
  17. ```

Options


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

OptionDescriptionRequiredDefault
-----------------------------------------------------------------------------------------------------------------------------------------------------------
`quality`The_nope_`.7`
`onCaptureStart`An_nope_|
`onCaptureEnd`An_nope_|
`type`What_nope_`"image/jpeg"`
`soundEffectURL`Why_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.