Use remote browserless

.github/workflows/main_twitch-mz-bot.yml

@@ -30,7 +30,7 @@ jobs:
           envkey_TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
           envKey_TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
           envKey_EXTERNAL_URL: ${{ secrets.EXTERNAL_URL }}
-
+          envKey_BROWSERLESS_URL: ${{ secrets.BROWSERLESS_URL }}
       - name: Set up Node.js version
         uses: actions/setup-node@v4
         with:

.puppeteerrc.cjs

@@ -4,5 +4,5 @@ const { join } = require("path");
  */
 module.exports = {
     // Changes the cache location for Puppeteer.
-    cacheDirectory: join(__dirname, ".cache", "puppeteer"),
-};
+    cacheDirectory: join(__dirname, "cache", "puppeteer"),
+};

config/index.js

@@ -16,5 +16,6 @@ module.exports = {
     telegram: {
         apiKey: process.env.TELEGRAM_TOKEN,
         chatId: process.env.TELEGRAM_CHAT_ID
-    }
+    },
+    browserlessUrl: process.env.BROWSERLESS_URL
 }

handlers/stream.js

@@ -11,13 +11,14 @@ const twitchUrl = 'https://www.twitch.tv/'
 class Stream {
     async captureScreenshot(target, bot, notifierBot, user) {
         const image = await BrowserService.getScreenshot()
-        await bot.say(target, `Captura de ${user}: ${config.externalUrl}/images/${image.fileName}`)
-        const channel = await TwitchService.getChannel()
-        await notifierBot.sendPhoto(config.telegram.chatId, image.buffer, {
-            caption: `Captura del directo _${channel.title}_ \n por *${user}*`,
-            parse_mode: 'Markdown'
-        })
-
+        if (image) {
+            await bot.say(target, `Captura de ${user}: ${config.externalUrl}/images/${image.fileName}`)
+            const channel = await TwitchService.getChannel()
+            await notifierBot.sendPhoto(config.telegram.chatId, image.buffer, {
+                caption: `Captura del directo _${channel.title}_ \n por *${user}*`,
+                parse_mode: 'Markdown'
+            })
+        }
     }
 
     async catchStream (bot) {

lib/messenger.js

@@ -77,8 +77,8 @@ class Messenger {
             return handlers.train.getNextAVE(target, textSplit.slice(1).join(' '), this.bot)
         }
 
-        //if (textSplit.length > 0 && inputParser.isAskingForTakeScreenshot(textSplit[0]))
-            //return handlers.stream.captureScreenshot(target, this.bot, this.notifier.bot, context['display-name'])
+        if (textSplit.length > 0 && inputParser.isAskingForTakeScreenshot(textSplit[0]))
+            return handlers.stream.captureScreenshot(target, this.bot, this.notifier.bot, context['display-name'])
     }
 
     handleHosting (channel, target, viewers) {

package.json

@@ -17,7 +17,7 @@
     "mssql": "^10.0.2",
     "node-cron": "^3.0.3",
     "node-telegram-bot-api": "^0.64.0",
-    "puppeteer": "^21.11.0",
+    "puppeteer-core": "^21.11.0",
     "tmi.js": "^1.8.5"
   },
   "scripts": {

services/browser.js

@@ -1,27 +1,33 @@
 const config = require('../config')
-const puppeteer = require("puppeteer");
+const puppeteer = require("puppeteer-core")
 require('mathjs')
 
 async function getScreenshot() {
-    const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });
-    const page = await browser.newPage()
-    const session = await page.target().createCDPSession()
-    await session.send("Page.enable")
-
-    await page.setViewport({ width: 1920, height: 1080 })
-
-    await page.goto("https://www.twitch.tv/" + config.twitch.channels, { waitUntil: 'networkidle0' })
-    await page.waitForSelector('div.persistent-player')
-    await page.$eval('.video-player__default-player', el => el.remove())
-    const svgImage = await page.$('div.persistent-player')
-    const name = Math.random().toString(36).substring(2,8)
-    const bufferImage = await svgImage.screenshot({
-        path: `public/images/${name}.png`,
-        omitBackground: true
-    })
-    await browser.close()
-
-    return {buffer: bufferImage, fileName: `${name}.png` }
+    try {
+        const browser = await puppeteer.connect({ browserWSEndpoint: `wss://${config.browserlessUrl}?launch={"headless":"new"}` })
+        const page = await browser.newPage()
+        const session = await page.target().createCDPSession()
+        await session.send("Page.enable")
+
+        await page.setViewport({ width: 1920, height: 1080 })
+
+        await page.goto("https://www.twitch.tv/" + config.twitch.channels, { waitUntil: 'networkidle0' })
+        await page.waitForSelector('div.persistent-player')
+        await page.$eval('.video-player__default-player', el => el.remove())
+        const svgImage = await page.$('div.persistent-player')
+        const name = Math.random().toString(36).substring(2,8)
+        const bufferImage = await svgImage.screenshot({
+            path: `public/images/${name}.png`,
+            omitBackground: true
+        })
+        await browser.close()
+
+        return {buffer: bufferImage, fileName: `${name}.png` }
+    } catch (error) {
+        console.log(error)
+        return null
+    }
+
 }
 
 

yarn.lock

@@ -2075,7 +2075,7 @@ punycode@^2.1.1, punycode@^2.3.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-[email protected]:
+[email protected], puppeteer-core@^21.11.0:
   version "21.11.0"
   resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-21.11.0.tgz#6c60ec350f1a3a2152179c68166da6edfce18a23"
   integrity sha512-ArbnyA3U5SGHokEvkfWjW+O8hOxV1RSJxOgriX/3A4xZRqixt9ZFHD0yPgZQF05Qj0oAqi8H/7stDorjoHY90Q==