如何检测网络摄像头的宽度和高度？

Question

如何检测相机的宽度和高度以在画布上使用它并保持比例？

我需要检测相机的宽度和高度，然后在画布上使用它。在新画布中，我将显示带有一些滤镜的实时视频。相机的尺寸应与视频相同。

我用来访问相机的代码：

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || naviagor.msGetUserMedia);

    var options = {video: true};
    var videoWidth, videoHeight;

    var onFail = function(e) {
      alert('Failed to get camera');
      alert(e);
    };
    var onSuccess = function(stream) {

        if(navigator.mozGetUserMedia) {
            video.mozSrcObject = stream;
        } else {
            var url = window.URL || window.webkitURL;
            video.src = url.createObjectURL(stream);
        }

        // Wait 1000 ms before starting the loop
        setTimeout(function(){

            //rest of functions ...
            //Here I need to use: videoWidth, videoHeight
            //that are obtained from the image data of the camera

        },1000);
    };

    navigator.getUserMedia(options, onSuccess, onFail);

Answer 1

有两种方式：Chrome 和 Firefox 支持新的

track.getSettings()

:

let stream = await navigator.mediaDevices.getUserMedia({video: true});
let {width, height} = stream.getTracks()[0].getSettings();
console.log(`${width}x${height}`); // 640x480

无论流是否连接到任何东西，这都有效。

或者，对于较旧的浏览器，将流连接到 video 元素，并且（重要的是）等待元数据加载，然后再查看

videoWidth

和

videoHeight

：

video.srcObject = await navigator.mediaDevices.getUserMedia({video: true});
await new Promise(resolve => video.onloadedmetadata = resolve);
console.log(`${video.videoWidth}x${video.videoHeight}`); // 640x480

请注意，大多数网络摄像头支持多种分辨率。使用 constraints 获得更高的分辨率：

await navigator.mediaDevices.getUserMedia({video: {width: 9999}}); // 1280x720

这是一个工作小提琴。

Answer 2

您可以使用

videoWidth

元素的

videoHeight

和

video

属性获取宽度和高度：

video.videoWidth
video.videoWidth

查看现场演示

Answer 3

7年后

流可以由多个轨道、音频、媒体、视频组成 因此，迭代并查看哪个是视频并从该轨道中获取大小非常重要。

let width, height;
stream.getTracks().forEach(track => {
  if (track.kind === 'video') {
    width = track.getSettings().width;
    height = track.getSettings().height;
  }
});