YouTube 实时订阅者数量

请订阅，这是教程：Youtube Live 订阅者数量

这是一个 React Web 应用，用于显示 YouTube 的实时订阅者数量。它使用频道用户名从 YouTube Data API 获取数据。

特征

实时订阅者数量：该应用程序每 5 秒获取并更新一次订阅者数量。
YouTube API 集成：使用 YouTube 数据 API v3 检索频道统计信息。
环境变量：通过文件进行 API 密钥管理.env以确保安全。

演示

入门

先决条件

Node.js：确保您已安装 Node.js。
YouTube API 密钥：您需要一个 YouTube 数据 API 密钥。点击此处获取。

安装

克隆存储库：



   git clone https://github.com/VinCoD/youtube-live-sub-count
   cd youtube-live-sub-count

安装依赖项：



   npm install

.env在项目根目录中创建一个文件：



   REACT_APP_YOUTUBE_API_KEY=your_youtube_api_key_here

启动开发服务器：



   npm start

在浏览器中打开该应用程序：

该应用应该会自动在您的浏览器中打开，网址为http://localhost:3000。如果没有打开，您可以手动导航到此网址。

用法

更新用户名：

在中src/api/youtube.js，将其替换'YOUR_CHANNEL_USERNAME'为您要跟踪的频道的 YouTube 用户名。



   const USERNAME = 'YOUR_CHANNEL_USERNAME';

自定义获取间隔：

该应用每 5 秒获取一次订阅者数量。您可以在LiveSubCount组件中调整此间隔：



   const intervalId = setInterval(fetchSubCount, 5000); // Fetch every 5 seconds

部署

要部署应用程序，您可以构建它以进行生产并将其托管在 GitHub Pages、Netlify 或 Vercel 等服务上。

构建应用程序：



   npm run build

build将目录部署到您首选的托管服务。

贡献

欢迎贡献！请 fork 代码库并创建拉取请求。

执照

本项目遵循 MIT 许可证。详情请参阅LICENSE文件。

致谢

接触

文森特·奥蒂诺：vincentotieno161@gmail.com
GitHub：VinCoD
YouTube：KwargDevs

API 响应示例



{
    "kind": "youtube#channelListResponse",
    "etag": "gZC1bvkr93--vyIc5-kUeSqXT0A",
    "pageInfo": {
        "totalResults": 1,
        "resultsPerPage": 5
    },
    "items": [
        {
            "kind": "youtube#channel",
            "etag": "lt20B3xn1o8JmPY6F3SvLu92joQ",
            "id": "UC40gjlEBqBN2Flb3KC6WlHA",
            "snippet": {
                "title": "Pseudomonous",
                "description": "Welcome to Pseudomonous, your ultimate gaming destination! 🎮\n\nJoin me as I stream the latest and greatest in gaming, including Fortnite, Call of Duty, EA Sports FC 24, and Grand Theft Auto. Get ready for epic gameplay, exciting moments, and a community of gamers who share your passion. \n\n🔔 Subscribe for live streams, gaming clips, and highlights!\n👍 Don't forget to like, comment, and share!\n\n#Pseudomnous #Gaming #Fortnite #CallofDuty #EASportsFC24 #GTA #PS5 #PS4 #LiveStreaming #GamingCommunity #GamingClips #Shorts #ForYou #FYP #Comedy #Food #euro2024 #championsleague #usa \n",
                "customUrl": "@pseudomonous",
                "publishedAt": "2021-01-19T11:24:06.024573Z",
                "thumbnails": {
                    "default": {
                        "url": "https://yt3.ggpht.com/kSsNDl3M6rSs_qMz0_gO9aeqlHtca-Z3BovwnSwyCYjGgh6PB2OiFSp7hkWPjBw5Gu1umhztjQ=s88-c-k-c0x00ffffff-no-rj",
                        "width": 88,
                        "height": 88
                    },
                    "medium": {
                        "url": "https://yt3.ggpht.com/kSsNDl3M6rSs_qMz0_gO9aeqlHtca-Z3BovwnSwyCYjGgh6PB2OiFSp7hkWPjBw5Gu1umhztjQ=s240-c-k-c0x00ffffff-no-rj",
                        "width": 240,
                        "height": 240
                    },
                    "high": {
                        "url": "https://yt3.ggpht.com/kSsNDl3M6rSs_qMz0_gO9aeqlHtca-Z3BovwnSwyCYjGgh6PB2OiFSp7hkWPjBw5Gu1umhztjQ=s800-c-k-c0x00ffffff-no-rj",
                        "width": 800,
                        "height": 800
                    }
                },
                "localized": {
                    "title": "Pseudomonous",
                    "description": "Welcome to Pseudomonous, your ultimate gaming destination! 🎮\n\nJoin me as I stream the latest and greatest in gaming, including Fortnite, Call of Duty, EA Sports FC 24, and Grand Theft Auto. Get ready for epic gameplay, exciting moments, and a community of gamers who share your passion. \n\n🔔 Subscribe for live streams, gaming clips, and highlights!\n👍 Don't forget to like, comment, and share!\n\n#Pseudomnous #Gaming #Fortnite #CallofDuty #EASportsFC24 #GTA #PS5 #PS4 #LiveStreaming #GamingCommunity #GamingClips #Shorts #ForYou #FYP #Comedy #Food #euro2024 #championsleague #usa \n"
                },
                "country": "US"
            },
            "statistics": {
                "viewCount": "12055",
                "subscriberCount": "37",
                "hiddenSubscriberCount": false,
                "videoCount": "91"
            }
        }
    ]
}

文章来源：https://dev.to/vincod/live-youtube-subscriber-count-54k9