capture too a screenshot

[alphaonex86]

Hi,

Can you capture too a screenshot and put into json as base64 png?

Cheers,

[cyrus-and]

Hi, you can implement that in a postHook, use this wiki entry as a reference.

[alphaonex86]

I'm more searching integrate the mainline of chrome-har-capturer to not maintain my own branch

[cyrus-and]

chrome-har-capturer is also a library and hooks are the intended way to extend it with custom features, you do not need to maintain your own branch.

[alphaonex86]

I'm node nodejs dev, i'm unsure how do this.

[cyrus-and]

You can take inspiration from the client (you don't need all of that) and the screenshot part can be easily implemented like this:

const fs = require('fs');

async function postHook(url, client) {
    const {data} = await client.Page.captureScreenshot();
    // TODO pick a unique name and handle errors
    fs.writeFileSync('screenshot.png', data, 'base64');
}

There are potentially too many variables to accomodate if I should decide to implement this feature in the client.

[alphaonex86]

I have put into /usr/local/bin/chrome-har-capturer

function postHook(url, client) {
    const tempReturn = new Promise((fulfill, reject) => {
        setTimeout(fulfill, program.grace || 0);
    });
    const {data} = Page.captureScreenshot();
        fs.writeFileSync('/tmp/screenshot.png', Buffer.from(data, 'base64'));
    return tempReturn;
}

but generate nothing

[cyrus-and]

You need to await Page.captureScreenshot and use client.Page:

async function postHook(url, client) {
    const tempReturn = new Promise((fulfill, reject) => {
        setTimeout(fulfill, program.grace || 0);
    });
    const {data} = await client.Page.captureScreenshot();
    fs.writeFileSync('/tmp/screenshot.png', Buffer.from(data, 'base64'));
    return tempReturn;
}

[alphaonex86]

It was say somethings like: can't use await into async function

[alphaonex86]

SyntaxError: await is only valid in async function at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:616:28) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Function.Module.runMain (module.js:693:10) at startup (bootstrap_node.js:191:16) at bootstrap_node.js:612:3

[cyrus-and]

It was say somethings like: can't use await into async function

Yes, that's why I wrote async function postHook ....

[alphaonex86]

Thanks, now I search how inject into output as json field, ...

[cyrus-and]

If this hook resolves to a value then it is included in the resulting HAR object as the value of the _user key of the this URL's page object.

[alphaonex86]

I had tryed, but failed for now

[cyrus-and]

Show me what you got so far.

[alphaonex86]

https://pastebin.com/J8FYHL8W

[cyrus-and]

You didn't even try what I mentioned in that comment... anyway you want something like this:

async function postHook(url, client) {
    await new Promise((fulfill, reject) => {
        // allow the user specified grace time
        setTimeout(fulfill, program.grace || 0);
    });
    const {data} = await client.Page.captureScreenshot();
    return {
        screenshot: data
    };
}

This will produce the following HAR:

{
    "log": {
        "version": "1.2",
        "creator": {
            "name": "Chrome HAR Capturer",
            "version": "0.13.1",
            "comment": "https://github.com/cyrus-and/chrome-har-capturer"
        },
        "pages": [
            {
                "id": "page_1_30910655436578094",
                "title": "http://example.com",
                "startedDateTime": "2019-01-07T19:03:43.647Z",
                "pageTimings": {
                    "onContentLoad": 257.94699999690056,
                    "onLoad": 258.1409999988973
                },
                "_user": {
                    "screenshot": "DATA"
                }
            }
        ],
        "entries": [
            ...
        ]
    }
}

[alphaonex86]

Thanks, now I will search how resize (without change the chrome res) and save to base64 jpeg with 70% quality

[cyrus-and]

I guess you'll need an additional Node.js library to do that. You're welcome!

[hoax-killer]

I was also interested in this feature. For us it is useful if we wanted visual confirmation if the web-page was loaded completely.

To the developers/ @cyrus-and : is there any other way for us to determine if the web page was loaded completely? With certain websites that have ads, etc. or keep refreshing certain assets on the webpage, how can we for sure know that we should say stop the har-capture?

[hoax-killer]

Looks like my question was answered in #87