10881 sujets

JavaScript, DOM et API Web HTML5

Bonjour
J'essaie de récupérer un flux de webcam, qui va aller sur un canevas et être manupilé dans tous les sens. Avec le code suivant, je récupère mon flux - peut-être même aussi avec iOS, qui est un autre gros problème, mais pas ici -, tout va bien. Comme ça doit pouvoir être vu surtout sur un smartphone, aussi sur une tablette, je veux récupérer les dimensions de l'image pour l'adapter au mieux à celles du device.

Et c'est là que je tombe sur un problème tès bête. J'ai aucun souci à récupérer les dimensions dans l'évènement, mais j'arrive pas à les sortir du bloc. Avec n'importe quel autre bloc, il suffit de faire une variable globales, mais là, elle sont ignorées.

Que faire ?

Merci d'avance.

<!DOCTYPE html>

<body>
    <video id='webcam' autoplay playsinline></video>
    <script>
        var webcam = document.getElementById('webcam');
        var width, height ;

        webcam.addEventListener("loadedmetadata", function(){
            width = this.videoWidth ;
            height = this.videoHeight
            console.log("loadedMetaData: ", this.videoWidth, this.videoHeight)  ;
        });
        
        console.log("hors fonction: ", width, height)  ;


        window.onload=function(){
            console.log("Onload: ", width, height);

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                    audio: false,
                    video: {
                        facingMode: 'environment'
                    }
                })
                .then(function(stream) {
                    webcam.srcObject = stream;
                })
            }
        }
    </script>
</body>
Bonjour,

La raison pour laquelle tu "ne vois pas" les bonnes valeurs de height et width dans la console est que le code suite à la survenu d'un évènement "loadedmetadata" est exécuté en léger différé (en gros, quand tout est prêt pour qu'il puisse être exécuté, on dit qu'il s'agit d'une exécution "asynchrone").

Ce n'est pas propre à cet évènement, c'est le cas pour tous les évènements. Et ce n'est pas une question de visibilité de variables. Les variables height et width finiront par avoir les valeurs attendues même à l'extérieur de ce que tu appelles le "bloc".

La manière correcte d'écrire la suite de ton code est donc de l'ajouter à l'intérieur de la fonction qui est en paramètre de webcam.addEventListener("loadedmetadata", function(){...});

Ce n'est pas du tout difficile à faire. Par exemple tu peux écrire :

var magic=function(){/* mettre ici le code qui récupère et manipule height et width */};

webcam.addEventListener("loadedmetadata",magic);


Amicalement,
Modifié par parsimonhi (30 Jul 2020 - 09:58)