Menu
I'm trying to get width and height of video stream in html and js and it returns always zero, I dont want specify width and height in video tag, and always have what natural device video width and height is then check it's height and width is js, heres the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video autoplay="true"></video>
<script>
let video = document.querySelector("video")
navigator.mediaDevices.getUserMedia({video: true})
.then((stream) => {
video.srcObject = stream
})
function vid() {
let vidCheck = document.querySelector("video")
console.log(vidCheck.videoWidth) // returns 0
console.log(vidCheck.videoWidth)//returns 0
}
vid()
</script>
</body>
</html>
314
asked Sep 19 '25 01:09
You're using the correct properties. You simply need to wait for the video to be playing for it to have a size:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<video autoplay="true"></video>
<script>
let video = document.querySelector("video");
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
video.addEventListener("playing", () => {
console.log(video.videoWidth);
console.log(video.videoHeight);
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
