improve browser screenshots performance

- pause video when no screenshot taken - set it to max quality
lluisd · May 20, 2024 · cef99df · cef99df
1 parent 6e901e0
commit cef99df
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 19 deletions.
diff --git a/config/index.js b/config/index.js
@@ -18,7 +18,7 @@ module.exports = {
     browserless: {
         url: process.env.BROWSERLESS_URL,
         token: process.env.BROWSERLESS_TOKEN,
-        version: process.env.BROWSERLESS_VERISON
+        version: process.env.BROWSERLESS_VERSION
     },
     mariadb: {
         host: process.env.MYSQL_HOST,

diff --git a/helpers/browserApi.js b/helpers/browserApi.js
@@ -6,15 +6,33 @@ class PuppeteerApi {
     page = null
     svgImage = null
 
-    async createNewBrowser() {
-        let url = `${config.browserless.url}?token=${config.browserless.token}`
+    constructor() {
+        this.url = `${config.browserless.url}?token=${config.browserless.token}`
         if (config.browserless.version === 'v2') {
             const launchArgs = JSON.stringify({
-                args: ["--no-sandbox", "--window-size=1920,1080", "--disable-infobars", "--disable-setuid-sandbox", "--start-maximized", "--use-gl=angle", "--use-angle=gl"],
-              });
-            url = `${config.browserless.url}/chrome?token=${config.browserless.token}&launch=${btoa(launchArgs)}&blockAds=true`
+                stealth: true,
+                //ignoreHTTPSErrors: true,
+                args: ["--no-sandbox", "--window-size=1920,1080", "--disable-infobars", "--disable-setuid-sandbox", "--start-maximized", "--use-gl=angle", "--use-angle=gl"]
+            });
+            this.url = `${config.browserless.url}/chrome?token=${config.browserless.token}&launch=${btoa(launchArgs)}&blockAds=true`
         }
-        this.browser = await puppeteer.connect({ browserWSEndpoint: url, defaultViewport : null })
+    }
+
+    async connectBrowser() {
+        this.browser = await puppeteer.connect({ browserWSEndpoint: this.url, defaultViewport : null })
+    }
+
+    async disconnectBrowser() {
+        if (this.browser) await this.browser.disconnect()
+    }
+
+    async closeBrowser() {
+        console.log("browser closed")
+        await this.browser.close()
+    }
+
+    async createNewBrowser() {
+        await this.connectBrowser()
         this.browser.on('disconnected', async () => {
             console.log('disconnected browser')
             if (this.browser) await this.browser.close()
@@ -30,17 +48,35 @@ class PuppeteerApi {
 
     async handleStart() {
         await this.page.setViewport({ width: 1920, height: 1080 })
-        await this.page.goto("https://www.twitch.tv/" + config.twitch.channels, { waitUntil: ['networkidle0',  'domcontentloaded'] })
+        await this.page.goto("https://www.twitch.tv/" + "manzana_oscura", { waitUntil: ['networkidle0',  'domcontentloaded'] })
+        await new Promise(r => setTimeout(r, 1000))
         await this.removeElementsAndGetDiv()
     }
 
     async removeElementsAndGetDiv() {
         await this.page.waitForSelector('div.persistent-player')
-        await this.page.$eval('button[data-a-target="consent-banner-accept"]', el =>  el.click()).catch(() => {})
+        await new Promise(r => setTimeout(r, 500))
+        await this.page.$eval('div.consent-banner', el =>  el.remove()).catch(() => {})
         await this.page.$eval('#twilight-sticky-footer-root', el => el.remove()).catch(() => {})
         await this.page.$eval('button[data-a-target="content-classification-gate-overlay-start-watching-button"]', el =>  el.click()).catch(() => { })
-        //await this.page.$eval('button[data-a-target="right-column__toggle-collapse-btn"]', el =>  el.click()).catch(() => { "toggle collapse btn"})
-        await this.page.$eval('.video-player__default-player', el => el.remove())
+        await this.page.$eval('.video-player__default-player', el => el.style.display = "")
+        const volumeValue = await this.page.$eval('input[data-a-target="player-volume-slider"]', el => el.value);
+        const volume = parseInt(volumeValue)
+        if (typeof volume === 'number' && volume > 0) {
+            await this.page.$eval('.video-player__default-player button[data-a-target="player-mute-unmute-button"]', el =>  el.click()).catch(() => {})
+        }
+        await this.page.$eval('.video-player__default-player button[data-a-target="player-play-pause-button"][data-a-player-state="playing"]', el =>  el.click()).catch(() => {})
+        await this.page.$eval('button[data-a-target="player-settings-button"]', el =>  el.click()).catch(() => {})
+        await this.page.$eval('button[data-a-target="player-settings-menu-item-quality"]', el =>  el.click()).catch(() => {})
+        const inputs = await this.page.$$eval('input[name="player-settings-submenu-quality-option"]', elements => {
+            return elements.map(e => e.id);
+        }).catch(() => {})
+        if (inputs && inputs.length > 1) {
+            const inputId = inputs[1]
+            await this.page.click('#' + inputId).catch(() => {})
+        }
+
+        await this.page.$eval('.video-player__default-player', el => el.style.display = "none")
     }
 
     async refreshPage() {
@@ -49,22 +85,27 @@ class PuppeteerApi {
     }
 
     async takeScreenshot(path) {
+        let screenshot = null
+        await this.page.$eval('.video-player__default-player button[data-a-target="player-play-pause-button"][data-a-player-state="paused"]', el =>  el.click()).catch(() => {})
+        await new Promise(r => setTimeout(r, 500))
         this.svgImage = await this.page.$('div.persistent-player')
         if (this.svgImage) {
-            return await this.svgImage.screenshot({
+             screenshot = await this.svgImage.screenshot({
                 path: path,
                 type: "jpeg",
                 quality: 100,
                 captureBeyondViewport: false
             })
         }
-        return null
+        this.page.$eval('.video-player__default-player button[data-a-target="player-play-pause-button"][data-a-player-state="playing"]', el =>  el.click()).catch(() => {})
+
+        return screenshot
     }
 
     async checkIfBrowserIsOpen() {
         let isConnected = false
         if (this.browser) {
-            isConnected = await this.browser.isConnected()
+            isConnected = this.browser.connected
         }
 
         return isConnected
@@ -78,10 +119,6 @@ class PuppeteerApi {
 
         return !isClosed
     }
-
-    async closeBrowser() {
-        await this.browser.close()
-    }
 }
 
 const browserApi = new PuppeteerApi()

diff --git a/services/browser.js b/services/browser.js
@@ -17,7 +17,6 @@ async function getScreenshot() {
         sharp(bufferImage)
             .resize({ width: 200 })
             .toFile(`public/images/t_${name}.jpg`).catch(() => { console.error('rsize image for thumbnail')})
-        browserApi.refreshPage().catch(() => { console.error('refreshPage on refreshPage')})
     } catch (error) {
         console.log(error)
         return null