BrowserRecursosSessão ao vivo

Sessão ao Vivo

O recurso de visualização ao vivo do navegador de raspagem permite que você visualize e controle as sessões do navegador em tempo real. Especificamente, o recurso de visualização ao vivo inclui visualizar, clicar, digitar e rolar dentro de qualquer sessão de navegador ativa. Portanto, você pode facilmente monitorar processos automatizados, depurar scripts de automação e intervir manualmente nas sessões do navegador.

No Scrapeless, você pode visualizar ou controlar as sessões do navegador em dois locais: o playground e a interface de gerenciamento de sessões.

Como Usar

Criar uma Sessão do Navegador Scrapeless

Primeiro, você precisa criar uma sessão. Existem duas maneiras de fazer isso:

Criar uma Sessão via Playground

image1.png

Criar uma Sessão via API

Você também pode usar nossa API para criar uma sessão. Consulte a documentação da API: Documentação da API do Navegador de Raspagem. Nosso recurso de sessão ajudará você a gerenciar essa sessão, incluindo a função de visualização ao vivo.

const { Scrapeless } = require('@scrapeless-ai/sdk');
const puppeteer =require('puppeteer-core');
const client = new Scrapeless({ apiKey: 'API Key' });
 
// custom fingerprint
const fingerprint = {
    platform: 'Windows',
}
 
// Create browser session and get WebSocket endpoint
const { browserWSEndpoint } = client.browser.create({
    session_name: 'sdk_test',
    session_ttl: 180,
    proxy_country: 'US',
    session_recording: true,
    fingerprint,
});
 
(async () => {
    const browser = await puppeteer.connect({browserWSEndpoint});
    const page = await browser.newPage();
 
    await page.goto('https://www.scrapeless.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await page.goto('https://www.google.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await page.goto('https://www.youtube.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await browser.close();
})();

Visualizar Sessão ao Vivo

Na interface de gerenciamento de sessões do Scrapeless, você pode facilmente visualizar sessões ao vivo. Existem também duas maneiras de visualizá-las:

Visualizar Sessão do Playground em Tempo Real

Após criar uma sessão no playground, você pode ver o navegador sendo executado em tempo real no lado direito.

image2.png

Visualizar Sessão da API em Tempo Real

Após criar uma sessão via API, você pode ver a lista de sessões em execução na página de sessões. Clicar nos detalhes da Ação permite que você visualize a operação do navegador em tempo real. Aqui você pode optar por visualizar a sessão ao vivo no local ou copiar a URL da sessão para visualizar a sessão ao vivo. Fornecemos dois vídeos de operação para sua referência.

Exibição no Local

image3.gif

Obter URL ao Vivo via Site

Você pode copiar a URL ao Vivo da lista de sessões em execução e colá-la em um navegador para acessá-la diretamente.

image4.gif

Obter URL ao Vivo via API

Você pode obter a URL ao Vivo chamando a API. No exemplo de código a seguir, primeiro buscamos todas as sessões atualmente em execução usando a API de Sessões em Execução e, em seguida, recuperamos a URL ao Vivo de uma sessão específica usando a API de URL ao Vivo:

const API_CONFIG = {
    host: 'https://api.scrapeless.com',
    headers: {
        'x-api-token': 'API Key',
        'Content-Type': 'application/json'
    }
};
 
const requestOptions = {
    method: 'GET',
    headers: new Headers(API_CONFIG.headers)
};
 
async function fetchBrowserSessions() {
    try {
        // Fetch running browser sessions
        const sessionResponse = await fetch(`${API_CONFIG.host}/browser/running`, requestOptions);
 
        if (!sessionResponse.ok) {
            throw new Error(`failed to fetch sessions: ${sessionResponse.status} ${sessionResponse.statusText}`);
        }
 
        const sessionResult = await sessionResponse.json();
 
        // Process sessions data
        const sessions = sessionResult.data;
        if (!sessions || !Array.isArray(sessions) || sessions.length === 0) {
            console.log("no active browser sessions found");
            return;
        }
 
        // Get first session task ID
        const taskId = sessions[0]?.taskId;
        if (!taskId) {
            console.log("task id not found in the session data");
            return;
        }
 
        // Fetch live URL for the task
        await fetchLiveUrl(taskId);
    } catch (error) {
        console.error("error fetching browser sessions:", error.message);
    }
}
 
async function fetchLiveUrl(taskId) {
    try {
        const liveResponse = await fetch(`${API_CONFIG.host}/browser/${taskId}/live`, requestOptions);
 
        if (!liveResponse.ok) {
            throw new Error(`failed to fetch live url: ${liveResponse.status} ${liveResponse.statusText}`);
        }
 
        const liveResult = await liveResponse.json();
        if (liveResult && liveResult.data) {
            console.log(`taskId: ${taskId}`);
            console.log(`liveUrl: ${liveResult.data}`);
        } else {
            console.log("no live url data available for this task");
        }
    } catch (error) {
        console.error(`error fetching live url for task ${taskId}:`, error.message);
    }
}
 
fetchBrowserSessions().then(r => { });
Obter URL ao Vivo via CDP

Para obter a URL ao Vivo enquanto seu código está sendo executado, chame o comando cdp Agent.liveURL:

const { Puppeteer, log as Log } = require('@scrapeless-ai/sdk');
const logger = Log.withPrefix('puppeteer-example');
 
(async () => {
    const browser = await Puppeteer.connect({
        session_name: 'sdk_test',
        session_ttl: 180,
        proxy_country: 'US',
        session_recording: true,
        defaultViewport: null
    });
 
    const page = await browser.newPage();
    await page.goto('https://www.scrapeless.com');
    const { error, liveURL } = await page.liveURL();
    if (error) {
      logger.error('Failed to get current page URL:', error);
    } else {
      logger.info('Current page URL:', liveURL);
    }
    await browser.close();
})();
PlaywrightReplay da sessão