'Is it possible to increase a device's screen brightness in a web application?

I have a web application that takes pictures, and I'm trying to implement a selfie flash. However, this doesn't work in cases where a user has their brightness turned down. Is it possible to adjust a device's screen brightness in a web application?

I'm using a white overlay as the flash, and I tried to increase the brightness using CSS, but it didn't have any impact since the overlay is already 100% white

javascripthtmlcssweb-applications


Solution 1:[1]

Maybe this can help

function fun(e)
{
var container = document.getElementById('container');
var val = e.value;
container.setAttribute("style", "filter: brightness("+val+"%);");
}
body {    
  margin: 0;
  padding: 0;
}
#container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #22438C;    
}
.main {
  width: 500px;
  background: #FFF;
  border-radius: 10px;
  padding: 40px;
}
#brightness-range {
  width: 100%;
  -webkit-appearance: none;
  background: #E40404;
  height: 10px;
  outline: none;
  cursor: pointer;    
}
#brightness-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  background: #22438C;    
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Brightness using Range Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <div class="main">
      <input type="range" id="brightness-range" min="10" max="100" value="100" onchange="fun(this)">
    </div>
  </div>
</body>    
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dimas Wahyu Notonagoro

Related Questions