Just to be clear I am really a beginner at coding, so the code is not really fine tuned:) I appreciate all the help I can get!
I am currently writing a code that is supposed to automate the process of scrolling and zooming through images. As an input image I want the 'program' to zoom (using the random factor) through the live video stream of the back camera of my iPhone. This is working to some extent, but there are some problems:
-
the screen is black when I open the site in Safari on my iPhone (before it was working but
the image was freezed) -
the video is not adapting its size to the browser
-
the video is not fixed - sometimes it "flys" out of the frame and you see white boarders
-
the transition is still quite fast, I would like that the steps between changing the random
factor are smaller -
I wrote this to choose the back camera of my phone: video: { facingMode: 'environment' } })
-
I thought 100vw in height in width would
solve that -
this probably has something to do with the fact that the video element is the one being
scaled -> there is no real "zoom in" effect.
I appreciate any hints on how to improve this:)
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true,
video: {
facingMode: 'environment'
} })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
});
}
root = document.documentElement;
// Function to set random x, y and scale values
// math.random () returns a random number between 0 (inclusive), and 1 (exclusive):
// ganzzahlige Zufallswerte mit: math.floor()
function setRandomScaleAndPosition() {
// calculate values
var x = Math.floor(Math.random() * 100 - 50) // min = 0*100-50 => -50 ; max = 1*100-50 => 50
var y = Math.floor(Math.random() * 100 - 50)
var scale = 2 // Math.floor(Math.random() * 6 + 2) //siehe css var scale
// display values in console
console.log("new values:", x, y, scale)
// set CSS variables
root.style.setProperty('--translate-x', x + "%");
root.style.setProperty('--translate-y', y + "%");
root.style.setProperty('--scale', scale);
}
// run setRandomScaleAndPosition
setInterval(setRandomScaleAndPosition, 600)#container {
padding:0;
width: 100vw;
height: 100vw;
/* object-fit: cover;
overflow: hidden; */
}
/* div {
height: 100vw;
width: 100vw;
overflow:hidden; /*The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
} */
#videoElement {
width:100vw; /*If the width property is set to 100%, the video player will be responsive and scale up and down:*/
height: 100vw;
object-fit: cover;
transition-duration: 6s;
transform: scale(var(--scale)) translateX(var(--translate-x)) translateY(var(--translate-y));
outline: none;
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Please help me find the truth</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<video muted autoplay="true" id="videoElement">
</video>
</div>
<script src="main.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire