Quantcast
Channel: Active questions tagged youtube-api - Stack Overflow
Viewing all articles
Browse latest Browse all 3640

youtube api in reactjs project

$
0
0

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;

Viewing all articles
Browse latest Browse all 3640

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>