Product Introduction
1. Definition
Pagecorder is a high-performance, developer-centric API designed for headless browser video recording. It functions as a programmatic interface that loads web URLs or local bundles, captures both screen and audio output at professional-grade specifications (up to 4K resolution at 60 FPS), and exports the final sequence as an MP4 file. It falls under the technical categories of "Web-to-Video API," "Automated Rendering Service," and "Headless Browser Automation."
2. Core Value Proposition
Pagecorder exists to bridge the gap between web-based dynamic content and high-quality video production. By providing a scalable infrastructure to generate video from HTML, CSS, and JavaScript, it eliminates the need for manual screen recording and complex local ffmpeg setups. Its primary value lies in its "Performance-First" architecture, ensuring that heavy WebGL, Canvas, and CSS animations are captured with frame-perfect precision, which is essential for developers building automated marketing tools, dynamic social video templates, and product demonstration engines.
Main Features
1. High-Fidelity 4K/60FPS Rendering
Pagecorder is engineered for high-end visual output, supporting viewport dimensions up to 3840 x 2160 (4K) and a consistent 60 frames per second capture rate. Unlike standard browser-based recording tools that may skip frames under load, Pagecorder’s rendering engine is optimized for stability, ensuring that smooth motion graphics in CSS or WebGL are preserved in the final MP4 delivery.
2. JavaScript-Triggered Recording Lifecycle
The API utilizes a simple yet powerful integration method involving two JavaScript calls: window.pagecorder('start') and window.pagecorder('stop'). This allows developers to precisely signal when the recording should begin (e.g., after a specific data fetch) and end (e.g., after an animation sequence completes). These calls are silently ignored by standard desktop and mobile browsers, ensuring that a single codebase can function as a live website and a video source simultaneously.
3. Self-Contained ZIP Bundle Support
To ensure 100% reproducible results and maximum performance, Pagecorder allows users to submit a ZIP archive containing the entire web project (HTML, CSS, JS, fonts, and assets). This "local-first" approach eliminates network latency during the recording process, prevents 404 errors from external CDNs, and significantly speeds up the loading stage by serving files directly from the internal disk.
4. Comprehensive Diagnostic & Debugging Suite
Every recording job includes a detailed diagnostic report. The "Dropped Frames" array identifies exactly where and why visual stuttering occurred (e.g., rendering too slow due to expensive box-shadows or large DOM reflows). Additionally, the API provides HTTP error tracking for missing assets and a full capture of console.log, console.warn, and console.error outputs from the browser session.
Problems Solved
1. Inconsistent Frame Rates in Automated Video
Standard headless browser recording often suffers from "stutter" when the CPU cannot keep up with real-time rendering. Pagecorder addresses this by providing high-performance environments and diagnostic tools to help developers optimize their code for 60 FPS output, solving the problem of unprofessional, choppy video exports.
2. Network Instability During Capture
Recording a live URL can be compromised by slow CDN responses or transient network failures that cause assets to fail to load. By supporting ZIP archives, Pagecorder solves the "flaky asset" problem, ensuring that every image, font, and script is available locally for a perfect, error-free render every time.
3. Target Audience
- SaaS Developers: Creating automated product walkthroughs and personalized user onboarding videos.
- Marketing Automation Engineers: Building tools that generate thousands of unique social media videos from dynamic HTML templates.
- Data Analysts: Exporting animated dashboards and complex data visualizations into shareable video formats.
- Motion Designers: Using web technologies (Canvas/WebGL) to create high-resolution motion graphics for production use.
4. Use Cases
- Dynamic Social Video: Generating square or vertical videos for Instagram/TikTok based on dynamic user data or real-time trends.
- Automated Product Demos: Recording UI interactions to showcase software updates without manual screen capture.
- CSS/Canvas Motion Graphics: Capturing complex browser-based animations for use in traditional video editing software.
- Archival Documentation: Recording the exact state of a dynamic web application for compliance or historical records.
Unique Advantages
1. Developer-First Integration
Compared to browser extensions or GUI-based screen recorders, Pagecorder is entirely programmatic. Its integration with RapidAPI and support for Node.js and Python makes it a seamless part of a modern CI/CD or backend workflow. The ability to poll for job status and receive a hosted MP4 link simplifies the entire video pipeline.
2. Transparent Billing and Performance Monitoring
Pagecorder’s billing model is strictly "pay-per-second" of actual recording, and it provides a "failed jobs are free" guarantee. This reduces the financial risk of experimenting with complex renders. Furthermore, the inclusion of "Dropped Frame" reasons (e.g., "rendering too slow") offers a level of technical insight that competing APIs lack, allowing for iterative performance tuning.
3. Advanced Customization Options
Beyond simple URL capture, the API supports custom FTP upload targets, allowing businesses to bypass Pagecorder’s internal storage and move large 4K files directly into their own infrastructure. It also offers configurable timeouts for downloading, loading, and rendering stages to accommodate heavy assets.
Frequently Asked Questions (FAQ)
1. How do I convert HTML templates to MP4 video programmatically?
You can convert HTML to MP4 by using the Pagecorder API. Simply add window.pagecorder('start') and window.pagecorder('stop') to your HTML/JavaScript, then POST the URL or a ZIP archive of your project to the Pagecorder /rapid/render endpoint. The API will load your page in a high-performance browser, record the output at 60 FPS, and return a link to the generated MP4 file.
2. Can Pagecorder record WebGL and Canvas animations at 4K?
Yes, Pagecorder is specifically designed for high-computational rendering. It supports viewport sizes up to 3840 x 2160 (4K) and maintains a 60 FPS capture rate. It is ideal for recording complex WebGL shaders, Three.js scenes, and heavy Canvas-based data visualizations that require high-resolution output for professional use.
3. Why is a ZIP archive better than a URL for video recording?
Using a ZIP archive is the recommended method because it bundles all assets (scripts, images, fonts) locally. This eliminates network latency, prevents 404 errors caused by external hosting issues, and ensures that the recording is fully reproducible. It also results in faster job completion times because the rendering engine does not have to wait for external HTTP requests.
4. What happens if my web page is too slow to render at 60 FPS?
If your page is too computationally expensive (e.g., heavy box-shadows or large DOM reflows), Pagecorder’s diagnostic report will include a droppedFrames array. This report identifies the specific timestamp and the reason for the drop (e.g., "rendering too slow"). This allows you to optimize your CSS and JavaScript or reduce the viewport size to ensure a smooth, professional video.
5. Is there a cost for failed recording jobs?
No. Pagecorder only bills for successful jobs based on the actual duration of the recording in seconds. If a job fails during the downloading, loading, or rendering stages, you are not charged. This allows developers to test and debug their animations without incurring costs for unsuccessful renders.
