Comment puis-je obtenir la taille de l'image de la webcam avec getUserMedia?

J'essaie de trouver quelle sera la taille de l'image-je obtenir à partir de la webcam à l'aide de getUserMedia.

Droit maintenant, dans mon Macbook, j'ai soi-disant une caméra 720p, mais l'image que j'obtiens est de 640 x 480. Je suis en supposant que ce ne sera pas toujours le cas, bien que, et je voudrais être en mesure de gérer autant de caméras que possible. (Je me soucie beaucoup plus sur l'aspect ratio de la taille lui-même, je veux juste m'assurer que les images ne s'affichent pas étiré)

Est-il possible de faire cela?

Merci!!!!
Daniel

source d'informationauteur Daniel Magliola

  1. 17

    Vous devriez être en mesure d'utiliser videoWidth et videoHeight attributs, comme ceci:

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

    Mise à JOUR: en Fait, cela fonctionne dans l'Opéra, mais ne semble pas être pris en charge dans Chrome plus et n'a pas été implémenté dans Firefox (du moins pas pour les flux vidéo). C'est dans le Spec HTML5bien que, espérons-le, est sur la feuille de route pour ces navigateurs.

    Mise à JOUR 2: Ceci fonctionne, mais l'événement afin de les écouter est de "jouer" et non pas "jouer" (corrigé dans le code ci-dessus). Le "jeu" de l'événement est déclenché lorsque l' play() méthode est retourné, alors que la "lecture" de l'événement est déclenché lorsque la lecture a effectivement commencé. Testé sous Opera, Chrome et Firefox.

    Mise à JOUR 3: Firefox 18 semble le feu à la "lecture" de l'événement à plusieurs reprises, en ce sens que le navigateur puisse stagner si vous êtes l'exécution de code à l'intérieur de l'auditeur. Mieux retirer l'auditeur après il est déclenché, comme suit:

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

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

    D'accrochage dans le playing événement ne fonctionne pas dans Firefox (au moins dans Firefox 26.0 sur Ubuntu 12.04 LTS que j'utilise). Le playing événement se déclenche une ou deux fois après la vidéo commence à jouer. videoWidth et videoHeight sont soit 0 soit pas défini lorsque le playing événement se déclenche. Un moyen plus fiable pour détecter videoWidth et videoHeight est la pause et la lecture de la vidéo, qui semble toujours travailler. L'extrait de code ci-dessous a fonctionné pour moi:

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