Discord OAuth login screen animation cause slowdown in OBS browser source

[smlbiobot]

I apologize in advance that this is not really about the API — but when I’ve contacted Discord support, they have asked me to report the issue here instead. My Discord issue ID is 10056282 titled Discord OAuth Screen: query to disable animation? sent from email sml@royaleapi.com

Description

Our site uses Discord OAuth as login to authenticate user access to certain web-based features. One such feature is our stream overlay intended for streamers to broadcast esports events for the game Clash Royale.

We have received user reports (as well as tested ourselves) that the Discord login screen contain certain subtle animation that is causing slowdown when used with the OBS browser source on OSX, which unfortunately is the only way that a user would be able to use our overlay. In fact, the subtle animation effect seems to slow down everything so much that we have had to ask our users to use the QR Code option to login because the input boxes can’t be used at all. But some users can’t even click the Authorize button.

This flow works fine on all browsers except OBS. We therefore think that it’s a combination of OBS browser rendering speed but also those little dots animation flying in the background that has dragged the frame rate down to an unusable speed.

What I’d like to see is either:

• you disable those animation completely
• allow alternative login screen that does not contain those animation that causes slow down
• if case it can accept query string (which I assume that it can’t because this is standard OAuth flow), allow me to set a “flag” to disable those animations.

Steps to Reproduce

Below is how to reproduce this issue with OBS / Mac + Discord OAuth. We also have a step-by-step guide with screenshots here: https://help.royaleapi.com/overlay_streamer.html — you might want to check it out if you are unfamiliar with OBS (Open Broadcaster Software). We use Streamlabs OBS here because its Mac version is more optimized but you an use the original version https://obsproject.com/ and it can reproduce this behavior.

• Download Streamlabs OBS at https://streamlabs.com/
• Open OBS and select Add Source
• Select Browser Source
• In URL, enter https://royaleapi.com/login
• Set the width to 1920 and height to 1080
• Right-click at the browser source and select Interact (this is how OBS will allow keyboard / mouse input to browser sources)
• Click on Discord Login
• This takes you to the Discord OAuth screen. Here you should be able to see that the input are so slow that you can only type in very slow FPS -> so slow that we have had to asked users to use QR code to login.

Expected Behavior

I should be able to enter my login details and click on things without delay in any browser window.

Current Behavior

The subtle background information causes slower browser renderers such as OBS to halt to an unusable level.

Screenshots/Videos

Can’t provide any right now but if this is necessary, I will try to do a screen cast for it.

Client and System Information

OSX 11.1 Big Sur — though this is reproducible on Catalina and Mojave also.

[jhgg]

Sorry I'm a bit confused here but this sounds like an OBS issue and not a Discord one.

[night]

If I had to guess, Streamlabs does not have hardware acceleration enabled in Chromium or something. You'd need to reach out to their support. You could also try the real OBS: https://obsproject.com (it does use hardware acceleration according to their lead developer).

[jp9000]

Hardware acceleration on macOS was only just added a week ago. If you have not tried 26.1.2, I would recommend trying it.

[smlbiobot]

@jp9000 thanks — I have checked it out and it does seem faster.

@jhgg Sure you can say that it is related to OBS — but it doesn’t change the fact that if I use the OAuth login with Twitter or Google, I can type on the keyboard, while the OAuth login with Discord is too slow to type.

And there is nothing wrong with the page except that the animation is slowing things down.

While I agree that the animation is nice from a brand perspective for UX, it is currently breaking the UX on slower browsers / devices — I’m not sure if it‘s completely an OBS issue if it affects a valid user base. And the animation is a nice-to-have element. They didn’t use to exist and it didn’t cause issues until they were added.

[advaith1]

As a workaround, it does not animate if the width is 485 or less.

[smlbiobot]

As a workaround, it does not animate if the width is 485 or less.

Interesting. This is an ingenious workaround that works — thanks so much for this hack!