host.screenshot
host.screenshot captures the app's own DOM as an image. Because the app runs in a cross-origin sandbox the host cannot reach into the iframe, so the capture runs inside the app: the SDK clones the target subtree into an SVG <foreignObject>, draws it to a canvas, and returns a data URL. It is also the implementation behind the built-in __screenshot command an agent can invoke on any app (see the agent command interface).
API
host.screenshot(opts?: ScreenshotOpts): Promise<ScreenshotResult>
interface ScreenshotOpts {
selector?: string; // CSS selector to capture; defaults to document.body
width?: number;
height?: number;
scale?: number; // device-pixel multiplier; defaults to devicePixelRatio
format?: 'png' | 'jpeg';
quality?: number; // JPEG quality 0..1 (default 0.92)
}
interface ScreenshotResult {
dataUrl: string;
width: number;
height: number;
format: 'image/png' | 'image/jpeg';
}Capture
await host.ready();
const shot = await host.screenshot({ selector: '#stage', format: 'png' });
imgEl.src = shot.dataUrl;
console.log(shot.width, shot.height);Limitations
The capture is a DOM rasterization, not a true compositor screenshot. The same constraints every screenshot library hits apply:
- External stylesheets are not inlined. Styles applied via inline
styleor a<style>in the same document render; styles loaded from a separate sheet may fall back. - Cross-origin images may fail to render due to canvas taint.
<canvas>children are captured via their owntoDataURLand layered atop the DOM snapshot.
For taint-free footage of a real app (rather than a DOM clone), an agent can use the host-side __capture command, which uses Region Capture and requires the user to have started a capture session on the tab. See the agent command interface.
Related
- Agent command interface:
__screenshot,__record,__capturebuilt-ins - host.content: persist a captured image as content