Skip to main content

Browser Screencast

Watch your cloud browsers in real-time. Screencast uses Chrome DevTools Protocol to stream the browser screen over WebSocket - view-only, no interaction.

Best for embedding, dashboards, session monitoring, and recording. For debugging, use DevTools instead.

Getting Started​

When you start a profile, the response includes a screencast URL inside the inspector object:

{
  "internal_uuid": "a8fb62f90611456aa75422b01c385a62",
  "ws_url": "wss://api-public.surfsky.io/proxy/a8fb62f90611456aa75422b01c385a62",
  "inspector": {
    "list": "https://api-public.surfsky.io/proxy/.../inspector",
    "pages": [{ ... }],
    "screencast": "wss://api-public.surfsky.io/screencast/a8fb62f90611456aa75422b01c385a62/devtools/page/ABC123"
  },
  "success": true
}

Connect to inspector.screencast with any WebSocket client to receive frames.

Quick View​

Surfsky hosts a built-in viewer page - no setup needed. After starting a profile, open this URL in your browser:

https://api-public.surfsky.io/screencast?ws=<screencast_url>

Replace <screencast_url> with the inspector.screencast value from the start response. For example:

https://api-public.surfsky.io/screencast?ws=wss://api-public.surfsky.io/screencast/a8fb62f90611456aa75422b01c385a62/devtools/page/ABC123

Examples​

Demo code - copy and use as-is, or build your own.

How it works: connects to WebSocket, receives base64 JPEG frames, decodes them as images, and draws to canvas.

const ws = new WebSocket(screencastUrl);
const canvas = document.getElementById('screen');
const ctx = canvas.getContext('2d');

ws.onmessage = (e) => {
    const data = JSON.parse(e.data);
    if (data.type === 'frame') {
        const img = new Image();
        img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        img.src = 'data:image/jpeg;base64,' + data.data;
    }
};