capacitor-plugin-screenshot

Capacitor plugin to take screenshot for iOS and Android devices.

The main goal of this plugin is to be able to take a screenshot of the application exactly as you see it. Even if there are playing videos, an iframe with some content, a cross-origin CSS...etc.

This plugin uses the takeSnapshot method of the WKWebView for iOS : https://developer.apple.com/documentation/webkit/wkwebview/2873260-takesnapshot.

And for Android, the MediaProjection API : https://developer.android.com/reference/android/media/projection/MediaProjection.

For the web, MediaDevices is use to cast the browser tab : https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia.

Install

npm install @intuiface/capacitor-plugin-screenshot
npx cap sync

API

• getScreenshot(...)
• Interfaces

getScreenshot(...)

getScreenshot(options: ScreenshotOptions) => Promise<ScreenshotValue | null>

Function to take a screenshot

| Param | Type | Description | | ------------- | --------------------------------------------------------------- | ------------------------------------------------- | | options | ScreenshotOptions | : options with quality desired for the screenshot |

Returns: Promise<ScreenshotValue | null>

Interfaces

ScreenshotValue

| Prop | Type | Description | | ------------ | ------------------- | ------------------------------------------------- | | base64 | string | The base64 string of the screenshot. Can be null | | URI | string | The file uri where the image is saved Can be null |

ScreenshotOptions

| Prop | Type | Description | | ------------- | ------------------- | ----------------------------------------------- | | size | number | The desired size (here width) of the screenshot | | quality | number | The quality of the screenshot between 0-100 | | name | string | The name of the file to save |

iOS

iOS version 14+ is supported.

Nothing more to do, it should work by calling the getScreenshot function.

Android

Android Version 6+ is supported.

To be able to take screenshot on Android, you have to declare a foreground service in the AndroidManifest.xml in the application tag :

<service android:enabled="true" android:foregroundServiceType="mediaProjection" android:name="com.intuiface.plugins.screenshot.ScreenCaptureService" />

And also add permissions :

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

The foreground service will ask you to cast your screen and this is mandatory to take screenshot with the MediaProjection API.

License

The scripts and documentation in this project are released under the MIT License