humanbehavior-js
Version:
SDK for HumanBehavior session and event recording
144 lines (122 loc) • 4.92 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HumanBehavior Canvas Recording Demo</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.demo-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
canvas { border: 2px solid #333; margin: 10px; }
button { padding: 10px 20px; margin: 5px; }
.info { background: #f0f0f0; padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<h1>HumanBehavior Canvas Recording Demo</h1>
<div class="info">
<h3>PostHog-Style Canvas Protection</h3>
<ul>
<li><strong>4 FPS Throttling:</strong> Prevents canvas overwhelm (vs 60 FPS default)</li>
<li><strong>40% Quality:</strong> WebP format with compression</li>
<li><strong>Opt-in Only:</strong> Disabled by default for safety</li>
<li><strong>Smart Sampling:</strong> Only captures when canvas changes</li>
</ul>
</div>
<div class="demo-section">
<h3>Canvas Drawing Demo</h3>
<canvas id="demoCanvas" width="400" height="300"></canvas>
<br>
<button onclick="drawRandom()">Draw Random Shape</button>
<button onclick="clearCanvas()">Clear Canvas</button>
<button onclick="animate()">Start Animation</button>
</div>
<div class="demo-section">
<h3>Canvas Recording Options</h3>
<button onclick="enableCanvasRecording()">Enable Canvas Recording</button>
<button onclick="disableCanvasRecording()">Disable Canvas Recording</button>
<p id="status">Canvas recording: <strong>Disabled</strong></p>
</div>
<script src="./dist/index.min.js"></script>
<script>
let tracker;
let canvas = document.getElementById('demoCanvas');
let ctx = canvas.getContext('2d');
let animationId;
// Initialize tracker without canvas recording
function initTracker(enableCanvas = false) {
tracker = HumanBehaviorTracker.init('13c3e029-ca45-4a3c-a33b-f5dcb297e31c', {
logLevel: 'warn',
suppressConsoleErrors: true,
recordCanvas: enableCanvas // PostHog-style protection
});
updateStatus();
console.log('✅ Tracker initialized with canvas recording:', enableCanvas);
}
function updateStatus() {
const status = document.getElementById('status');
status.innerHTML = `Canvas recording: <strong>${tracker.recordCanvas ? 'Enabled' : 'Disabled'}</strong>`;
}
function enableCanvasRecording() {
if (tracker) {
tracker.stop();
}
initTracker(true);
}
function disableCanvasRecording() {
if (tracker) {
tracker.stop();
}
initTracker(false);
}
function drawRandom() {
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];
const color = colors[Math.floor(Math.random() * colors.length)];
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 50 + 10,
0,
2 * Math.PI
);
ctx.fill();
// Track the drawing event
if (tracker) {
tracker.customEvent('canvas_draw', {
color: color,
timestamp: Date.now()
});
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (tracker) {
tracker.customEvent('canvas_clear', {
timestamp: Date.now()
});
}
}
function animate() {
let angle = 0;
function animateFrame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw rotating rectangle
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle);
ctx.fillStyle = '#FF6B6B';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();
angle += 0.02;
animationId = requestAnimationFrame(animateFrame);
}
animateFrame();
}
// Initialize tracker on page load
initTracker(false);
console.log('🎨 Canvas demo ready! Try drawing or enabling canvas recording.');
</script>
</body>
</html>