Skip to content

feat(analytics): add video analytics pipeline with ingest server, event tracking, and ClickHouse schema #3

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
aman051197 wants to merge 7 commits into
base: dev
Choose a base branch
from
Open

feat(analytics): add video analytics pipeline with ingest server, event tracking, and ClickHouse schema #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
948577e
feat(analytics): add video analytics pipeline with ingest server, eve…
aman-imagekit Apr 16, 2026
ee93524
feat(analytics): mandatory playback ID to remove duplicate row and t…
aman-imagekit Apr 27, 2026
b31088c
feat(analytics): enhance codec detection and video source URL handlin…
aman-imagekit Apr 27, 2026
b00bd4f
feat(video-player): add new "Try It Yourself 2" page and update Vite …
aman-imagekit Apr 30, 2026
d8ed9df
feat(video-player): implement default poster transformation handling …
aman-imagekit Apr 30, 2026
80d7d35
Merge branch 'dev' into video_analytics
aman-imagekit Apr 30, 2026
ff2b884
feat(analytics): improve seek handling in analytics state machine and…
aman-imagekit May 19, 2026
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
336 changes: 336 additions & 0 deletions examples/javascript/pages/try-it-yourself-2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex, nofollow" />
<title>Try It Yourself 2 - ImageKit Video Player</title>
<link rel="stylesheet" href="/src/style.css" />
<style>
.form-container {
background: white;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #1a202c;
}
.form-group input[type="text"],
.form-group input[type="url"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #cbd5e0;
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus {
outline: none;
border-color: #3182ce;
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.checkbox-item label {
margin: 0;
cursor: pointer;
font-weight: normal;
}
.submit-button {
background-color: #3182ce;
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.submit-button:hover {
background-color: #2c5aa0;
}
.submit-button:active {
background-color: #1e3f73;
}
.player-container {
margin: 2rem 0;
}
.sub-options {
margin-left: 2rem;
margin-top: 0.5rem;
padding-left: 1rem;
border-left: 2px solid #e2e8f0;
}
.sub-options .form-group {
margin-bottom: 1rem;
}
.sub-options input[type="number"] {
width: 100px;
padding: 0.5rem;
border: 1px solid #cbd5e0;
border-radius: 4px;
font-size: 0.9rem;
}
.sub-options input[type="text"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #cbd5e0;
border-radius: 4px;
font-size: 0.9rem;
}
.sub-options label {
font-size: 0.9rem;
font-weight: normal;
}
.sub-options .help-text {
font-size: 0.85rem;
color: #718096;
margin-top: 0.25rem;
}
.code-block {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.code-block pre {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
}
.code-block code {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
display: block;
}
.translation-lang-item {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
align-items: flex-start;
}
.translation-lang-item input[type="text"] {
flex: 1;
}
.translation-lang-item .lang-code-input {
width: 100px;
}
.translation-lang-item .remove-button {
background-color: #e53e3e;
color: white;
border: none;
padding: 0.5rem 0.75rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
white-space: nowrap;
}
.translation-lang-item .remove-button:hover {
background-color: #c53030;
}
.add-button {
background-color: #48bb78;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
.add-button:hover {
background-color: #38a169;
}
.help-text a {
color: #3182ce;
text-decoration: none;
}
.help-text a:hover {
text-decoration: underline;
}
.help-text code {
background-color: #f7fafc;
padding: 0.125rem 0.25rem;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: #2d3748;
}
</style>
</head>
<body>
<div class="container">
<a href="../" class="back-link">&larr; Back to examples</a>
<h1>Try It Yourself 2</h1>
<p>Internal page with analytics option enabled for testing.</p>

<div class="form-container">
<form id="player-form">
<div class="form-group">
<label for="imagekit-id">ImageKit ID</label>
<input type="text" id="imagekit-id" name="imagekit-id" placeholder="Enter your ImageKit ID" />
</div>

<div class="form-group">
<label for="src-url">Source URL</label>
<input type="url" id="src-url" name="src-url" placeholder="Enter video source URL" />
</div>

<div class="form-group">
<label for="transformation">Transformation (JSON, optional)</label>
<input type="text" id="transformation" name="transformation" placeholder='[{"width": 800, "height": 600}]' />
<div class="help-text">JSON array of transformation objects. Example: <code>[{"width": 800, "height": 600}]</code></div>
</div>

<div class="form-group">
<div class="checkbox-item">
<input type="checkbox" id="enable-signer" name="enable-signer" />
<label for="enable-signer">Enable Signer Function</label>
</div>
<div id="signer-options" class="sub-options" style="display: none;">
<div class="form-group">
<label for="signer-url">Signer Function URL</label>
<input type="url" id="signer-url" name="signer-url" placeholder="https://your-api.com/sign?url=" />
<div class="help-text">URL endpoint that accepts a URL parameter and returns a signed URL</div>
</div>
</div>
</div>

<div class="form-group">
<label>Features</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="subtitles" name="features" value="subtitles" />
<label for="subtitles">Subtitles (Auto-generate)</label>
</div>
<div id="subtitles-options" class="sub-options" style="display: none;">
<div class="form-group">
<label for="max-chars">Max Chars (optional)</label>
<input type="number" id="max-chars" name="max-chars" min="1" placeholder="e.g., 60" />
<div class="help-text">Maximum number of characters that can appear on a subtitle frame</div>
</div>
<div class="checkbox-item">
<input type="checkbox" id="word-highlight" name="word-highlight" />
<label for="word-highlight">Word Highlight</label>
</div>
</div>
<div class="checkbox-item">
<input type="checkbox" id="translation" name="features" value="translation" />
<label for="translation">Translation</label>
</div>
<div id="translation-options" class="sub-options" style="display: none;">
<div class="form-group">
<label>Translation Languages</label>
<div class="help-text" style="margin-bottom: 0.5rem;">
<a href="https://cloud.google.com/translate/docs/languages" target="_blank" rel="noopener noreferrer">View Google language codes →</a>
</div>
<div id="translation-langs-list"></div>
<button type="button" id="add-translation-lang" class="add-button" style="margin-top: 0.5rem;">+ Add Language</button>
</div>
</div>
<div class="checkbox-item">
<input type="checkbox" id="chapters" name="features" value="chapters" />
<label for="chapters">Chapters</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="seek-thumbnails" name="features" value="seek-thumbnails" />
<label for="seek-thumbnails">Seek Thumbnails</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="analytics" name="features" value="analytics" />
<label for="analytics">Analytics</label>
</div>
</div>
</div>

<button type="submit" class="submit-button">Update Player</button>
</form>
</div>

<div class="player-container">
<video id="player" class="video-js" controls preload="auto" width="960" height="540"></video>
</div>

<h2>Generated Code</h2>
<div class="code-block">
<pre><code id="code-display" class="language-javascript"></code></pre>
</div>
</div>
<script type="module" src="/src/try-it-yourself.ts"></script>
<script>
document.getElementById('subtitles')?.addEventListener('change', function() {
const subOptions = document.getElementById('subtitles-options');
if (subOptions) {
subOptions.style.display = this.checked ? 'block' : 'none';
}
});

document.getElementById('translation')?.addEventListener('change', function() {
const subOptions = document.getElementById('translation-options');
if (subOptions) {
subOptions.style.display = this.checked ? 'block' : 'none';
}
});

document.getElementById('enable-signer')?.addEventListener('change', function() {
const subOptions = document.getElementById('signer-options');
if (subOptions) {
subOptions.style.display = this.checked ? 'block' : 'none';
}
});

const translationLangsList = document.getElementById('translation-langs-list');
const addTranslationLangBtn = document.getElementById('add-translation-lang');

function addTranslationLangItem(label = '', langCode = '') {
const item = document.createElement('div');
item.className = 'translation-lang-item';
item.innerHTML = `
<input type="text" class="lang-code-input" placeholder="Code (required, e.g., fr)" value="${langCode}" />
<input type="text" class="translation-label-input" placeholder="Label (optional, e.g., French)" value="${label}" />
<button type="button" class="remove-button">Remove</button>
`;

const removeBtn = item.querySelector('.remove-button');
removeBtn?.addEventListener('click', () => {
item.remove();
});

translationLangsList?.appendChild(item);
}

addTranslationLangBtn?.addEventListener('click', () => {
addTranslationLangItem();
});

document.getElementById('translation')?.addEventListener('change', function() {
const subOptions = document.getElementById('translation-options');
if (subOptions && this.checked && translationLangsList && translationLangsList.children.length === 0) {
addTranslationLangItem();
}
});
</script>
</body>
</html>
7 changes: 7 additions & 0 deletions examples/javascript/src/try-it-yourself.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,13 @@ function buildPlayerConfig(
playerOptions.seekThumbnails = true;
}

if (features.includes('analytics')) {
playerOptions.analytics = {
enabled: true,
user_id: 'test_user_id',
};
}

// Add signer function if URL is provided
if (signerUrl && signerUrl.trim()) {
playerOptions.signerFn = async (url: string): Promise<string> => {
Expand Down
1 change: 1 addition & 0 deletions examples/javascript/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default defineConfig({
abs: path.resolve(__dirname, 'pages/abs.html'),
logo: path.resolve(__dirname, 'pages/logo.html'),
tryItYourself: path.resolve(__dirname, 'pages/try-it-yourself.html'),
tryItYourself2: path.resolve(__dirname, 'pages/try-it-yourself-2.html'),
// Note: You didn't provide a context-menu example, so it's commented out.
// contextMenu: path.resolve(__dirname, 'pages/context-menu.html'),
},
Expand Down
4 changes: 4 additions & 0 deletions examples/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default function App() {
logoImageUrl: 'https://ik.imgkit.net/ikmedia/logo/light_T4buIzohVH.svg',
logoOnclickUrl: 'https://imagekit.io/',
},
analytics: {
enabled: true,
user_id: 'test_user_id',
},
};

// 2) For a single video source (SourceOptions)
Expand Down
4 changes: 4 additions & 0 deletions examples/vue/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ const playerRef = ref<IKVideoPlayerRef | null>(null);
const ikOptions: IKPlayerOptions = {
imagekitId: 'YOUR_IMAGEKIT_ID', // Remember to replace this
seekThumbnails: true,
analytics: {
enabled: true,
user_id: 'test_user_id',
},
};

const playlist: {
Expand Down
Loading
Loading