7

Is it possible in JavaScript to detect if the browser's monitor supports HDR?

I have the requirement to display a HDR certificate on a webpage when the visitor is using a HDR monitor, but I've expressed to the client that this might not be possible. We've been able to embed video that supports HDR and it plays back correctly on Chrome for Windows.

So far in my research I've found no way of detecting such a capability.

The closest thing I've found is the Screen.colorDepth API

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • 1
    CSSWG: _"[colorDepth](https://drafts.csswg.org/cssom-view/#dom-screen-colordepth) can be used in the context of selecting SDR/HDR in addition with other information."_: `if (screen.colorDepth >= 48 && window.matchMedia('(color-gamut: p3)').matches && /* other checks */) { /* use HDR content */ } else { /* use SDR content */ }` – Andreas Aug 07 '19 at 18:23
  • @Andreas thank you sir! That should do the trick. You can post that as an answer if you want. – Reactgular Aug 07 '19 at 18:36
  • It's just a copy&paste from the CSS Working Group... If it works for you then just add it as an answer accept it :) – Andreas Aug 07 '19 at 18:39
  • Is this what YouTube is using to determine if your display is in HDR mode or is there something more native today? – Kevin Ghadyani Oct 31 '22 at 20:06

2 Answers2

3

Made a few experiments from the code suggested by @Andreas and tweaked it a tiny bit.

if (screen.colorDepth > 24 && window.matchMedia('(color-gamut: p3)').matches) { 
  /* use HDR content */ 
} else { 
  /* use SDR content */ 
}
Richard Oliver Bray
  • 1,043
  • 13
  • 20
3

The modern way to do it is using matchMedia() and the dynamic-range @media query:

console.log("SDR:", window.matchMedia("(dynamic-range: standard)").matches)
console.log("HDR:", window.matchMedia("(dynamic-range: high)").matches)
P Varga
  • 19,174
  • 12
  • 70
  • 108