技术求助：用HTML/JavaScript实现YouTube与Twitch观众数总和计算

Hey there! I’ve got a simple, copy-paste-ready solution to calculate your total viewers across both platforms using Streamlabs’ custom HTML editor. No advanced coding skills needed—just follow these steps:

Step 1: Set Up Individual Platform Widgets First #

Before adding the custom code, make sure you’ve already added the separate viewer count widgets for YouTube and Twitch in Streamlabs. These will act as our data sources for the sum.

Step 2: Paste This Custom HTML/JS in the Mini Editor #

Replace the default content in Streamlabs’ mini HTML editor with the code below. I’ve commented it so you can follow along, but you can use it as-is:

<!-- This is where your total viewer count will show up -->
<div id="total-viewers" style="font-size: 48px; font-weight: bold; color: #ffffff;">0 Total Viewers</div>

<script>
// Helper function to grab viewer numbers from Streamlabs widgets
function getViewerCount(platformSelector) {
    // Find the widget element for the platform
    const viewerElement = document.querySelector(platformSelector);
    if (!viewerElement) return 0;

    // Extract the numeric value from the widget text (handles "3 viewers" or just "3")
    const numberMatch = viewerElement.textContent.trim().match(/\d+/);
    return numberMatch ? parseInt(numberMatch[0]) : 0;
}

// Calculate and update the total viewer count
function updateTotal() {
    // Replace these selectors if your Streamlabs widgets use different class names
    const youtubeViews = getViewerCount('.youtube-viewer-count');
    const twitchViews = getViewerCount('.twitch-viewer-count');
    
    const total = youtubeViews + twitchViews;
    document.getElementById('total-viewers').textContent = `${total} Total Viewers`;
}

// Update immediately when the widget loads
updateTotal();
// Refresh every 2 seconds to keep the count real-time
setInterval(updateTotal, 2000);
</script>

Step 3: Adjust Selectors If Needed #

Streamlabs might use slightly different class names for its widgets. If the total doesn’t update, here’s how to fix it:

1. Right-click on your YouTube viewer count widget in Streamlabs and select "Inspect" (opens browser dev tools).
2. Look for the HTML element holding the viewer number, note its class (e.g., sl-youtube-viewers).
3. Replace .youtube-viewer-count in the code with the class you found. Repeat this for Twitch.

Step 4: Style to Match Your Stream #

Tweak the style attributes in the top <div> to adjust font size, color, or weight—make it fit your stream’s theme!

Quick Notes: #

• The script checks for new viewer numbers every 2 seconds, so your total will stay up-to-date.
• If Streamlabs ever changes its widget structure, you just need to re-inspect and update the selectors in the code.

内容的提问来源于stack exchange，提问作者Hyperfox