Record a product demo of a web app EN

To record a product demo of a web app, capture the browser tab it runs in, add your camera as a bubble on the page, and turn on click highlighting so viewers can follow what you do. Everything below is set up before you press Start.

Before you record

• Open the web app in its own tab and get it to the screen you want to start on. Sign in first so the login isn't part of the demo.
• Use a test account or demo data if you can. If the page shows anything private, see Blur sensitive information before you record.
• Allow Rekorder to use your camera and microphone if you haven't yet. See Allow camera and microphone access.

Set up the recording

1. Click the Rekorder icon in your browser toolbar while the app's tab is showing.
2. Choose The current browser tab as what to record. This captures just that tab, and Chrome doesn't ask you to pick anything.
3. Turn on Overlay camera to add your camera, and Record microphone to add your voice.
4. Open settings (the gear icon) and, on the General tab, set Pointer highlight to On click or On move & click.
   • On click marks each click with a red shadow.
   • On move highlights the mouse cursor with a yellow shadow as it moves.
   • For a demo, On click is usually enough. Add movement highlighting if viewers tend to lose track of the cursor.
5. Still in settings, open the Camera tab to choose the camera, its Size, Shape and position. Keep the bubble in a corner where it doesn't cover the part of the app you're showing. See Shape, size, border and position of the camera bubble.
6. Check that Interface on the Camera tab is set to UI in tab (default). This puts the camera bubble and the recording controls inside the tab you're recording.

To see how the bubble sits on your app before you record, click the preview icon (Preview camera in the current tab) in the popup. Turn on Auto camera preview in settings if you want the bubble and controls to appear as soon as you open the popup. You can then drag the bubble into place.

Record the demo

1. Click Start in the popup, or the Start recording button on the control bar in the page. If you've set a countdown, wait for it to finish. See The countdown before recording starts.
2. Walk through the app. Click deliberately and pause briefly after each action so the highlight is visible.
3. Use the control bar when you need it. It has buttons to pause, restart, cancel and delete, mute your microphone, and turn the camera on or off. Drag it to move it. When you let go, it snaps to the nearest edge of the page.
4. Click Stop recording when you're done.

For what each control bar button does, see The control bar on the page you are recording. For the difference between restarting, cancelling and stopping, see Restart, Cancel & delete, and Stop: the difference.

Keep the page clean instead

If you'd rather have nothing on top of your app while you demo, set Interface to Only in preview tab. The camera then appears only in the recording's preview tab and in the final video, and the recording controls aren't placed on your app's page. See "UI in tab" vs "Only in preview tab".

Limits to know about

• Tab capture records one tab. If your demo moves into another window or a desktop app, use a different capture mode. See What you can record: tab, window, screen or camera and Record a desktop app, or pick between two monitors.
• Rekorder can't put the camera bubble and controls on a protected tab, such as a browser settings page. You'll see a warning in the popup. See "The current tab is a protected tab".

Related articles

• Add your camera to a screen recording
• Highlight your mouse and your clicks
• Record the sound from a page or from your computer
• Clean up a take instead of recording it again
• Share with a customer, or share with your team