Skip to content

intuiface/capacitor-plugin-screenshot

Repository files navigation

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(...)

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 13+ 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