diff --git a/assets/line.svg b/assets/line.svg new file mode 100644 index 0000000..7b16a02 --- /dev/null +++ b/assets/line.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index 83a697d..ef1c5ec 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,10 @@
- + zoom feature -

+ zoom slider +

diff --git a/js/stream.mjs b/js/stream.mjs index 6aa34e6..394d96b 100644 --- a/js/stream.mjs +++ b/js/stream.mjs @@ -45,6 +45,7 @@ export const streamWebCamVideo = (isFrontCamera = true) => { input.oninput = function (event) { track.applyConstraints({ advanced: [{ zoom: event.target.value }] }); + document.querySelector(".slider").style.left = "-60px" } input.hidden = false; document.querySelector(".range-container").style.visibility = "visible" diff --git a/style.css b/style.css index ddf42f8..d75e899 100644 --- a/style.css +++ b/style.css @@ -218,9 +218,13 @@ video.flip { color: #fff; font-size: 10px; translate: 0 18px; + pointer-events: none; } .range-container img{ position: absolute; - opacity: 0.6; + opacity: 0.9; pointer-events: none; +} +.range-container .slider{ + position: absolute; } \ No newline at end of file