screenshot-prevention

Screenshot Prevention Library

A high-performance JavaScript library to prevent screenshots, screen recordings, and screen sharing on web applications.

Features

• 🚫 Block screenshots and screen recordings
• 🖼️ Prevent screen sharing
• 📱 Mobile device support
• ⚡ High-performance implementation
• 🎨 Customizable UI and messaging
• 🔄 Automatic recovery
• 📦 Zero dependencies
• 💻 TypeScript support

Installation

NPM

npm install screenshot-prevention

CDN

<script src="https://cdn.jsdelivr.net/npm/screenshot-prevention@latest/dist/screenshot-prevention.min.js"></script>

Quick Start

Basic Usage

<!-- Auto-initialize with default settings -->
<script src="screenshot-prevention.min.js" data-auto-init></script>

Manual Initialization

const prevention = new ScreenshotPrevention({
  blurIntensity: '20px',
  warningMessage: 'Screenshots are not allowed on this website.',
  preventCopy: true,
  preventInspect: true,
  recoveryDelay: 2000,
  onAttempt: (details) => {
    console.log('Screenshot attempted:', details);
  }
});

Configuration Options

Option	Type	Default	Description
blurIntensity	string	'20px'	Blur intensity when prevention is triggered
warningMessage	string	'Screenshot and screen recording are not allowed.'	Custom warning message
preventCopy	boolean	true	Prevent content copying
preventInspect	boolean	true	Prevent inspect element
recoveryDelay	number	2000	Recovery delay in milliseconds
debug	boolean	false	Enable debug logging
onAttempt	function	null	Callback for screenshot attempts

API Reference

Methods

• getAttemptCount(): Get the number of screenshot attempts
• reset(): Reset the prevention state
• destroy(): Clean up and remove event listeners

Events

The onAttempt callback receives an object with:

• count: Number of attempts
• method: Detection method used
• timestamp: Timestamp of the attempt

Browser Support

• Chrome 76+
• Firefox 69+
• Safari 13+
• Edge 79+
• iOS Safari 13.4+
• Chrome for Android 76+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Publishing Instructions

1. Create a new repository on GitHub

2. Initialize your local project:

   npm init
   git init

3. Set up your project structure:

   screenshot-prevention/
   ├── src/
   │   └── index.js
   ├── dist/
   │   ├── screenshot-prevention.js
   │   └── screenshot-prevention.min.js
   ├── examples/
   │   └── index.html
   ├── package.json
   ├── README.md
   ├── LICENSE
   └── .gitignore
   

4. Add build scripts to package.json:

   {
     "scripts": {
       "build": "rollup -c",
       "test": "jest",
       "prepare": "npm run build"
     }
   }

5. Create and push to GitHub:

   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/username/screenshot-prevention.git
   git push -u origin main

6. Publish to npm:

   npm login
   npm publish

7. Set up GitHub Actions for automated testing and publishing:

   name: CI/CD
   on: [push, pull_request]
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - uses: actions/setup-node@v2
         - run: npm ci
         - run: npm test
         - run: npm run build

License

MIT License - free for commercial and personal use.

Support

• GitHub Issues: Report a bug
• Email: [e-mail]