在js中获取html视频流的宽度和高度
Posted
技术标签:
【中文标题】在js中获取html视频流的宽度和高度【英文标题】：Getting width and height of html video stream in js 【发布时间】：2020-10-28 09:57:26 【问题描述】：我试图在 html 和 js 中获取视频流的宽度和高度，它总是返回零，我不想在视频标签中指定宽度和高度，并且总是有什么自然设备视频宽度和高度然后检查它高度和宽度是js，代码如下：
<!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>
【问题讨论】：
这会有帮助吗？ ***.com/questions/4129102/html5-video-dimensions 【参考方案1】：您使用了正确的属性。您只需要等待视频播放就可以达到一定的尺寸：
<!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>
【讨论】：
【参考方案2】：您可以使用以下示例通过元素的 html 属性或 CSS 属性获取元素的尺寸。
获取宽度：vidCheck.offsetWidth
获取高度：vidCheck.offsetHeight
【讨论】：
【参考方案3】：只需查找视频，您就可以读取变量：
video.currentTime = 1;
console.log(video.videoWidth);
console.log(video.videoWidth);
【讨论】：
【参考方案4】：此代码返回 640 宽度和 480 高度：
<!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>
但是这段代码 sn-p 返回不同的东西 300 和 150 ：
Get width: vidCheck.offsetWidth
Get height: vidCheck.offsetHeight
在我看来第一个是正确的，但不知道差异的原因。
【讨论】：
自然大小是网络摄像头的分辨率。偏移大小是你在html中显示的大小以上是关于在js中获取html视频流的宽度和高度的主要内容，如果未能解决你的问题，请参考以下文章