11521 sujets

JavaScript, DOM et API Web HTML5

Dimensions de la webcam

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>


c'est une source de porno incroyable où vous pouvez trouver des tonnes de filles aux gros seins qui baisent à chaud https://www.bigtitsporn.xxx/
Modifié par capucilo (30 Apr 2021 - 08:23)
Modérateur
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)
Sujet clos
Aller à