puppeteer can not take screenshot of react player in nextjs - node.js

Question

I have a simple nextjs page which has only one div with simple h1 Tag and React video player component. I want to take a screenshot of my view of h1 tag and video player whatever is playing in that moment using puppeteer. I have implemented puppeteer but it does not take the screenshot of video player instead it returns only h1 tag and blank afterwards.
Actual image I want:
Puppeteer screenshot:
I am using nextjs client side api folder to call puppeteer.
Node js code:
import puppeteer from "puppeteer";
export default async function My(req, res) {
const url = req.query.url;
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const img = await page.screenshot({ path: "output.png" });
console.log("img", img);
await page.close();
await browser.close();
return res.json("done");
}
My component:
import styles from "../styles/Home.module.css";
import React, { useEffect, useRef, useState } from "react";
import dynamic from "next/dynamic";
const Player = dynamic(() => import("../components/player"), {
ssr: false,
});
export default function Home() {
useEffect(() => {
if (typeof window === undefined) {
return;
}
const url = "http://localhost:3000";
setTimeout(() => {
fetch(`http://localhost:3000/api/scrapper?url=${url}`)
.then((res) => {
res.json();
})
.then((data) => {
console.log(data);
});
}, 10000);
}, []);
return (
<>
<div
crossOrigin="true"
id="capture"
style={{ display: "block" }}
>
<h3>Hello</h3>
<Player />
</div>
<div style={{ marginTop: "100px" }} id="placement"></div>
</>
);
}

Answer 1

I solved it. Just added waitUntil Parameter in goto method. Actually the reason was puppeteer was taking screenshot before the player could initialize itself in the dom. That's why picture was blank. networkidle0 waits until the component is functional.
await page.goto(url, { waitUntil: "networkidle0" });