Browser特徴ライブセッション

ライブセッション

スクレイピングブラウザのライブビュー機能を使用すると、ブラウザセッションをリアルタイムで表示および制御できます。具体的には、ライブビュー機能には、アクティブなブラウザセッション内での表示、クリック、入力、スクロールが含まれます。そのため、自動化されたプロセスの監視、自動化スクリプトのデバッグ、ブラウザセッションへの手動による介入を容易に行うことができます。

Scrapelessでは、プレイグラウンドとセッション管理インターフェースの2つの場所で、ブラウザセッションを表示または制御できます。

使い方

Scrapelessブラウザセッションの作成

最初に、セッションを作成する必要があります。これには2つの方法があります。

プレイグラウンド経由でのセッションの作成

image1.png

API経由でのセッションの作成

APIを使用してセッションを作成することもできます。APIドキュメントを参照してください：Scraping Browser API Docs。セッション機能を使用すると、ライブビュー機能を含むこのセッションを管理できます。

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();
})();

ライブセッションの表示

Scrapelessセッション管理インターフェースでは、ライブセッションを簡単に表示できます。表示方法も2つあります。

プレイグラウンドセッションのリアルタイム表示

プレイグラウンドでセッションを作成した後、右側にブラウザがリアルタイムで実行されているのが表示されます。

image2.png

APIセッションのリアルタイム表示

API経由でセッションを作成した後、セッションページに実行中のセッションのリストが表示されます。アクションの詳細をクリックすると、ブラウザの動作をリアルタイムでプレビューできます。ここでは、ライブセッションをオンサイトで表示するか、セッションURLをコピーしてライブセッションを表示するかを選択できます。参考として、操作ビデオを2つ提供しています。

オンサイト表示

image3.gif

ウェブサイト経由でのライブURLの取得

実行中のセッションのリストからライブURLをコピーして、ブラウザに貼り付けることで直接アクセスできます。

image4.gif

API経由でのライブURLの取得

APIを呼び出すことでライブURLを取得できます。次のコード例では、まずRunning Sessions APIを使用して現在実行中のすべてのセッションを取得し、次にLive URL APIを使用して特定のセッションのライブURLを取得します。

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 => { });
CDP経由でのライブURLの取得

コードの実行中にライブURLを取得するには、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();
})();
Playwrightセッションリプレイ