Learn how to integrate ScreenApp's recording plugin into your web application. This demo shows the complete implementation with working examples.
The ScreenApp plugin allows you to embed professional screen recording capabilities directly into your website. Users can record their screen, camera, and audio without leaving your application.
Before you begin, you need:
- ScreenApp Account: Business or Enterprise plan
- Plugin Token: Get it from ScreenApp Dashboard → Settings → API
- Authorized Domain: Add your website URL in the dashboard settings
- Sign up for a Business or Enterprise plan at screenapp.io
- Navigate to Settings → API in your dashboard
- Add your website domain to the authorized list
- Copy your Plugin Token
Add the ScreenApp plugin script to your HTML page:
<script
type="module"
src="https://embed.screenapp.io/app/plugin-latest.bundle.js"
charset="UTF-8">
</script>Or load it dynamically in JavaScript:
const script = document.createElement('script');
script.type = 'module';
script.src = 'https://embed.screenapp.io/app/plugin-latest.bundle.js';
document.head.appendChild(script);// Wait for the script to load, then initialize
const screenApp = new window.ScreenApp(
'your-plugin-token-here', // Your plugin token
(recording) => { // Callback when recording completes
console.log('Recording:', recording);
// Handle the recording data (id, url, etc.)
},
{ uiMode: 'fullscreen' } // Options: 'fullscreen' or 'popup'
);// Mount the plugin to a container element
await screenApp.mount('#my-container');Complete Example:
<!DOCTYPE html>
<html>
<head>
<title>ScreenApp Demo</title>
</head>
<body>
<!-- Container for the plugin -->
<div id="screenapp-container"></div>
<script type="module">
// Load the plugin
const script = document.createElement('script');
script.type = 'module';
script.src = 'https://embed.screenapp.io/app/plugin-latest.bundle.js';
script.onload = async () => {
// Initialize ScreenApp
const screenApp = new window.ScreenApp(
'your-plugin-token-here',
(recording) => {
alert(`Recording complete! View at: ${recording.url}`);
},
{ uiMode: 'fullscreen' }
);
// Mount to container
await screenApp.mount('#screenapp-container');
};
document.head.appendChild(script);
</script>
</body>
</html>For React applications, copy the ScreenAppRecorder.tsx component to your project.
Basic Usage:
import ScreenAppRecorder from './components/ScreenAppRecorder';
function MyApp() {
const handleRecordingComplete = (recording) => {
console.log('Recording completed!', recording);
// recording contains: { id, url, name, createdAt, ... }
};
return (
<ScreenAppRecorder
apiKey="your-plugin-token-here"
onRecordingComplete={handleRecordingComplete}
uiMode="fullscreen"
/>
);
}new window.ScreenApp(pluginToken, callback, options)| Parameter | Type | Required | Description |
|---|---|---|---|
pluginToken |
string |
Yes | Your plugin token from ScreenApp dashboard |
callback |
function |
Yes | Called when recording completes with recording data |
options |
object |
No | Configuration options |
| Option | Type | Default | Description |
|---|---|---|---|
uiMode |
'fullscreen' | 'popup' |
'fullscreen' |
UI display mode for the recorder |
When a recording completes, your callback receives an object with:
{
id: string; // Unique recording ID
url: string; // Public URL to view the recording
name?: string; // Recording name (if set)
createdAt?: string; // ISO 8601 timestamp
duration?: number; // Recording duration in seconds
// ... additional metadata
}mount(selector: string): Promise<void>
Mounts the plugin UI to a DOM element.
await screenApp.mount('#my-container');unMount(): void
Removes the plugin UI from the page.
screenApp.unMount();Fullscreen Mode (Recommended)
- Takes over the entire container
- Full-featured interface with all controls
- Best for most use cases
{ uiMode: 'fullscreen' }Popup Mode
- Compact, floating interface
- Minimal screen space
- Good for embedded use cases
{ uiMode: 'popup' }- Plugin tokens are domain-restricted - they only work on domains you authorize
- Safe to use in frontend code
- Configure authorized domains in ScreenApp Settings → API
To run this demo project locally:
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:5173 and enter your plugin token.
- Documentation: https://screenapp.io/docs
- Dashboard: https://screenapp.io/dashboard
- Support: Contact through your ScreenApp dashboard
MIT