muralikg / puppetcam

Export puppeteer tab as webm video
MIT License
322 stars 62 forks source link

Working with navigation and other steps? #5

Closed theianjohnson closed 6 years ago

theianjohnson commented 6 years ago

Thanks for putting this working example together, it works great as-is 👍 I just had a question while trying to add more steps to be recorded - it seems like the saved video will only have a few (if even more than one) frame saved.

Here's your main() function with my few extra lines for testing

async function main() {
    xvfb.startSync()
    var url = process.argv[2], exportname = process.argv[3]
    if(!url){ url = 'http://tobiasahlin.com/spinkit/' }
    if(!exportname){ exportname = 'spinner.webm' }
    const browser = await puppeteer.launch(options)
    const pages = await browser.pages()
    const page = pages[0]
    await page._client.send('Emulation.clearDeviceMetricsOverride')
    await page.goto(url, {waitUntil: 'networkidle2'})
    await page.setBypassCSP(true)

    // Perform any actions that have to be captured in the exported video
    await page.waitFor(8000)

    // Added steps
    await page.goto('https://google.com', {waitUntil: 'networkidle2'})
        await page.type('#tsf [name="q"]', 'sample search query');
        let navigationPromise = page.waitForNavigation();
        await page.click('#tsf [type=submit]');
        await navigationPromise;
        await page.waitFor(5000)
    // -----

    await page.evaluate(filename=>{
        window.postMessage({type: 'SET_EXPORT_PATH', filename: filename}, '*')
        window.postMessage({type: 'REC_STOP'}, '*')
    }, exportname)

    // Wait for download of webm to complete
    await page.waitForSelector('html.downloadComplete', {timeout: 30000})
    await browser.close()
    xvfb.stopSync()
}

And here is the single frame spinner.webm that was saved image

Any idea what's going on?

muralikg commented 6 years ago

There was a bug in background.js you can try with the update code and here is a sample video based on your example

Puppetcam

theianjohnson commented 6 years ago

That is amazing man, thank you 👍