Skip to content

chore(analytics-browser): update staging video analytics #1955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
daniel-graham-amplitude wants to merge 1 commit into from
Open

chore(analytics-browser): update staging video analytics #1955

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 26 additions & 5 deletions test-server/video-analytics/track-html-video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,18 @@
</head>
<body>
<video id="video" controls width="640" preload="metadata" metadata-video-title="My Video" metadata-video-id="video-123">
<source src="https://stream.mux.com/iBXEG00ifc9cPSv005eKgQ01g3w42LUGdlFWlmeosVuGfU.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="stop-video">Stop Capturing</button>
<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player" defer></script>
<script src="https://cdn.jsdelivr.net/npm/mux-embed@latest/dist/mux.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js"></script>
<h1>Track HTML Video Test</h1>
<script type="module">
import * as amplitude from '@amplitude/analytics-browser';

window.amplitude = amplitude;

// generate a View Session ID to be used for Mux and Amplitude
// so that views can be linked together
const muxViewSessionId = Date.now();
Expand All @@ -25,22 +27,41 @@ <h1>Track HTML Video Test</h1>
const userId = 'random-user-id';

const video = document.getElementById('video');

const src = 'https://stream.mux.com/iBXEG00ifc9cPSv005eKgQ01g3w42LUGdlFWlmeosVuGfU.m3u8';

// Safari plays HLS (.m3u8) natively; Chrome and Firefox need hls.js to feed
// the stream through Media Source Extensions. Chrome also reports "maybe" from
// canPlayType but then fails to play, so gate on ManagedMediaSource (Safari only)
// rather than on canPlayType alone. See https://github.com/video-dev/hls.js/issues/7827
const useNativeHls = video.canPlayType('application/vnd.apple.mpegurl') && 'ManagedMediaSource' in window;
const hls = useNativeHls ? null : new Hls();

// MUX VIDEO MONITORING
// monitor the video for Mux analytics
mux?.monitor(video, {
// (must happen before the stream is loaded so Mux sees every event)
mux.monitor(video, {
data: {
view_session_id: muxViewSessionId,
viewer_user_id: userId,
},
...(hls && { hlsjs: hls, Hls }),
});

if (hls) {
hls.loadSource(src);
hls.attachMedia(video);
} else {
video.src = src;
}

// AMPLITUDE VIDEO ANALYTICS
const stagingUrl = 'https://api.stag2.amplitude.com/2/httpapi';

// initialize Amplitude
amplitude.setUserId(userId);
amplitude.init(import.meta.env.VITE_AMPLITUDE_API_KEY, {
delayedEventsServerUrl: `${location.origin}/2/httpapi/delayed`,
amplitude.init(import.meta.env.VITE_AMPLITUDE_STAGING_API_KEY, {

@cursor cursor Bot Aug 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Staging API key env var missing

Medium Severity

amplitude.init now reads VITE_AMPLITUDE_STAGING_API_KEY, which is not defined in .env.example or anywhere else in the repo. Vite substitutes undefined, so the SDK initializes with an empty API key and staging video events are dropped.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 169c364. Configure here.

delayedEventsServerUrl: `https://delayed-events.stag2.amplitude.com/2/httpapi/delayed`,
serverUrl: stagingUrl,
fetchRemoteConfig: false,
autocapture: false,
}).promise.then(() => {
Expand Down
Loading