Sessão ao Vivo
O recurso de visualização ao vivo do Agent Browser permite que você visualize e controle sessões de 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 monitorar facilmente processos automatizados, depurar scripts de automação e intervir manualmente em sessões de navegador.
No Scrapeless, você pode visualizar ou controlar sessões de navegador em dois lugares: o playground e a interface de gerenciamento de sessões.
Como Usar
Criar uma Sessão do Scrapeless Browser
Primeiro, você precisa criar uma sessão. Há duas maneiras de fazer isso:
Criar uma Sessão via Playground
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 Agent Browser. 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({
sessionName: 'sdk_test',
sessionTTL: 180,
proxyCountry: 'US',
sessionRecording: 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 visualizar facilmente sessões ao vivo. Também há duas maneiras de visualizá-las:
Visualizar a Sessão do Playground em Tempo Real
Após criar uma sessão no playground, você pode ver o navegador em execução em tempo real no lado direito.
Além da visualização em tempo real incorporada no Playground, você também pode abrir instantaneamente a sessão ao vivo em uma aba do navegador. Basta clicar no ícone ‘Open Live URL’ localizado no canto superior direito do painel de visualização em tempo real.
Visualizar a 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 pré-visualizar 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
Obter a Live URL via site
Você pode copiar a Live URL da lista de sessões em execução e colá-la em um navegador para acessá-la diretamente.
Obter a Live URL via API
Você pode obter a Live URL chamando a API. No exemplo de código a seguir, primeiro buscamos todas as sessões atualmente em execução usando a Running Sessions API e, em seguida, recuperamos a Live URL de uma sessão específica usando a Live URL API:
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 a Live URL via CDP
para obter a Live Url enquanto seu código está em execução, 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({
sessionName: 'sdk_test',
sessionTTL: 180,
proxyCountry: 'US',
sessionRecording: 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();
})();