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.
})
}
}());