Real-Time Views

Real-time viewers can be displayed when using Mux Data. This works with both assets and live streams. The {realtime_url} tag builds the signed link to request the current views from the Mux API directly.

Web Component

<!-- Include Once, use path to your themes folder. -->
<script type="module" src="/themes/user/mux/components/realtime-views.js"></script>

<!-- Include as many times as needed within a video loop -->
<mux-realtime-views
      api="{realtime_url}" // Required
      views // Optional.
      viewers // Optional.
>
</mux-realtime-views>

Build Your Own

Simply request the url to get the current real-time views. The data updates no quicker than 5 seconds, so pings should be at least 6 or higher.

For more information, visit the Mux Real-Time guide (steps 1-3 are handled by the MuxEE add-on)

Here’s a very basic script:

<!-- Sample HTML -->
<span class="realtimeviews" data-api="{realtime_url}">
        <output data-views>0</output> views,
        <output data-viewers>0</output> viewers.
</span>

(function () {

    // This finds all real-time tags with the `realtimeviews` class and sets update intervals.
    const views = document.querySelectorAll( '.realtimeviews' );

    if (views) {
        views.forEach( view => {

            const api = view.dataset.api; // Get the URL from the HTML element.

            // Make sure the property with a url was set.
            if (!api) {
                console.debug('No API link found for real-time views.');
                return;
            }

            async function getRealTimeViews()
            {
                const viewsdatarequest = await fetch(api);
                const viewsdata = await viewsdatarequest.json();

                view.querySelector('[data-views]').innerHTML = viewsdata.data[0].views;
                view.querySelector('[data-viewers]').innerHTML = viewsdata.data[0].viewers;
            }
            getRealTimeViews();
            setInterval(getRealTimeViews, 10000); // Update every 10 seconds.
        })
    }

}());