Как я могу получить размер изображения веб-камеры с помощью getUserMedia?

Я пытаюсь выяснить, какой размер изображения я получаю с веб-камеры, используя getUserMedia.

Прямо сейчас, в моем Macbook, я предположительно камера 720p, но изображение, которое я получаю, составляет 640x480. Я предполагаю, что это не всегда будет так, и я хотел бы иметь возможность обрабатывать как можно больше камер. (Я больше забочусь о соотношении сторон, чем сам размер, я просто хочу, чтобы изображения не отображались растянутыми)

Ответы

Ответ 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);

UPDATE: на самом деле это работает в Opera, но, похоже, больше не поддерживается в Chrome и не реализовано в Firefox (по крайней мере, не для видеопотоков). Он в спецификации HTML5, хотя, надеюсь, он включен в дорожную карту для этих браузеров.

ОБНОВЛЕНИЕ 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);

Ответ 2

Присоединение к событию playing не работает в Firefox (по крайней мере, в Firefox 26.0 на Ubuntu 12.04 LTS, который я использую). Событие playing срабатывает один или два раза после начала воспроизведения видео. videoWidth и videoHeight равны 0 или undefined, когда срабатывает событие playing. Более надежный способ обнаружения 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);
    }
};