Video Feedback: Screen Recording for Bug Reports

A screenshot shows you the broken state. A recording shows you what the user did to get there, which is usually the part you cannot guess.

▶

0:00 / 0:00

Turning it on

captureVideo: true adds a record button next to the thumbs:

Video Enabled

Record button appears with thumbs

Loading embed...

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

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

Or on a script tag:

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

Clicking it opens the browser's share-screen prompt. Recording starts as soon as they agree, and they carry on using the page while it runs.

How long they can record

Fifteen seconds by default, which is long enough to show a bug and short enough to upload. videoOptions moves it:

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/dist/embed.js"
  data-endpoint="/api/feedback"
  data-capture-video="true"
  data-video-max-duration="30"
></script>

Fifteen seconds covers a button that does the wrong thing. Thirty covers a workflow with steps in it. Sixty is for something you genuinely cannot demonstrate faster, and costs you 8MB or more per report against about 2MB at the default. Screen resolution and how much moves on screen drive the rest.

Recording without the thumbs

On a QA build or an internal bug tool, sentiment is noise. hideThumbs with captureVideo leaves the record button on its own:

Video-Only Mode

Just the record button

Loading embed...

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

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

One button, one meaning, nothing to explain.

Changing the record icon

The default is a circle. recordIcon takes any SVG.

Camera

Camera Icon

Video camera style

Loading embed...

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

Says what the button is for without any copy:

Bug Icon

Report a bug

Loading embed...

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>`
});

Monitor

A screen with a recording dot on it:

Screen Capture Icon

Screen recording style

Loading embed...

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>`
});

Video and screenshots together

Both options can be on at once:

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

The reader picks. A misaligned button gets a screenshot; a broken drag-and-drop gets a recording.

Styling it

The record button takes your buttonClass like the thumbs do:

Neon Video Button

Styled recording button

Loading embed...

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

Where it works

Recording goes through the Screen Capture API: Chrome and Edge from 72, Firefox from 66, Safari from 13.

Older browsers still show the button and explain themselves when it is pressed. Phones are the bigger gap, and mobile optimization covers what to do there.

Privacy

The browser handles consent for you. It asks first, it lets the reader choose which screen or tab to share, and it shows a recording indicator the whole time. None of that is yours to build.

What is yours is the video once it arrives. It is a recording of somebody's screen, sitting on your endpoint, and it should be stored like one.

Next: custom button icons, brand color matching, and theme presets.