在js中获取html视频流的宽度和高度答案

【问题标题】：Getting width and height of html video stream in js在js中获取html视频流的宽度和高度
【发布时间】：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>

【问题讨论】：

这会有帮助吗？ stackoverflow.com/questions/4129102/html5-video-dimensions

标签： javascript video

【解决方案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中显示的大小