I have been learning ReactJS for the past 4 months. To make it more interesting, I decided to create a small project where I will be able to pull data from the YouTube API and check if a gaming channel is currently streaming LIVE or not. I would say I did it with the Twitch API very easily, but whatever I try with the YouTube API is not working.I create the API key in google cloud, OAuth 2.0 Client IDs, registered the app for testing, and added myself as a Test user...
First I tired just with the youtube api key + username, but after some time I tried to pull out the youtube channel_id and go that way but with no luck.
After a week of tries, I decided It's time to ask for help, can someone guide me to the right path? :D
import React, { useState, useEffect } from "react";import axios from "axios";const YOUTUBE_API_KEY = "MY KEY";const getChannelId = async ({ username }) => { const url = `https://www.googleapis.com/youtube/v3/channels?part=id&forUsername=${username}&key=${YOUTUBE_API_KEY}`; const response = await axios.get(url); return response.data.items[0].id;};const LiveYoutubeStatusChecker = ({ username }) => { const [isLive, setIsLive] = useState(false); useEffect(() => { const checkLiveStatus = async () => { try { // Retrieve the channel ID for the specified username const channelId = await getChannelId(username); // Use the channel ID to retrieve information about live events for that channel const url = `https://www.googleapis.com/youtube/v3/liveBroadcasts?part=snippet,status&broadcastStatus=active&broadcastType=all&channelId=${channelId}&key=${YOUTUBE_API_KEY}`; const response = await axios.get(url); const liveBroadcasts = response.data.items; if (liveBroadcasts.length > 0) { // The channel is currently live setIsLive(true); } else { // The channel is not currently live setIsLive(false); } } catch (error) { console.error(error); } }; checkLiveStatus(); const intervalId = setInterval(checkLiveStatus, 3000); return () => clearInterval(intervalId); }, [username]); return (<div> {isLive ? (<p> LIVE </p> ) : (<p> OFFLINE </p> )}</div> );};export default LiveYoutubeStatusChecker;