webcam rend un bloc transparent

Le problème exposé dans ce sujet a été résolu.

Bonjour ! Je cherche à faire une page web qui affiche la webcam de l’utilisateur. C’est un exercice courant, alors j’ai pas eu de mal à arriver à ce code :

<html lang="fr">
    <head>
    </head>

    <body style="background-color: red;">
        <main>
            <p>Lorem Ipsum</p>
            <video style="background-color: blue;" id="playback" autoplay playsinline width="60%" height="60%"></video>
            <script>
                const constraints = {
                    video: {
                    width: {
                        min: 1280,
                        ideal: 1920,
                        max: 2560,
                    },
                    height: {
                        min: 720,
                        ideal: 1080,
                        max: 1440
                    },
                    }
                };

                if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
                    console.log("OK getUserMedia")
                }
                else(console.log("!OK getUserMedia"))

                navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream){
                    console.log("cam on");
                    document.addEventListener("DOMContentLoaded", function() {
                        video = document.getElementById("playback");
                        video.srcObject = stream;
                    } )
                })
                .catch (function(error) {
                console.log("error camera acces", e);
                })
            </script>
        </main>
    </body>
</html>

Cette page et ce script ensemble ne produisent aucun message d’erreur. J’ai bien la caméra allumée (petite diode) et la vidéo est bien présente sur la page. Problème : elle est invisible. Je sais qu’elle est présente, car quand j’inspecte la page (F12) j’ai bien une surbrillance à l’endroit où elle devrait être : C’est pour ça que je lui ai mis l’attribut style="background-color:blue;, pour la mettre en évidence, mais ce n’est pas l’origine du problème. J’ai aussi ajouté les mots clés autoplay playsinline muted et controls pour voir d’éventuels changement : rien. J’ai essayé sur plusieurs navigateurs (Chrome, Edge, Firefox, les 3 à jour), sur un un second ordinateur aussi, avec un autre OS : Rien à faire. Avez-vous une idée de ce qui cloche s’il vous plaît ?

+0 -0

Salut

J’ai l’impression que l’écouteur d’événement DOMContentLoaded est mal placé, et une fois le code analysé, cet événement est déjà survenu, ce qui fait que le flux n’est pas attaché à la vidéo. Si tu supprimes les lignes 33 et 36, ça pourrait mieux fonctionner.

+0 -0

Salut !

J’ai mis ces lignes par peur que cette partie du script s’exécute avant que l’élément html soit créé (car initialement, le script était dans un fichier à part), mais comme je n’ai pas d’erreur en l’enlevant, je suppose qu’il ne sert à rien. Malheureusement, je ne penses pas que ce soit le problème, car entre temps j’ai mis une seconde balise vidéo, pour une vidéo locale cette fois : Même chose, la vidéo est là, mais transparente, malgré les même tests que ceux effectués pour le retour camera. :(

J’avoue être perdu : J’ai exclu comme origine possible le navigateur, l’ordinateur, la source, le css (j’ai forcé style="visibility:visible;" pour voir s’il y avait pas un reste de css caché quelque part, j’ai revidé le cache et effacé les cookies au cas où… Je vois 2 choses que je n’ai pas encore testées : -changer de réseau -forcer la page en https (car je ne sais pas faire tout simplement, je me contente de cliquer sur mon fichier html, ou d’utiliser une extension live server)

Je vais essayer de faire ce passage https, même si j’y crois pas.

—-EDIT—-

Je viens de revérfier : http / https étant des protocoles de transmission client/serveur, ça n’a aucun sens de vouloir lire une page locale "en https plutôt que http" donc point mort. Pareil pour le changement de réseau, ça ne donne évidemment rien : prévisible. :(

—-EDIT 2—-

Un petit progrès à partager : J’ai télécharger une vidéo de test garantie comme mp4 encodée en h264, apparemment le codec le plus largement accepté par les navigateurs. J’ai mis cette vidéo à la place de ma propre vidéo de test : Ca fonctionne. La vidéo s’affiche correctement. J’en déduit que ma vidéo de test originale n’avait pas le bon codec (je n’arrive pas à accéder à cette information, peu importe la méthode. :() Qu’est-ce que ça peut bien vouloir dire pour on objet de classe MediaStream, qui est le flux de ma caméra ?

+0 -0

Alors je ne comprends pas trop, dans la mesure où si moi j’enlève les deux lignes dont je parle, ça fonctionne, sous Edge comme sous Firefox. Dans les deux cas, j’ai testé en en navigation "normale" et en privée.

A savoir que le temps que la page soit chargée, il faut normalement valider l’utilisation de la caméra, peut-être que dans certains cas, l’autorisation est enregistrée, d’où ta volonté de t’assurer que la page soit complètement prête. Si vraiment tu veux t’assurer que le script soit lancé après que l’entier du DOM ait été chargé, il te faudrait englober les lignes 25 à 40 plutôt que juste les 34 et 35.

Si par contre on en est à tenter de voir le type de flux généré par la caméra que tu utilises, ça va être plus compliqué que je le pensais.
Tu utilises une caméra intégrée ou externe ?

Edit

Tu n’aurais pas un outil logiciel qui bloque l’accès à la caméra, en plus des paramètres du navigateur/de l’OS ?

+0 -0

Hello ! Je viens de faire la modification au sujet du DOMContentLoaded sans résultats. :( Je suis sur une caméra intégrée (laptop) qui fonctionne bien d’après ce site Bon, il est l’heure de péter un câble… :’) J’ai fait F12 sur la page que je viens de linker… Screenshot_5.png Je viens de modifier mon htlm pour matcher exactement à cette ligne. Ca. fonctionne. Ca cesse de fonctionner uniquement quand je retire le mot clé autoplay, pourtant il était là hier ! c’est à n’y rien comprendre ! X( Depuis quand les problèmes se résolvent tout seuls après une nuit de sommeil ?! :colère: Non je viens de relire, je suis mauvaise langue : autre chose à changer. addEventListener n’est plus sur navigator mais sur window. En essayant de permuter les deux, ça ne fonctionne effectivement plus. Alors par contre je ne sais pas la différence entre les 2. :(

Et non j’ai aucun logiciel qui bloque l’accès à la caméra… Ou alors je ne le sais pas pour celui où je suis ? Mais en tout cas sur Windows, c’est une nouvelle installation, donc je suis sûr qu’il n’y a rien du tout !

Bon voici un code complet/commenté si quelqu’un d’autre passe par là :

<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=1024 initial-scale=1">

        <!--JS-->
        <script src="script.js"></script>
    </head>

    <body>
        <main>
            <p>Lorem Ipsum</p>
            <video id="retourUtilisateur" autoplay></video>
        </main>
    </body>
</html>

//Définition de la vidéo voulue
const contraintes = {
    video: {
    width: {
        min: 1280,
    },
    height: {
        min: 720,
    },
    }
};
//On attend surtout que la balise <video> soit chargée
window.addEventListener('DOMContentLoaded', cameraUse)

function cameraUse()
{
    if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) { // Vérification des fonctions logicielles
        console.log("OK getUserMedia") // Retour console
        
        navigator.mediaDevices.getUserMedia(contraintes) // Demande d'Accès à la caméra
        .then(function(stream){ // On attend que la promesse soit résolue
            console.log("Caméra connectée"); // Retour console
            // Envoi du stream sur la balise vidéo
            video = document.getElementById("retourUtilisateur");
            video.srcObject = stream;
        })
        .catch (function(error) { // En cas d'erreur à la demande d'accès à la caméra
        console.error("Impossible d'accéder à la caméra : %o", error);
        return;
        })
    }else(console.log("!OK getUserMedia : Mettez le navigateur à jour")) // Retour console si fonctions indisponibles
}

Post Mortem : pour répondre à la question sur le codec… l’API webRPC va envoyer un stream avec le codec VP8, qui est largement supporté par tous les navigateurs récents.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte