Video Feedback: Screen Recording for Bug Reports

Video recordings are one of the most powerful tools for understanding user-reported bugs. A picture may be worth a thousand words, but a video showing the exact sequence of actions that led to a bug is invaluable. This guide shows you how to enable screen recording in your Qaid feedback widget.

Enabling Video Capture

Add the captureVideo: true option to your configuration to show a record button alongside your feedback buttons:

client:load id=“video-basic” title=“Video Enabled” description=“Record button appears with thumbs” height=“120px” background=“linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)” config=[object Object] />

import { QaidFeedback } from '@qaiddev/thumbs-embed';

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true
});

Or via script tag:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-capture-video="true"
></script>

When users click the record button, their browser will prompt them to share their screen. Once they grant permission, recording begins immediately and they can interact with your page normally while the video captures everything.

Video Options and Duration Limits

By default, recordings are limited to 15 seconds. This is usually enough to demonstrate a bug while keeping file sizes manageable. You can customize this with the videoOptions configuration:

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  videoOptions: {
    maxDuration: 30  // Allow up to 30 seconds of recording
  }
});

Or via script tag:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-capture-video="true"
  data-video-max-duration="30"
></script>

Duration Recommendations

Use Case	Recommended Duration
Quick UI bugs	10-15 seconds
Multi-step workflows	30 seconds
Complex interactions	45-60 seconds

Keep in mind that longer recordings mean larger file sizes. A 15-second recording is typically under 2MB, while a 60-second recording could be 8MB or more depending on screen resolution and activity.

Video-Only Mode

Sometimes you want users to submit video bug reports without the thumbs up/down sentiment buttons. This is perfect for dedicated bug reporting interfaces or QA workflows. Enable video-only mode by combining hideThumbs with captureVideo:

client:load id=“video-only” title=“Video-Only Mode” description=“Just the record button” height=“120px” background=“linear-gradient(135deg, #1a1a2e 0%, #0f172a 100%)” config=[object Object] />

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  hideThumbs: true
});

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-capture-video="true"
  data-hide-thumbs="true"
></script>

This creates a clean, single-button interface that makes the purpose immediately clear: “Record a bug.”

Custom Record Button Icon

The default record icon is a simple circle, but you can replace it with any SVG to match your brand or communicate the action more clearly:

Camera Icon

client:load id=“video-camera” title=“Camera Icon” description=“Video camera style” height=“120px” background=“linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)” config=[object Object] />

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  hideThumbs: true,
  recordIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
  </svg>`
});

Bug Icon

Perfect for explicitly communicating “report a bug”:

client:load id=“video-bug” title=“Bug Icon” description=“Report a bug” height=“120px” background=“linear-gradient(135deg, #1f2937 0%, #111827 100%)” config=[object Object] />

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  hideThumbs: true,
  recordIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M19 8h-1.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5s-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H5v2h1.09c-.05.33-.09.66-.09 1v1H5v2h1v1c0 .34.04.67.09 1H5v2h1.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H19v-2h-1.09c.05-.33.09-.66.09-1v-1h1v-2h-1v-1c0-.34-.04-.67-.09-1H19V8zm-6 8h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
  </svg>`
});

Screen Capture Icon

A monitor with recording indicator:

client:load id=“video-screen” title=“Screen Capture Icon” description=“Screen recording style” height=“120px” background=“linear-gradient(135deg, #0f172a 0%, #1e293b 100%)” config=[object Object] />

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  hideThumbs: true,
  recordIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"/>
    <circle cx="12" cy="11" r="3" fill="#ef4444"/>
  </svg>`
});

Combining Video with Screenshots

You can enable both video recording and automatic screenshot capture for maximum debugging context:

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  captureScreenshot: true,
  videoOptions: {
    maxDuration: 30
  }
});

This gives users the choice: they can submit a quick screenshot for simple visual issues, or record a video for bugs that involve interactions or animations.

Styled Video Button

The record button inherits your buttonClass styling just like the thumbs buttons. Here’s an example with a neon theme:

client:load id=“video-neon” title=“Neon Video Button” description=“Styled recording button” height=“140px” background=“linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)” css= .neon-record { background: #0a0a0a; border: 2px solid #ef4444; border-radius: 12px; padding: 10px; color: #ef4444; box-shadow: 0 0 5px #ef4444, 0 0 10px #ef444444, inset 0 0 5px #ef444422; transition: all 0.3s ease; } .neon-record:hover { box-shadow: 0 0 10px #ef4444, 0 0 20px #ef4444, 0 0 30px #ef444488, inset 0 0 10px #ef444444; } config=[object Object] />

.neon-record {
  background: #0a0a0a;
  border: 2px solid #ef4444;
  border-radius: 12px;
  padding: 10px;
  color: #ef4444;
  box-shadow:
    0 0 5px #ef4444,
    0 0 10px #ef444444,
    inset 0 0 5px #ef444422;
  transition: all 0.3s ease;
}

.neon-record:hover {
  box-shadow:
    0 0 10px #ef4444,
    0 0 20px #ef4444,
    0 0 30px #ef444488,
    inset 0 0 10px #ef444444;
}

new QaidFeedback({
  endpoint: '/api/feedback',
  captureVideo: true,
  hideThumbs: true,
  buttonClass: 'neon-record',
  recordIcon: `<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
    <circle cx="12" cy="12" r="8"/>
  </svg>`,
  colors: {
    positive: '#ef4444',
    negative: '#ef4444'
  }
});

Browser Compatibility

Screen recording uses the Screen Capture API, which is supported in all modern browsers:

Chrome/Edge 72+
Firefox 66+
Safari 13+

Users on older browsers will see the record button, but will receive a friendly error message if their browser doesn’t support screen capture.

Privacy Considerations

When enabling video capture, keep these points in mind:

User consent: The browser always prompts users for permission before recording starts
Screen selection: Users choose which screen, window, or tab to share
Visual indicator: Browsers display a recording indicator so users know when capture is active
Data handling: Videos are submitted to your endpoint - ensure your backend handles them securely

Summary

Video feedback transforms bug reports from vague descriptions into clear demonstrations. With captureVideo: true, you can:

Add a record button alongside existing feedback buttons
Configure recording duration limits via videoOptions
Create video-only interfaces with hideThumbs: true
Customize the record button icon with recordIcon

For more customization options, check out our guides on custom button icons, brand color matching, and theme presets.