screen - Check if display supports HDR (High Dynamic Range) color in JavaScript? - Stack Overflow

admin管理员组

文章数量:1297062

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

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

• javascript
• screen
• hdr

Share Improve this question Follow asked Aug 7, 2019 at 18:11 ReactgularReactgular 54.8k2424 gold badges173173 silver badges218218 bronze badges 4

• 1 CSSWG: "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 Commented Aug 7, 2019 at 18:23
• @Andreas thank you sir! That should do the trick. You can post that as an answer if you want. – Reactgular Commented Aug 7, 2019 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 Commented Aug 7, 2019 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 Commented Oct 31, 2022 at 20:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)

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 */ 
}

本文标签： screenCheck if display supports HDR (High Dynamic Range) color in JavaScriptStack Overflow