Use a node.js puppeteer in a html code for OBS

user_17774683 0
Viewed 162

I am making an overlay for OBS using HTML. I am using puppeteer to scrape my rank from tracker.gg to output it to a switch that will change the image on a local HTML page accordingly. This is my first code ever and I am not really familiar with it yet. So far, I've made the "index.js" to scrape and set a variable for the rank

const puppeteer = require('puppeteer')

async function scrapeProduct(url) {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto(url, {waitUntil: 'domcontentloaded'});
    
    await page.waitForXPath('/html/body/div/div[2]/div[2]/div/main/div[2]/div[3]/div[3]/div[1]/div[1]/div/div[1]/div/div/div/div/div[2]/div[2]/text()')

    const [el] = await page.$x('/html/body/div/div[2]/div[2]/div/main/div[2]/div[3]/div[3]/div[1]/div[1]/div/div[1]/div/div/div/div/div[2]/div[2]/text()')
    
    const txt = await el.getProperty('textContent')
    const rank = await txt.jsonValue()

    var requestrank = rank.substring(15, 19)

    console.log(requestrank)

    await browser.close()
}

scrapeProduct('https://tracker.gg/valorant/profile/riot/"user"/overview')

And I want to link the variable from the "index.js" node to my HTML code so it can change the switch accordingly

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript">                         
            function request() {

                var image = document.getElementById("RankImg")                                                                 ///switch start

                var requestrank = "Diam"                                                                                       ///test the var

                switch (requestrank) {
                    case "Iron":
                        image.src = 'Images/Iron.png' ;
                        break;
                    case "Bron":
                        image.src = 'Images/Bronze.png' ;
                        break;
                    case "Silv":
                        image.src = 'Images/Silver.png' ;
                        break;
                    case "Gold":
                        image.src = 'Images/Gold.png' ;
                        break;
                    case "Plat":
                        image.src = 'Images/Platinum.png' ;
                        break;
                    case "Diam":
                        image.src = 'Images/Diamond.png' ;
                        break;
                    case "Immo":
                        image.src = 'Images/Immortal.png' ;
                        break;
                    case "Radi":
                        image.src = 'Images/Radiant.png' ;
                        break;
                    default:
                        image.src = 'Images/Base.png' ;
                }
            }                                                                                       
        </script>                                           
    </head>
    <body>

        <img src="Images/Base.png" alt="Valorant Rank" id="RankImg" onload="request()">
    
    </body>
</html>

It seems like if I just put in the code from "index.js" inside a script in the HTML file, it doesn't work since I am using puppeteer, so basically trying to open a browser from a browser (or so I've heard).

puppeteer node.js
1 Answers

I found something that works

So I first generate a text file with the node.js

fs.writeFile("/Bibliothèques/Pictures/Graphism/New twitch gold/Widgets/Rank checker/rank.txt", requestrank, function(err) {
    if (err) {
        return console.log(err)
    }
    console.log("The rank file was saved")
})

console.log(requestrank)

And then proceed to read the text file generated in the changing image function to attribute to the switch

async function request() {

    var image = document.getElementById("RankImg") ///set img var

    const response = await fetch('rank.txt') ///get text
    const text = await response.text()

        .then(requestrank => {
            console.log(requestrank)
            switch (requestrank) { ///switch start
                case "Iron":
                    image.src = 'Images/Iron.png';
                    break;
                case "Bron":
                    image.src = 'Images/Bronze.png';
                    break;
                case "Silv":
                    image.src = 'Images/Silver.png';
                    break;
                case "Gold":
                    image.src = 'Images/Gold.png';
                    break;
                case "Plat":
                    image.src = 'Images/Platinum.png';
                    break;
                case "Diam":
                    image.src = 'Images/Diamond.png';
                    break;
                case "Immo":
                    image.src = 'Images/Immortal.png';
                    break;
                case "Radi":
                    image.src = 'Images/Radiant.png';
                    break;
                default:
                    image.src = 'Images/Base.png';
            }
        })
        .catch(error => {
            console.error(error);
        })
} ///Twitch.tv/QuentinCly
user_177746830
Related