I tried executing the code below twice, first time I tried to return the vid from the p.evaluate function, it returned an empty object. The second time I tried returning the vid.src from the same function and it returned blob:https://www.youtube.com/2e29a76f-f87b-4ebc-85a3-faa1ad671e3d. How can an empty object preserve a value and if its not empty why does it appear so when trying to return it on its own? I need the video itself and not the link in order to convert in into a utf-8 format so I cant just use the source of it.

The code returning the video:

const p = require("puppeteer");

const func = async () => {
  const browser = await p.launch({ headless: true, slowMo: 10 });
  const page = await browser.newPage();
  await page.goto("https://www.youtube.com/watch?v=dXjKh66BR2U");
  await page.waitForSelector(".html5-main-video");
  const vid = await page.evaluate(() => {
    const vid = document.querySelector(".html5-main-video");
    return vid;
  });
  console.log(vid);
  await browser.close();
};

func();

The code returning the src:

const p = require("puppeteer");

const func = async () => {
  const browser = await p.launch({ headless: true, slowMo: 10 });
  const page = await browser.newPage();
  await page.goto("https://www.youtube.com/watch?v=dXjKh66BR2U");
  await page.waitForSelector(".html5-main-video");
  const vid = await page.evaluate(() => {
    const vid = document.querySelector(".html5-main-video");
    return vid.src;
  });
  console.log(vid);
  await browser.close();
};

func();