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
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>