Jika kamu pernah menonton streaming YouTube Live, pasti tak jarang ingin menampilkan chat langsung di halaman webmu—baik untuk meningkatkan interaksi, menampilkan komentar secara real‑time, atau sekadar menambah nilai estetika. Pada artikel ini, kita akan membahas tutorial mengintegrasikan YouTube Live chat dengan aplikasi web di GitHub secara detail, mulai dari persiapan API, menyiapkan repositori, hingga menampilkan chat di UI yang responsif.

Integrasi ini tidak hanya memberi nilai tambah pada situsmu, tetapi juga membuka peluang untuk membuat fitur-fitur tambahan seperti filter kata kasar, statistik komentar, atau bahkan bot yang otomatis merespon penonton. Semua ini dapat di‑hosting di GitHub Pages, jadi tidak perlu ribet pakai server tradisional. Yuk, simak langkah‑langkahnya!

Sebelum masuk ke kode, pastikan kamu sudah memiliki akun Google, channel YouTube yang aktif, serta akses ke GitHub. Jika belum, buat dulu—semua proses ini gratis dan sangat mudah.

1. Persiapan Awal: Dapatkan API Key dan Channel ID

Langkah pertama adalah mendapatkan kredensial yang diperlukan untuk mengakses YouTube Data API. Ikuti langkah berikut:

  • Buka Google Cloud Console dan buat sebuah project baru.
  • Aktifkan YouTube Data API v3 pada project tersebut.
  • Buat API key di bagian “Credentials”. Simpan key ini dengan aman, karena akan dipakai di JavaScript.
  • Untuk menemukan Channel ID dari streamingmu, buka video live di YouTube, klik “Share” → “Copy link”, lalu ekstrak ID setelah channel/ atau gunakan halaman Advanced Settings.

Jika kamu belum pernah bermain dengan API, jangan khawatir—kamu hanya perlu menyalin string‑string ini ke dalam file konfigurasi nanti.

2. Membuat Repositori GitHub dan Menyiapkan GitHub Pages

Selanjutnya, buat repositori baru di GitHub yang akan menjadi rumah bagi aplikasi webmu. Ikuti langkah berikut:

  • Login ke GitHub dan klik “New repository”. Beri nama misalnya youtube-live-chat-web.
  • Pilih opsi “Public” (atau “Private” jika kamu ingin membatasi akses) dan centang “Initialize this repository with a README”.
  • Setelah repo terbentuk, masuk ke “Settings” → “Pages”. Pilih branch main dan folder / (root), lalu simpan. GitHub akan memberikan URL, misalnya https://username.github.io/youtube-live-chat-web/.

GitHub Pages otomatis akan men-serve file HTML, CSS, dan JavaScript yang kamu push ke repo. Ini solusi murah dan cepat untuk men‑hosting aplikasi front‑end kamu.

3. Struktur Proyek dan File Utama

Berikut contoh struktur folder yang sederhana namun cukup lengkap untuk integrasi chat:

youtube-live-chat-web/
│
├─ index.html          # Halaman utama yang menampilkan chat
├─ style.css           # Styling responsif
├─ script.js           # Logika pengambilan data chat
├─ config.js           # Menyimpan API key & Channel ID (tidak di‑commit)
└─ .gitignore          # Mengabaikan config.js dari repo

Pastikan .gitignore berisi baris config.js agar kunci API tidak terbuka untuk publik.

4. Menulis Kode JavaScript untuk Mengambil Chat

4.1. Membuat config.js (tidak di‑commit)

File ini berisi variabel yang akan di‑import di script.js:

const YOUTUBE_API_KEY = 'YOUR_API_KEY_HERE';
const LIVE_CHAT_ID = 'YOUR_LIVE_CHAT_ID_HERE'; // Dapatkan lewat YouTube Live Chat API

4.2. Menggunakan YouTube Live Chat API

Endpoint yang kita pakai adalah:

https://www.googleapis.com/youtube/v3/liveChat/messages?liveChatId=LIVE_CHAT_ID&part=snippet,authorDetails&key=API_KEY

Berikut contoh fungsi untuk fetch pesan secara periodik (setiap 5 detik):

async function fetchChatMessages() {
    const url = `https://www.googleapis.com/youtube/v3/liveChat/messages?liveChatId=${LIVE_CHAT_ID}&part=snippet,authorDetails&key=${YOUTUBE_API_KEY}`;
    try {
        const response = await fetch(url);
        const data = await response.json();
        renderMessages(data.items);
    } catch (err) {
        console.error('Gagal ambil chat:', err);
    }
}

// Panggil setiap 5 detik
setInterval(fetchChatMessages, 5000);

4.3. Menampilkan Pesan di UI

Fungsi renderMessages akan menambahkan elemen li ke dalam ul#chatList di HTML:

function renderMessages(messages) {
    const chatList = document.getElementById('chatList');
    messages.forEach(msg => {
        const li = document.createElement('li');
        li.innerHTML = `
            <img src="${msg.authorDetails.profileImageUrl}" alt="avatar" class="avatar">
            <span class="author">${msg.authorDetails.displayName}:</span>
            <span class="text">${msg.snippet.displayMessage}</span>
        `;
        chatList.appendChild(li);
        // Scroll otomatis ke bawah
        chatList.scrollTop = chatList.scrollHeight;
    });
}

Dengan CSS sederhana, kamu bisa membuat tampilan yang mirip dengan chat asli YouTube. Lihat contoh Rahasia Kelola Komentar YouTube Live Pakai Bot di GitHub untuk inspirasi styling.

5. Menyempurnakan UI dengan CSS

Berikut contoh style.css yang ringan namun responsif:

#chatContainer {
    width: 100%;
    max-width: 500px;
    margin: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
#chatList {
    list-style: none;
    padding: 10px;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}
#chatList li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
}
.author {
    font-weight: bold;
    margin-right: 4px;
}
.text {
    word-break: break-word;
}

Jika ingin menambahkan dark mode, cukup tambahkan CSS media query @media (prefers-color-scheme: dark). Simpel, kan?

6. Menghubungkan Semua di index.html

Berikut contoh struktur index.html yang lengkap:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Live Chat di Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="text-align:center;">Live Chat YouTube</h1>
    <div id="chatContainer">
        <ul id="chatList"></ul>
    </div>

    <script src="config.js"></script>
    <script src="script.js"></script>
</body>
</html>

Upload semua file ke repo, commit, dan lihat hasilnya di URL GitHub Pages. Jika semua konfigurasi sudah tepat, chat dari live streamingmu akan muncul dalam hitungan detik.

7. Menambahkan Fitur Tambahan (Opsional)

7.1. Filter Kata Kasar

Gunakan array berisi kata‑kata tidak diinginkan, kemudian ubah renderMessages untuk mengecek sebelum menambah ke DOM:

const blacklist = ['spam', 'badword']; // contoh

function isClean(message) {
    return !blacklist.some(word => message.toLowerCase().includes(word));
}

if (isClean(msg.snippet.displayMessage)) {
    // tambahkan ke chat
}

7.2. Statistik Real‑time

Hitung jumlah pesan, unik penonton, atau kata paling sering muncul. Simpan data di localStorage atau kirim ke Google Sheets lewat Google Apps Script.

7.3. Bot Respon Otomatis

Integrasi dengan tutorial bot YouTube Live memungkinkan kamu menanggapi pertanyaan umum secara otomatis. Bot dapat dijalankan di GitHub Actions yang mem‑trigger tiap kali ada pesan baru.

8. Deploy Otomatis dengan GitHub Actions (Optional but Cool)

Jika kamu suka otomatisasi, buat file .github/workflows/deploy.yml yang akan melakukan build (misalnya minify CSS/JS) dan push ke branch gh-pages setiap ada commit ke main. Berikut contoh singkatnya:

name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm install -g clean-css-cli uglify-js
      - name: Minify CSS
        run: cleancss -o style.min.css style.css
      - name: Minify JS
        run: uglifyjs script.js -o script.min.js
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: .

Dengan ini, setiap perubahan kode akan otomatis ter‑publish ke halaman GitHub Pages tanpa kamu harus manual upload lagi. Praktis, kan?

9. Debugging dan Tips Umum

  • Periksa quota API: YouTube Data API memiliki limit kuota harian. Jika chat tidak muncul, cek konsol Google Cloud untuk memastikan masih ada kuota.
  • Gunakan console.log() pada fetchChatMessages untuk melihat struktur data yang datang dari API.
  • Cache hasil selama beberapa detik untuk mengurangi request berlebih.
  • Gunakan HTTPS: GitHub Pages otomatis memakai HTTPS, pastikan endpoint API juga dipanggil via HTTPS.
  • Uji di perangkat mobile: Responsif sangat penting, terutama bila penonton menonton lewat ponsel.

Jika ingin belajar lebih dalam tentang automatisasi streaming, artikel Rahasia Optimasi Bitrate YouTube Live Pakai GitHub Actions memberikan insight tentang bagaimana CI/CD dapat meningkatkan kualitas streamingmu.

10. Menjaga Keamanan API Key

Meskipun proyek ini bersifat front‑end, tetap disarankan untuk tidak menaruh API key secara terbuka. Ada beberapa cara untuk mengamankannya:

  • Gunakan serverless function (misalnya Google Cloud Functions) untuk mem‑proxy request ke YouTube API. Aplikasi web hanya memanggil fungsi tersebut.
  • Gunakan environment variable di GitHub Actions dan inject ke build proses, lalu gunakan teknik obfuscation sederhana.
  • Buat key dengan batasan HTTP referrer hanya untuk domain GitHub Pages kamu.

Dengan langkah‑langkah ini, kunci API tidak mudah disalahgunakan oleh pihak ketiga.

Itulah rangkaian tutorial lengkap mengintegrasikan YouTube Live chat ke dalam aplikasi web yang di‑host di GitHub. Mulai dari persiapan API, struktur proyek, penulisan kode JavaScript, hingga menambah fitur tambahan seperti filter kata kasar atau bot otomatis, semuanya dapat kamu terapkan dengan mudah. Selamat mencoba, dan semoga websitemu semakin hidup dengan interaksi real‑time!