https://github.com/xataio/screenshot

A zero-dependency browser-native way to take screenshots powered by the native web MediaDevices API.
https://github.com/xataio/screenshot

Last synced: about 1 month ago
JSON representation

A zero-dependency browser-native way to take screenshots powered by the native web MediaDevices API.

• Host: GitHub
• URL: https://github.com/xataio/screenshot
• Owner: xataio
• License: mit
• Created: 2022-02-05T18:46:40.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-24T07:27:20.000Z (almost 3 years ago)
• Last Synced: 2024-04-14T11:57:28.953Z (8 months ago)
• Language: TypeScript
• Size: 66.4 KB
• Stars: 812
• Watchers: 8
• Forks: 19
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - screenshot - dependency browser-native way to take screenshots powered by the native web MediaDevices API. | xataio | 842 | (TypeScript)

README

        
#  `@xata.io/screenshot`

This tool uses [native browser APIs](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) 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](https://www.youtube.com/watch?v=uC6RbWanoy4).

- See it in action on [StackBlitz](https://stackblitz.com/edit/node-b86qqd?file=app/routes/index.tsx). 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](https://xata.io/blog/introducing-screenshot/).

## Usage

First, you'll want to install it:

```bash

npm install @xata.io/screenshot

```

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

```js

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 '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.