How to remove Firefox orange microphone/webcam indicator from the top of the screen?

Firefox places this annoying indicator in the top of the screen when it is capturing video or sound from my computer.

It stays there even if I change to another window.

A Reddit post (How do I remove this microphone indicator?) suggests using this userChrome.css:

#webrtcIndicator {
  display: none;
}

However that does not work for me: The indicator is still up there, unchanged. How can I get rid of it?

1. Navigate to your Firefox profile directory. If you do not know what it is:
   • In Firefox, go to Help > Troubleshooting Information
   • The directory is listed in "Profile Directory".
2. Create the directory chrome in it.
3. Inside the chrome directory just created, create the file userChrome.css with these contents:

#webrtcIndicator {
  display: none;
}

4. Enter about:config in Firefox address bar. Accept the prompt to be cautious.
5. Type userprof in the search field.
6. Switch the option toolkit.legacyUserProfileCustomizations.stylesheets to true (you can double-click it to switch or click "Toggle" button).
7. Restart Firefox.

I tested this on GNU/Linux, but I have no reason to believe this would be an operating system specific solution.

Steps 5 to 7, which I found in How to Create a userChrome.css File, are necessary for a Firefox version >= 69.

For anyone finding this question through search engines, there's a much easier way now.

First, go to about:config and look for the key privacy.webrtc.legacyGlobalIndicator, and set it to false.

Now, "search" for the (non-existent) key privacy.webrtc.hideGlobalIndicator. Since it doesn't exist, you'll be allowed to create it. Choose the boolean type, and set it to true.

Restart Firefox and that pesky icon will be gone!