2022 July 1

Unmirroring Discord's Webcam Preview

Update (2023-10-24): These instructions have stopped working after a Discord update. I will update this page if I find a new way to unmirror the webcam preview.

When you're using a webcam in Discord, Discord shows you your own webcam view horizontally flipped. Other people in the call see your webcam view unflipped; it's only your own preview of your webcam that's flipped. Sometimes this behavior is useful at making the preview less distracting by making it act more like a mirror of yourself in your own view, but this can be an obstacle if you find it important to see exactly how other people see your video. This can be especially annoying if you want to check the composition of the shot, if there's text in the view, or if you're using a virtual camera through OBS instead of an actual webcam.

Using my virtual avatar in an OBS scene as a virtual webcam in Discord.

Discord offers no setting to disable this behavior. However, it is possible to make a temporary modification to a running Discord instance to disable this behavior.

Enabling Developer Tools

First, you need to enable the browser developer tools inside Discord. The developer tools can be used in Discord to modify the program while it's running, but the feature is disabled by default because people are often tricked into using the developer tools to give away access to their Discord account.

If you enable the developer tools in Discord, it is important that you understand what you are doing with them. It is important to realize that scams often resemble the instructions on this very page you are reading. You should apply skepticism to these very instructions and any other similar pages as you are reading them. Never paste code you do not understand into the developer tools because the developer tools have the power to give away access to your account.

To enable the browser developer tools inside Discord, press the Windows key and R at the same time, enter this text, and press Enter:

%appdata%/Discord/settings.json

This will open a Discord settings file in Notepad like the following:

After the opening { bracket on the first line, paste this text in on its own line:

"DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING": true,

The settings file should now resemble the following. Don't worry if the rest of your settings file looks different than this.

{
  "DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING": true,
  "IS_MAXIMIZED": false,
  "IS_MINIMIZED": false,
  "WINDOW_BOUNDS": {
    "x": 2048,
    "y": 0,
    "width": 960,
    "height": 1040
  },
  "BACKGROUND_COLOR": "#202225"
}

Save the file and close Notepad. Fully quit Discord and start it again.

Using Developer Tools

You are now able to open the developer tools by pressing ctrl-shift-I in Discord. Now that you're in the developer tools, be skeptical of any instructions anyone gives you while using the developer tools, including this page, because misusing developer tools can allow someone to steal your Discord account.

When you press the keyboard combo to open the dev tools, a panel like the following will appear in your Discord window. You may see warning text inside of it like in this screenshot.

Scroll to the bottom of the console. You will find a textbox at the bottom of the console that you can type or paste text into.

In order to modify Discord to unmirror your webcam preview, you're going to paste some code into the developer tools. You should try to understand the code that you paste in. Consider that you are handing control of your Discord account to this code. You need to read the code and determine whether the code will run away with your account. The code has comments embedded in it on lines that start with // that attempt to explain the code. You should consider whether the explanations in the comments match what you want to accomplish, and you should consider whether the code next to the comments seems like it does what the comments say it does rather than something else.

// Go through each CSS stylesheet in Discord
for (const stylesheet of document.styleSheets) {
  // go through each rule in the stylesheet
  for (const rule of stylesheet.cssRules) {
    // is this the mirror rule?
    if (rule.selectorText?.startsWith('.mirror-')) {
      // then clear the CSS rule's properties
      rule.styleMap.clear();
      console.log('Modified mirror rule!');
    }
  }
}

CSS stylesheets are things that control how content inside of an application visually appears to the user. CSS stylesheets are made of rules that modify how things appear in the application. This code finds a specific rule in Discord's stylesheets and modifies the rule to no longer have any visual effect.

This code does not use the fetch() function, which could be used by a scammer to send your private data to a scammer. This code does not use the import() function, create a script tag, or include any URLs, which could load and execute more code from a scammer. Code that does any of that is dangerous to paste into the developer tools without an in-depth understanding of the code.

When you are comfortable with the code, paste it into Discord's developer tools, verify that what you pasted in matches what you think you copied, and then press Enter. The change to the webcam previews will take effect immediately, and this change will last until you quit or restart Discord. You can close the developer tools now.

Now whenever you're in a call and are using your webcam, Discord's webcam mirroring behavior will be disabled, and you will see your webcam the same way as everyone else will see it.

If you restart Discord then this change will be gone. You will have to open dev tools with ctrl-shift-I and paste the code in again if you want to re-apply this change.

There are open feature requests for Discord itself to implement an option to disable flipping the webcam preview. Please consider upvoting these posts or otherwise directing Discord's attention to them!

Be aware that in discussions about this issue, some people appear to be either misinformed about the issue or experiencing an unrelated bug and believe that everyone in the call sees their webcam view as mirrored. It is not the case that Discord mirrors your webcam in other people's views. If other people see your webcam as mirrored but you, unlike them, do not see your own webcam as mirrored, then the issue has to do with your webcam and not Discord.