How to detect, from browser, if user is running in Remote Desktop session?
You can probably expose the detection code via an ActiveX or BHO (e.g. assign a property to the window object in BHO) if you use IE.
Otherwise if you are using an ActiveX player to play animation, check the player's documentation to see if it automatically adjust frame rate under remote desktop.
You can always offer a low bandwidth version of your web site and instruct the user choose the web site instead of the regular web site if the video playback is not satisfactory.
For tips in writing a terminal service-aware graphics app, check graphic effects consideration, and the general performance guidelines
My solution is to use CSS @media queries for minimum and maximum values of the color media feature. Based on experiment, RDP only seems to have 5 bits per color, rather than the full 8 bits per color of your typical desktop.
This solution is, of course, not perfect, because you'll get lots of false positives from people who aren't on RDP, but just happen to have low color-depth displays. However:
- If you are in a relatively controlled environment like a corporate intranet, you might feel more confident that "low color depth" = "RDP".
- Many of the visual elements that need adjusting for RDP on a web-page, need adjusting precisely because of the low color depth (gradients, fade outs, animation, etc.), and so it actually makes sense to test for color depth rather than RDP per se.
Here is an example that works for me in recent version of Firefox and Chrome. See the screenshot below.
<!DOCTYPE html>
<html>
<head>
<title>Test RDP detection</title>
<style type="text/css">
@media all { li.color { display: none; } }
@media all and (min-color: 1) { li.color.color-depth-1 { display: block; } }
@media all and (min-color: 2) { li.color.color-depth-2 { display: block; } }
@media all and (min-color: 3) { li.color.color-depth-3 { display: block; } }
@media all and (min-color: 4) { li.color.color-depth-4 { display: block; } }
@media all and (min-color: 5) { li.color.color-depth-5 { display: block; } }
@media all and (min-color: 6) { li.color.color-depth-6 { display: block; } }
@media all and (min-color: 7) { li.color.color-depth-7 { display: block; } }
@media all and (min-color: 8) { li.color.color-depth-8 { display: block; } }
/* 5 bits per color seems to be the max for RDP */
@media all and (max-color: 5) {
.not-rdp { display: none; }
}
@media all and (min-color: 6) {
.rdp-only { display: none; }
}
</style>
</head>
<body>
<p>This page uses CSS <tt>@media</tt> queries to detect whether you
are viewing it over RDP—heuristically, by looking at the
color depth of your display.</p>
<ul>
<li class="color color-depth-1">Your display is not monochrome!</li>
<li class="color color-depth-2">Your display has at least 2 bits per color.</li>
<li class="color color-depth-3">Your display has at least 3 bits per color.</li>
<li class="color color-depth-4">Your display has at least 4 bits per color.</li>
<li class="color color-depth-5">Your display has at least 5 bits per color.</li>
<li class="color color-depth-6">Your display has at least 6 bits per color.</li>
<li class="color color-depth-7">Your display has at least 7 bits per color.</li>
<li class="color color-depth-8">Your display has at least 8 bits per color.</li>
</ul>
<p>You are <span class="not-rdp">not</span> using RDP.</p>
<p class="rdp-only">This is only visible over RDP.</p>
</body>
</html>
Yet another approach along these lines is to use javascript to examine the value of the screen.colorDepth variable.
You can use the following media query:
@media screen and (prefers-reduced-motion: reduce) { . . . }
This condition can also hold for non-RDP sessions, but as your intention is to disable all animations, this type of query is probably exactly what you're looking for.