Hey @jonplackett! as @alex_smart noticed in another comment, I am performing on-the-fly searches on the client.
Some requests can't be sent from the browser directly to YouTube due to the Content Security Policy directives that YouTube has in place, though.
For example, if you try to run this code to fetch a YouTube video page in the browser console from any non-YouTube site (like Hacker News or VideoMentions), you'll see the it errors out:
Some requests can't be sent from the browser directly to YouTube due to the Content Security Policy directives that YouTube has in place, though.
For example, if you try to run this code to fetch a YouTube video page in the browser console from any non-YouTube site (like Hacker News or VideoMentions), you'll see the it errors out:
(async () => { const response = await fetch('https://www.youtube.com/watch?v=irjc1nJ1eJs'); console.log(response); })();
That's why my app uses serverless API endpoints as a middleman. It works like this:
1. Browser fires off a request to the API endpoint.
2. The serverless function Node.js process spins up, fetches the data from YouTube, returns the response, then spins back down.
3. My app takes the video data in the response, saves it in memory, searches it for matches, and re-renders the UI to show the matches, if any.
I built my app to do as much work as possible client-side, and to use serverless function API endpoints for anything that can't be done in-browser.
I replied to @lewisjoe's comment above this one with some more details about tricks I'm employing to make searches fast.
Thanks for checking out my project!