Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add brightness-mode-explainer.md. #334

Merged
merged 25 commits into from
Jan 26, 2022
Merged
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
44a4285
Add brightness-mode-explainer.md.
rakuco Dec 17, 2021
746a70b
Make the Screen-based idea a proposed solution as well.
rakuco Dec 21, 2021
6b44cac
Add timeout to the code example
rakuco Jan 13, 2022
67e3898
Mention low battery in the Goals section.
rakuco Jan 13, 2022
76dce08
Incorporate review suggestion
rakuco Jan 18, 2022
413a603
Incorporate review suggestions.
rakuco Jan 18, 2022
8bd1bdc
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
95a2a04
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
6db1026
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
fc98916
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
2cb91a8
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
ca0eab5
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
fd2a152
Incorporate review suggestion.
rakuco Jan 18, 2022
ab5d893
Apply suggestions from code review
rakuco Jan 18, 2022
6f1577a
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
7aad217
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
fb25303
Adjust previous commit.
rakuco Jan 18, 2022
b85c6f5
Apply suggestions from code review
rakuco Jan 18, 2022
5be36bb
Apply suggestions from code review
rakuco Jan 18, 2022
3505713
Add a missing empty line between headers.
rakuco Jan 18, 2022
b271b84
Move links from the beginning to the end of the text.
rakuco Jan 18, 2022
b5e2603
Remove a few use cases from the least.
rakuco Jan 25, 2022
5d7eafa
Add examples of mobile apps that change the screen's brightness level.
rakuco Jan 25, 2022
87c16ad
Elaborate a bit more on why getUserMedia() is not a good option.
rakuco Jan 25, 2022
ef91054
Apply suggestions from code review
tomayac Jan 26, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 128 additions & 0 deletions brightness-mode-explainer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
# Design Document: the need to control screen brightness

## Introduction

Since 2018, the working group has received [significant requests](https://github.com/w3c/screen-wake-lock/issues/129) from web developers surrounding the need to increase the brightness of a device's screen.

For developers, it would help address the following use cases:

- a user scans a QR/barcode under various lighting conditions, in which case boosting the screen brightness creates more contrast.
- this is already possible on native mobile apps such as [Starbucks'](https://play.google.com/store/apps/details?id=com.starbucks.mobilecard), [the UK Home Office's Document Check app](https://play.google.com/store/apps/details?id=uk.gov.HomeOffice.ho1) and the [Dutch government's CoronaCheck app](https://play.google.com/store/apps/details?id=nl.rijksoverheid.ctr.holder).
- increasing the screen brightness can help illuminate a user's facial features, improving the viability of certain application that rely on the front facing camera (e.g., [make up mirror](https://play.google.com/store/apps/details?id=mmapps.mirror.pro&hl=en&gl=US) style apps, and applications that can scan people's facial features to perform some particular action).

rakuco marked this conversation as resolved.
Show resolved Hide resolved
## Open design issues

The following issues remain open for discussion:
- should UAs be free to limit the maximum brightness level and/or do other things like increase the contrast?
- Should this be mobile first/only? (i.e., not worry about external displays)?
- Should this trigger `prefers-contrast: more` in [CSS Media Queries](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast)?
- From [https://github.com/w3c/devicesensors-wg/issues/51](https://github.com/w3c/devicesensors-wg/issues/51)
- Brightness levels
- How bright is too bright? Consider 100% brightness with HDR displays, for example.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you could talk about specific nit values

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean by "nit values"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a unit for light intensity: https://en.wikipedia.org/wiki/Candela_per_square_metre - it is very common to use it for displays.

Good article: https://www.maketecheasier.com/what-is-nit-of-screen-brightness/

"Technically, a device starts counting as “sunlight-readable” when it hits at least 1,000 nits, but very few mobile displays go that high. As a general rule, anything above 400 to 500 nits will do pretty well on a sunny day, but at 200 nits, you may have to find some shade to answer texts."

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. I'm used to "nit' being short for "nitpick", which makes some of those sentences very funny to read :-)

Do you know if nits are exposed by any platform?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know sorry. But on Android you at least seem to be able to get the max range: https://stackoverflow.com/questions/4544967/get-preferred-screen-brightness-in-android/8114307#8114307

- Take a discrete or continuous value?
- Related to whether script should be allowed to reduce brightness.
- Permission model
- Would it require a user gesture (request but not consume it)?
- While brightness changes
- What if users change the brightness level while the lock is held?
- When dropping a screen brightness request
- Does the UA have to restore the previous brightness level?
- What about external displays? Do UAs need to keep track of levels for each display?
- Should script be allowed to "hold the lock" indefinitely?

## Goals

- Provide the ability to request an increase to the display's brightness. This could be a UA-controlled maximum (which *could* be the maximum display brightness), either indefinitely or for a period of time.
- Provide the ability to release the request so that the device's brightness returns to its pre-request value (i.e., hand back control to OS).
- Handle error or low battery cases, where such requests are denied or not possible. For privacy, the API must not make it possible to determine whether a request failed due to low battery.

## Non-goals

- Reading the current screen brightness level.
- Adjusting the display brightness level to arbitrary values (absolute or relative).
- [\<video\> integration to allow, e.g., granular brightness control](https://github.com/w3c/screen-wake-lock/issues/129#issuecomment-926603108) is an instance of the above. This is most likely better handled elsewhere and should probably be a UA-specific control.

## Proposed Solutions

The following represents some rough proposals that could address the use cases using various web technologies.

We present them here only to foster discussion, and the working group has not settled on any particular one. We are open to feedback to pursue any of the proposals below. Or, if there is a better alternative solution we have not considered, we would be open to hearing it!

### Screen IDL interface extension

Extend the [`Screen` interface](https://drafts.csswg.org/cssom-view/#the-screen-interface) with a new operation, inspired by the [Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/WakeLockSentinel). Something like:

```webidl
[SecureContext]
partial interface Screen {
Promise<ScreenBrightnessSentinel> requestBrightnessIncrease();
};

interface ScreenBrightnessSentinel {
Promise<undefined> release();
rakuco marked this conversation as resolved.
Show resolved Hide resolved
};
```

Proposed usage:

```javascript
myButton.addEventListener("click", async () => {
try {
const sentinel = await screen.requestBrightnessIncrease();
console.log("The display's brightness level has increased");
// …and release it after 5s.
window.setTimeout(() => {
await sentinel.release();
}, 5000);
} catch (e) {
console.error(e);
}
});
```

### Screen Wake Lock integration

The idea was to extend the existing Screen Wake Lock API and tie the change in brightness to a `WakeLockSentinel`. Something like:

``` javascript
const lock = await navigator.wakeLock.request({ increaseBrightness: true });
```

This was considered for a long time until the [2021-11-17 DAS WG meeting to discuss the topic](https://www.w3.org/events/meetings/0f623aa1-2026-4366-846b-c2faedda4180).

### `navigator.screenBrightness`

The API proposed there had a larger surface that allowed reading the brightness value (leading to potential fingerprinting issues). Originally proposed in [WICG issue 17](https://github.com/WICG/proposals/issues/17).

### `requestFullscreen()` integration

The idea to integrate with `Element.requestFullscreen()`, to do something like:

``` javascript
body.requestFullscreen({ increaseBrightness: true });
```

To take advantage of existing UA privacy mitigations and UX indications that would show to the user that a web application is increasing the brightness, and leaving full screen mode would make it clear that the UA should stop increasing the device's screen's brightness level.
See [whatwg/fullscreen](https://fullscreen.spec.whatwg.org/) issues [185](https://github.com/whatwg/fullscreen/issues/185) and [198](https://github.com/whatwg/fullscreen/issues/198).

rakuco marked this conversation as resolved.
Show resolved Hide resolved
### getUserMedia() integration
rakuco marked this conversation as resolved.
Show resolved Hide resolved

Add something to `getUserMedia()` to bundle the request for brightness into the media capture request itself.

This is complicated because this feature is not doing media capture (and there is no `MediaStream` to get out of screen brightness), and the need to ask for camera permission before, e.g., entering full screen mode [complicates some use cases](https://github.com/w3c/screen-wake-lock/issues/129#issuecomment-858790397).

### CSS property

Some form of "scannable element" property. When an element with said property is visible, the UA would take care of increasing the brightness level.

*Note: this is the least hashed out proposal at this point. It is unclear how this would work with zoom, permissions, low-battery mode, what happens when an element scrolls in/out of view, or even how to mitigate something like*
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we implemented one of the proposals above featuring a requestIncreasedBrighness() method then I would polyfill this proposal roughly as,

let sentinel;
element.onvisible = () => {
  sentinel = requestFullBrightness();
};
element.onhidden = () => {
  sentinel.release();
};

Polyfilled in this way all the same abuse mitigations would apply with the advantage that the browser has some insight into how the page content relates to the developer's desire for increased brightness and can do things like offer to increase brightness when the element is visible (instead of automatically doing so) or increase brightness gradually as the element enters the viewport.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't that bypass the user gesture requirement and allow one to add the max-brightness style to <body>?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily. The browser could still require the user interact with the page in some way before the property took effect or else it would display its own UI prompting the user with something like "tap here to make this page easier to scan".


``` html
<body style="brightness: max">*
```

## Past discussions
- https://github.com/WICG/proposals/issues/17
- https://github.com/w3c/screen-wake-lock/issues/129
- https://github.com/w3c/devicesensors-wg/issues/51
- https://www.w3.org/2021/11/17-dap-minutes.html