Embedded Videos On Web Page Preventing Puppeteer Screen Shots

I have written an application that goes to a webpage and takes a screen shot of a small portion of that page.

The app uses headless puppeteer to navigate to a page like the following two examples and then takes a screen shot of one of the “match” grids on the page:

  1. Iron Mosquitos - Team 5653 - The Blue Alliance (selector = “#\32 022mnst > div.col-sm-8”)
  2. The Ravonics Revolution - Team 1710 - The Blue Alliance (selector = “#\32 022new > div.col-sm-8”)

In example 1, I have no issues and the screen shot is returned as a png file. In example 2, the screen shot never happens. I wait 5-10 minutes and then eventually have to interrupt the process. I have verified that the page loads, and the element that I want a screen shot of exists. I have also verified that this page works with the same code locally on my PC.

Here is the test code that I am using to verify that it works on my PC and does not work in Glitch:

const puppeteer = require("puppeteer");

async function testfunction() {
    const browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    const page = await browser.newPage();
    await page.setViewport({
        width: 1920,
        height: 1080,
        deviceScaleFactor: 1,
    });
    console.log("newPage");
    await page.goto("<New users can only put 2 links in a community post>"); //UPDATE WEBSITE HERE
    console.log("TBA");
    const matchTable = await page.$("#\\32 022new > div.col-sm-8"); //PUT SELECTOR HERE
    console.log("matchTable found");
    await matchTable.screenshot({ path: './schedule.png' });
    console.log("done!");
    await browser.close();
    return true;
}

testfunction().then(console.log("Test Function"));

Any advice or insight would be appreciated.

If the video is cross-origin (hosted on another website) then you probably aren’t going to be able to access any of the information you need to screenshot it. Not sure if this is what you meant.

1 Like

The video is cross origin as it is hosted on YouTube.

I am trying to avoid the video in my screenshot since videos are not supported in Puppeteer. When I run the command on my local PC, the screenshot is taken and saved correctly. On Glitch, however, the screenshot process never occurs. I get this in my console:

newPage
TBA
matchTable Found

Which are all of my console.log lines. There are no errors, and the process doesn’t seem to stop until I force an edit to the code in which it gives an error about not being able to stop in 5 seconds.

I believe I have found a solution, something between boosting my project in Glitch and adding these arguments to the puppeteer launch command has solved the problem:

args: [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--disable-dev-shm-usage",
      "--disable-accelerated-2d-canvas",
      "--no-first-run",
      "--no-zygote",
      "--disable-gpu",
      "--isolate-origins=https://youtu.be,https://thebluealliance.com"
    ]

I will do some more testing to verify before marking this as “solved”.

1 Like