Hiding Azure information while recording demos
The problem
When recording demos for my Azure courses, I don’t like to expose details like the Azure subscription ID. How I used to solve this, is by first recording the demo, and then editing out (blurring) any text that I don’t want the learner to see:
Blurring the subscription ID in an Azure portal recording isn’t that hard, but annoyingly, I also have to watch the browser status bar, as it will popup the link for an item when I hover it with the mouse, and often that link will include the subscription ID:
It’s not difficult to edit these out, it just takes a lot of time.
The solution
Note: when applying the following steps, you do so at your own risk and responsibility.
Hiding portal data
While I usually use Microsoft Edge to browse the web, I use Firefox to record demos. For some reason text in the resulting video looks more crisp when recorded from Firefox.
To hide information like subscription IDs in the Azure portal, I installed the Brian Clark. It “attempts to conceal sensitive Azure information found in the portal views”. You can find the source code or open an issue on GitHub.
As I understand from the GitHub documentation, the extension should also work in Chrome and Edge, but not via the Chrome Web Store yet. Alternatively, you can check out Az Mask.
Hiding the status bar
To prevent the URLs from popping up in the browser status bar, I found some useful info here.
It turns out that you can customize Firefox’s appearance with a custom CSS stylesheet.
To make this work, first navigate to about:config in Firefox, and set the toolkit.legacyUserProfileCustomizations.stylesheets setting to true:
Now go to Help / Troubleshooting Information in the browser’s menu, and open the Profile Folder:
In the folder, create a new folder called chrome.
In chrome, add a Stylsheet text file called userChrome.css, containing this style:
#statuspanel {
display:none !important;
}As you can see, it just hides the complete status bar, which is ideal in my case. To show as much relevant content as possible, I record Azure portal demos with the browser in full screen mode. With also the status bar gone, that leaves the complete portal view.
If you want to be picky about only hiding certain types of content in the status bar, instead of the whole bar, you should be able to use CSS rules like the following, as described here:
#statuspanel[type="status"] #statuspanel-label[value^="Look"],
#statuspanel[type="status"] #statuspanel-label[value^="Connect"],
#statuspanel[type="status"] #statuspanel-label[value^="Send"],
#statuspanel[type="status"] #statuspanel-label[value^="Transfer"],
#statuspanel[type="status"] #statuspanel-label[value^="Read"],
#statuspanel[type="status"] #statuspanel-label[value^="Wrote"],
#statuspanel[type="status"] #statuspanel-label[value^="Wait"],
#statuspanel[type="status"] #statuspanel-label[value*="TLS handshake"],
#statuspanel[type="status"] #statuspanel-label[value*="FTP transaction"] {
display:none!important;
}Which of these are supported might depend on your Firefox version. At the time I’m writing this, I’m using version 84.0 (64-bit), on Windows 10.
Thanks for reading!