I have a React application. I am trying to live stream on YouTube. What i am trying to achieve is, when i am live on YouTube, i want a certain part of the website to show the live streamed video as embedded. When i am not live, i want this section of the website hidden.
I have tried using the google v3 API but the cost of API calls to search for live videos on the channel is too expensive (i was doing a query to the API and if a video returned i would show the iframe on the site, and if not just hide it). However, with this quota and the usage of the site, this is not a suitable solution.
I also cannot render the content in an iFrame and then just 'getElementById' because then i'd get CORS restrictions. I thought about building some sort of proxy that could just get the HTML from the youtube page and return it to me as a string (by passing the CORS issues), then just checking for an ID to determine if the channel was live or not.
I've tried alot of searching but either im looking for the wrong things or there is limited support for what i'm trying to do. Any other suggestions on how i can achieve this please?
thank you in advance
