nshot
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

Nshot

Allow users to make screenshots of their screen using a native Screen Capture API

See simple demo

Features

  • Initiate screen capture from web apps easily,
  • Grab screenshots of current tab, other tabs, whole display or whatever the native Screen Capture API supports,
  • Screenshots in multiple image types (png, jpeg or webp),
  • Set quality of the screenshot taken (works only for jpeg type),
  • Timer to delay the screenshot,
  • Check if browser supports Screen Capture API.

Coming soon

  • Full page screenshot
  • Hide or show cursor on screenshot

How to use

  1. Install the package:
npm install nshot
  1. Import where needed
import { useScreenCapture } from 'nshot'
  1. Use it

The above method returns a promise which resolves as a base64 string of the screenshot.

useScreenCapture(options)
    .then(response => {
        // do whatever you need with base64 string you will receive here as response 
    })
    .catch(error => {
        // catch any errors here, for example, if user has canceled screen capture
    }) 
  1. Available options
{
    preferCurrentTab: boolean // true/false, whether the Screen Capture API should offer the current tab first
    quality: number // a number between 0.01 and 1, determines the image quality, works only on jpeg format
    format: string // format of the screenshot, supported formats: png, jpeg and webp
    timer: number // number of seconds to wait before taking a screenshot. An overlay will be shown on top with countdown
}

So, the complete function could look something like this

useScreenCapture({
    preferCurrentTab: true,
    quality: 1,
    format: 'jpeg',
    timer: 3
  })
      .then(response => {
          // your own function to download screenshot
          downloadScreenshot(response)
      })
      .catch((error) => {
          // catch error
      })

Additionally, you can check if browser supports the Screen Capture API by using provided flag isScreenCaptureSupported

import { isScreenCaptureSupported } from 'nshot'

if (isScreenCaptureSupported) {
    // take screenshot
}

/nshot/

    Package Sidebar

    Install

    npm i nshot

    Weekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    30.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • chameleonmind