Browserless - Screenshot and send image

Help
,
1

Hello,

I have a flow that sends tradingview alerts to discord.
Now I want to send along with this alert, a screenshot of the graph.

I used pipedream’s browserless integration but I’m a little lost on how to send this screenshot, from what I’ve seen, the result is just a base64 code.

How can I send this screenshot to discord or upload it to some storage service?

thanks!

2

Hello @hgrams, you can save the image into Pipedream tmp dir, and use the file path to upload it into Discord using Send with File action

Screen Shot 2022-12-27 at 15.14.21
Screen Shot 2022-12-27 at 15.14.211826×902 79.7 KB

Screen Shot 2022-12-27 at 15.14.02
Screen Shot 2022-12-27 at 15.14.021824×1454 246 KB

1 Like
3

Hello @vunguyenhung, I’m trying to save the file using the examples, but I’m not succeeding.

Can you help me see where I’m going wrong? I’m not a programmer

image
image906×888 35.9 KB

4

@hgrams, you can search on Google on how to save the base64 image to file system. Or you can upload the image to somewhere (using Pipedream action such as Google Drive, Dropbox, etc…), then put the download link into the Discord action.

On another note, if you’d like to hire a Pipedream expert, you’re welcome to use this link: Connect with a Pipedream Partner

1 Like
5

Ok, now I got it. Thanks!

However, the screenshot had a small screen size and did not load all the chart indicators.

Is there any way to configure this in browserless?

image

6

Hi @hgrams

Here’s the code that powers the Browserless - Take Screenshot action:

You can use this in a Node.js code step and modify it to set a viewport height and width to adjust the screenshot size.

Here’s a link to the Puppeeter docs as well: Viewport interface | Puppeteer

7

Thanks!
I’ll study the code and see what I can do.

8

Just to signal how I solved it.
I assembled the following code. I still have a problem because it’s not loading all indicators in the layout for not being logged in.

code to take the screenshot

// legacy_hash_id: a_oViVKv
import puppeteer from "puppeteer-core";

export default {
  key: "browserless-take-screenshot",
  name: "Take a Screenshot",
  version: "0.5.1",
  type: "action",
  props: {
    browserless: {
      type: "app",
      app: "browserless",
    },
    url: {
      type: "string",
      label: "URL",
      description: "Enter the URL you'd like to take a screenshot of here",
    },
    filename: {
      type: "string",
      label: "Name File",
      description: "Enter the filename",
    }
  },
  async run({ $ }) {
    const browser = await puppeteer.connect({
      browserWSEndpoint: `wss://chrome.browserless.io?token=${this.browserless.$auth.api_key}`,
    });
    const page = await browser.newPage();

    const { filename } = this;
    const { url } = this;
    await page.setViewport({ width: 1920, height: 1080 });
    await page.goto(url);

    // Hide widgetbar
    await page.waitForSelector('body > div.js-rootresizer__contents.layout-with-border-radius > div.layout__area--right > div > div.widgetbar-tabs > div > div > div > div > div:nth-child(1)')
    await page.click('body > div.js-rootresizer__contents.layout-with-border-radius > div.layout__area--right > div > div.widgetbar-tabs > div > div > div > div > div:nth-child(1)')
    
    // select element to screenshot
    await page.waitForSelector('body > div.js-rootresizer__contents.layout-with-border-radius > div.layout__area--center')
    const select = await page.$('body > div.js-rootresizer__contents.layout-with-border-radius > div.layout__area--center')
    
    // Screenshot
    const screenshot = await select.screenshot();


    // export the base64-encoded screenshot for use in future steps,
    // along with the image type and filename
    $.export("screenshot", Buffer.from(screenshot, "binary").toString("base64"));
    $.export("type", "png");
    $.export(
      "filename",
      `${filename.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "-")}.png`,
    );

    await browser.close();
  },
};

code to save the screenshot

import fs from "fs"

export default defineComponent({
  async run({ steps, $ }) {

    const data = steps.take_screenshot.screenshot

    // base64 data to buffer
    var buffer = Buffer.from(data,'base64')
    // buffer to image
    fs.writeFileSync('/tmp/' + steps.take_screenshot.filename, buffer)
  }
});

I need to configure a tradingview login, but I use google login + 2FA and I’m looking for a solution, otherwise, I’ll have to change the tradingview login to common login and password.

Thanks for your answers.

image