Node.jsでYouTube Liveのコメントやアイコンをターミナルに表示させてみる

YouTube LiveのコメントをNode.jsから取得できるライブラリを見つけたので試してみました。

アイコン表示も

利用ライブラリ youtube-chat

どうやらスクレイピングしてそうでAPIキーなどは不要です。

$ node -v
v25.2.1

環境はv25.2.1で試します。

簡単に試す

まずは、YouTubeでライブをしてコメントできる状態にします

npm init -y && npm pkg set type=module

コードは以下で簡単に試せます。

https://www.youtube.com/live/_JOMjRiTs2X みたいなURLだと_JOMjRiTs2XがIDになるので該当箇所を変更します。

import { LiveChat } from "youtube-chat";

// 監視したい動画のID
const VIDEO_ID = "_JOMjRiTs2X"; //LiveのID

// 【修正箇所】videoId ではなく liveId に変更
const liveChat = new LiveChat({ liveId: VIDEO_ID });

// チャットを受信した時の処理
liveChat.on("chat", (chatItem) => {
    const message = chatItem.message.map(m => m.text).join("");
    const author = chatItem.author.name;
    console.log(`[${author}]: ${message}`);
});

// エラーが起きた時の処理
liveChat.on("error", (err) => {
    console.error("エラーが発生しました:", err);
});

// 監視スタート
console.log(`YouTube Live 監視開始: https://www.youtube.com/watch?v=${VIDEO_ID}`);
liveChat.start();

chatItemの中をみてみる

//省略

liveChat.on("chat", (chatItem) => {
    console.log(chatItem); // 
});

//省略

このように取得した時のchatItemの中で色々情報が送られてきてました。

urlのところでアイコンなども取れそうですね。

{
  id: 'ChwKGkNQNm9ocERsM0pFREZab19yUVlkUjdBejVn',
  author: {
    name: '@IoTLT',
    thumbnail: {
      url: 'https://yt4.ggpht.com/ytc/AIdro_nDqtFx_eiqB0KmdtSlWHrMnLYUo_rDkX9lvdNR5v4EHA=s64-c-k-c0x00ffffff-no-rj',
      alt: '@IoTLT'
    },
    channelId: 'UCE8qgjhgQVEdxmVa6hIAieA'
  },
  message: [ { text: 'テスト' } ],
  isMembership: false,
  isOwner: true,
  isVerified: false,
  isModerator: false,
  timestamp: 2025-12-27T03:08:12.528Z
}
[@IoTLT]: テスト
{
  id: 'ChwKGkNPRHM3T2ZtM0pFREZZdkJ3Z1FkQy04WTV3',
  author: {
    name: '@IoTLT',
    thumbnail: {
      url: 'https://yt4.ggpht.com/ytc/AIdro_nDqtFx_eiqB0KmdtSlWHrMnLYUo_rDkX9lvdNR5v4EHA=s64-c-k-c0x00ffffff-no-rj',
      alt: '@IoTLT'
    },
    channelId: 'UCE8qgjhgQVEdxmVa6hIAieA'
  },
  message: [ { text: 'テスト' } ],
  isMembership: false,
  isOwner: true,
  isVerified: false,
  isModerator: false,
  timestamp: 2025-12-27T03:15:45.098Z
}
[@IoTLT]: こんばんわ
{
  id: 'ChwKGkNJam5xdXJtM0pFREZZakN3Z1Fkd19nUElB',
  author: {
    name: '@IoTLT',
    thumbnail: {
      url: 'https://yt4.ggpht.com/ytc/AIdro_nDqtFx_eiqB0KmdtSlWHrMnLYUo_rDkX9lvdNR5v4EHA=s64-c-k-c0x00ffffff-no-rj',
      alt: '@IoTLT'
    },
    channelId: 'UCE8qgjhgQVEdxmVa6hIAieA'
  },
  message: [ { text: 'こんばんわ' } ],
  isMembership: false,
  isOwner: true,
  isVerified: false,
  isModerator: false,
  timestamp: 2025-12-27T03:15:50.306Z
}
[@IoTLT]: ども
{
  id: 'ChwKGkNKUHVtdl9tM0pFREZVYlB3Z1FkS3V3cHhn',
  author: {
    name: '@IoTLT',
    thumbnail: {
      url: 'https://yt4.ggpht.com/ytc/AIdro_nDqtFx_eiqB0KmdtSlWHrMnLYUo_rDkX9lvdNR5v4EHA=s64-c-k-c0x00ffffff-no-rj',
      alt: '@IoTLT'
    },
    channelId: 'UCE8qgjhgQVEdxmVa6hIAieA'
  },
  message: [ { text: 'ども' } ],
  isMembership: false,
  isOwner: true,
  isVerified: false,
  isModerator: false,
  timestamp: 2025-12-27T03:16:34.079Z
}
[@IoTLT]: こんにいてゃ
{
  id: 'ChwKGkNJSzlrTVhwM0pFREZXX0N3Z1Fkc193eVJ3',
  author: {
    name: '@IoTLT',
    thumbnail: {
      url: 'https://yt4.ggpht.com/ytc/AIdro_nDqtFx_eiqB0KmdtSlWHrMnLYUo_rDkX9lvdNR5v4EHA=s64-c-k-c0x00ffffff-no-rj',
      alt: '@IoTLT'
    },
    channelId: 'UCE8qgjhgQVEdxmVa6hIAieA'
  },
  message: [ { text: 'こんにいてゃ' } ],
  isMembership: false,
  isOwner: true,
  isVerified: false,
  isModerator: false,
  timestamp: 2025-12-27T03:27:57.586Z
}

過去コメントが全て取れてそうですね。

一件のコメントだと以下。

[@IoTLT]: こんにいてゃ
{
  id: 'ChwKGkNJSzlrTVhwM0pFREZXX0N3Z1Fkc193eVJ3',
  author: {
    name: '@IoTLT',
    thumbnail: {
      url: 'https://yt4.ggpht.com/ytc/AIdro_nDqtFx_eiqB0KmdtSlWHrMnLYUo_rDkX9lvdNR5v4EHA=s64-c-k-c0x00ffffff-no-rj',
      alt: '@IoTLT'
    },
    channelId: 'UCE8qgjhgQVEdxmVa6hIAieA'
  },
  message: [ { text: 'こんにいてゃ' } ],
  isMembership: false,
  isOwner: true,
  isVerified: false,
  isModerator: false,
  timestamp: 2025-12-27T03:27:57.586Z
}

ターミナルにアイコンも表示してみる

iTerm2などだと画像表示ができるとのことで、以下のパッケージを試してみました。

import { LiveChat } from "youtube-chat";
import terminalImage from "terminal-image";

const VIDEO_ID = "_JOMjRiTs2X"; //LiveのID
const liveChat = new LiveChat({ liveId: VIDEO_ID });

liveChat.on("chat", async (chatItem) => {
    const message = chatItem.message.map(m => m.text).join("");
    const author = chatItem.author.name;
    const thumbnailUrl = chatItem.author.thumbnail.url;

    try {
        const response = await fetch(thumbnailUrl);
        const arrayBuffer = await response.arrayBuffer();
        const buffer = Buffer.from(arrayBuffer);
        
        const image = await terminalImage.buffer(buffer, { width: 3, height: 2 });
        
        // 画像とテキストの間に少しスペースを入れる
        console.log(`${image} [${author}]: ${message}`);
    } catch (err) {
        console.log(`[${author}]: ${message}`);
    }
});

liveChat.on("error", (err) => console.error("エラー:", err));

console.log(`iTerm2で監視中...`);
liveChat.start();

初回実行でアラートが出ます。YESにしましょう。

VS Codeの中のターミナルだと表示されないですが、iTerm2だと以下のようにコメントが表示されます。