Question

我正在尝试使用getUserMedia找出我从网络摄像头获得的图像大小。

现在，在我的Macbook中，据说是720p相机，但我得到的图像是640x480。我假设情况并非总是如此，我希望能够处理尽可能多的相机。（我更关心纵横比而不是尺寸本身，我只是想确保图片不显示拉伸）

是否可以这样做？

谢谢！丹尼尔

Answer 1

您应该能够使用videoWidth和videoHeight属性，如下所示：

// Check camera stream is playing by getting its width
video.addEventListener('playing', function() {
    if (this.videoWidth === 0) {
        console.error('videoWidth is 0. Camera not connected?');
    }
}, false);

更新：实际上，这适用于Opera，但Chrome似乎不再受支持，并且尚未在Firefox中实现（至少不适用于视频流）。不过，它位于HTML5 spec，因此希望这些浏览器符合路线图。

更新2：这确实有效，但是要监听的事件是“正在播放”而不是“播放”（在上面的代码中修复）。返回play()方法时会触发“play”事件，而实际开始播放时会触发“播放”事件。在Opera，Chrome和Firefox中测试过。

更新3：Firefox 18似乎反复触发“播放”事件，这意味着如果您在侦听器中执行大量代码，浏览器可能会停止运行。最好在触发后删除侦听器，如下所示：

var videoWidth, videoHeight;
var getVideoSize = function() {
    videoWidth = video.videoWidth;
    videoHeight = video.videoHeight;
    video.removeEventListener('playing', getVideoSize, false);
};

video.addEventListener('playing', getVideoSize, false);

Answer 2

挂钩playing事件在Firefox中不起作用（至少在我使用的Ubuntu 12.04 LTS上的Firefox 26.0中）。视频开始播放后，playing事件会触发一次或两次。当videoWidth事件触发时，videoHeight和playing为0或未定义。检测videoWidth和videoHeight的更可靠方法是暂停和播放视频，这似乎始终有效。下面的代码片段对我有用：

//Detect camera resolution using pause/play loop.
var retryCount = 0;
var retryLimit = 25;
var video = $('.video')[0]; //Using jquery to get the video element.
video.onplaying = function(e) {
    var videoWidth = this.videoWidth;
    var videoHeight = this.videoHeight;
    if (!videoWidth || !videoHeight) {
        if (retryCount < retryLimit) {
            retryCount++;
            window.setTimeout(function() {
                video.pause();
                video.play();
            }, 100);
        }
        else {
            video.onplaying = undefined; //Remove event handler.
            console.log('Failed to detect camera resolution after ' + retryCount + ' retries. Giving up!');
        }
    }
    else {
        video.onplaying = undefined; //Remove event handler.
        console.log('Detected camera resolution in ' + retryCount + ' retries.');
        console.log('width:' + videoWidth + ', height:' + videoHeight);
    }
};

如何使用getUserMedia获取网络摄像头图像的大小？

2 个答案: