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

Question

我试图找出使用 getUserMedia 从网络摄像头获取的图像的大小。

现在，在我的 Macbook 中，我应该有一个 720p 的相机，但我得到的图像是 640x480。不过，我假设情况并非总是如此，而且我希望能够处理尽可能多的相机。 (我更关心宽高比而不是尺寸本身，我只是想确保图片不会拉伸(stretch))

这有可能吗？

谢谢!
丹尼尔

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”事件，而当实际开始播放时会触发“playing”事件。在 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);