Wie kann ich mit getUserMedia die Größe des Webcam-Bildes ermitteln?

Question

Ich versuche herauszufinden, wie groß das Bild ist, das ich von der Webcam mit getUserMedia bekomme.

Gerade jetzt, in meinem Macbook, habe ich angeblich eine 720p Kamera, aber das Bild, das ich bekomme, ist 640x480. Ich gehe davon aus, dass dies nicht immer der Fall sein wird, und ich würde gerne so viele Kameras wie möglich handhaben können. (Ich sorge mich viel mehr über das Seitenverhältnis als Größe selbst, ich möchte nur sicherstellen, dass Bilder nicht gestreckt angezeigt werden)

Ist es möglich, dies zu tun?

Vielen Dank!
Daniel

Answer 1

Sie sollten videoWidth und videoHeight Attribute verwenden können, wie folgt aus:

// 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: Eigentlich ist dies in Opera funktioniert, aber scheint nicht mehr und hasn in Chrome unterstützt werden wurde nicht in Firefox implementiert (zumindest nicht für Videostreams). Es ist jedoch in der HTML5 spec, so hoffentlich ist auf der Roadmap für diese Browser.

UPDATE 2: Dies funktioniert, aber das Ereignis zu hören ist "spielen" und nicht "spielen" (im obigen Code behoben). Das Ereignis "play" wird ausgelöst, wenn die Methode play() zurückgegeben wird, während das Ereignis "playing" ausgelöst wird, wenn die Wiedergabe tatsächlich gestartet wurde. Getestet in Opera, Chrome und Firefox.

UPDATE 3: Firefox 18 scheint das "spielende" Ereignis wiederholt auszulösen, was bedeutet, dass der Browser zum Stillstand kommen kann, wenn Sie viel Code innerhalb des Hörers ausführen. Besser den Hörer zu entfernen, nachdem er gefeuert, etwa so:

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

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

Answer 2

Einhaken in das playing Ereignis nicht in Firefox funktioniert (zumindest in Firefox 26,0 auf Ubuntu 12.04 LTS ich verwende). Das Ereignis playing wird ein- oder zweimal ausgelöst, nachdem das Video abgespielt wurde. videoWidth und videoHeight sind entweder 0 oder undefiniert, wenn das Ereignis playing ausgelöst wird. Ein zuverlässigerer Weg zur Erkennung von videoWidth und videoHeight ist Pausieren und Abspielen des Videos, das scheint immer zu funktionieren. Der folgende Codeausschnitt funktionierte für mich:

//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); 
    } 
};