Puppeteer
Whether you are looking to get started, or already have an established codebase, Browserless aims to make the transition as easy as possible. At a high-level, you'll need to do the following:
Once we have Browserless account setup, we can simply "connect" to it in our application instead of launching local Chrome.
Screenshot service with Browserless
:::warning
Launch a browser by config. (the full config refers to LaunchNewBrowser)
The
kernelMilestone
parameter has a fixed value of 128 currently.This
proxy
parameter is required.
:::
import express from "express";
import puppeteer from "puppeteer-core";
const token = "your token"; // required
const config = {
proxy: 'your proxy', // required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
// platform: 'windows', // support: windows, mac, linux
// kernel: 'chromium', // only support: chromium
// kernelMilestone: '128', // support: 128
// args: {
// "--proxy-bypass-list": "detect.nstbrowser.io"
// }, // browser args
// fingerprint: {
// userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36', // userAgent supportted since v0.15.0
// },
};
const query = new URLSearchParams({
token: token, // required
config: JSON.stringify(config),
});
const browserWSEndpoint = `https://less.nstbrowser.io/connect?${query.toString()}`;
const app = express();
const getBrowser = async () => puppeteer.connect({
browserWSEndpoint,
defaultViewport: null,
})
app.get("/image", async (req, res) => {
let browser = null;
await getBrowser()
.then(async (browser) => {
const page = await browser.newPage();
await page.goto("https://nstbrowser.io");
const screenshot = await page.screenshot({fullPage: true});
res.end(screenshot, "binary");
await page.close();
await browser.close();
})
.catch((error) => {
if (!res.headersSent) {
res.status(400).send(error.message);
}
})
.finally(() => browser && browser.close());
});
app.listen(8080, () => console.log("Listening on PORT: 8080"));
That's it! Now you don't have to worry about bundling Chrome or it's dependencies in production and can continue to develop your application.
Below is a sample cURL call that will use your new service to ensure it's all working:
$ curl -X GET -o temp.png http://localhost:8080/image