Often when making training videos for software, you need to be signed in to some account and deal with API keys or other sensitive info.

The common approach is to use blur effects with the video editing tool, and since I use Camtasia primarily, it's not too difficult to blur stuff even when scrolling a page.

There are a few things that suck about this you can guess:

• It requires finagling with the video editing
• You have to redo it if re-recording
• You might forget or not notice something
• There's an ugly blur region in the video

This is likely what you need to do in many places like command line terminal windows, IDEs, etc. which is why many folks create clean VMs to record demos on that are more tightly controlled.

But in the specific case of browser recording, One Cool Trick^tm is to use an extension like TamperMonkey to create a custom script that modifies elements on the page.

Here's one I used recently to change a cloud dashboard to replace my email account name with a demo account:

// ==UserScript==
// @name         Cloud Provider Demos
// @namespace    http://cloudprovider.com/
// @version      0.1
// @description  Change account name
// @author       You
// @match        https://cloudprovider.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=cloudprovider.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

setTimeout(() => {
    const accountLink = document.querySelector("li.profile-dropdown.dropdown.nav-item > a.dropdown-toggle");

    if (accountLink) {
        accountLink.childNodes[2].textContent = 'demouser@cloudprovider.com';
    }
}, 500);

})();

If you're making onboarding videos or guides, or giving talks/workshops a lot, this is a useful trick for obfuscating sensitive info in your browser automatically without thinking about it. Pair this with a dedicated Chrome profile for presenting and you've got a clean, isolated "presentation container" you can reuse.

Have a lovely day,
Kamran