Discussion :

[emulien]

bonjour

j'ai trouvé une application ou plugin : webcodecamjs
ça marche !!!
le code barre s'affiche (le format du code lu et le code) : <p id="scanned-QR"></p>.
je suis dérouté vu mes connaissances en javascript.
ce code je veux le récupérer sans le format du code certes mais je n'arrive pas à le récupérer pour le soumettre dans un formulaire
je lis le code barre avec un smartphone et pas avec un scanner usb
j'ai parcouru le forum, stackoverflow (il y a bien une solution mais je ne la comprends pas)

So this is the solution I came up with.
C'est donc la solution que j'ai proposée.

Here's my paragraph and input function
Voici mon paragraphe et la fonction d'entrée

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p id="scanned-QR" onchange="update">SCAN.BZ</p>
<input id="code_id_value" type="text" name="" value="">

Here's my function. WITH a interval for every millisecond or faster "I think it's every millisecond".
Voici ma fonction. Avec un intervalle pour chaque milliseconde ou plus rapide 'je pense que c'est chaque milliseconde'.
It runs smoothly and doesn't lag. and the result is practically immediate.
Il fonctionne bien et ne traîne pas. et le résultat est pratiquement immédiat.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript">
 setInterval(update,1);
   function update() {
      var code_id_value = document.getElementById("scanned-QR").innerHTML;
      document.getElementById("code_id_value").value = code_id_value;
    }
    update();
</script>

je poursuis ma recherche un œil sur le forum !

merci d'avoir pris le temps de me lire

[Beginner.]

Salut,

Je ne peux pas tester alors pourrais-tu nous donner un exemple de ce qui est afficher dans le paragraphe (un exemple de code) ? Et ça pourrait aider de savoir comment cela se passe : Il filme avec la caméra et analyse en direct la vidéo et quand il a réussi à décoder la vidéo il affiche le résultat dans le paragraphe, c'est ça ?

Sinon le code fourni dans l'autre forum c'est juste pour lire toutes les millisecondes le contenu du paragraphe <p id="scanned-QR"></p> et à chaque fois ajouter ce contenu à une input de type "texte"...

Tu n'es pas obligé de faire cela toutes les millisecondes et tu n'es pas obligé de mettre le contenu dans une input, tu peux le mettre ailleurs...

Et attention une fois lancé ce code ne s'arrête pas, il faut ajouter quelque chose pour qu'il s’arrête...

---> Dis-nous exactement ce que tu voudrais :

- Quand récupérer le contenu du paragraphe (lors d'un clique ? ou autre ? Où dés que le paragraphe est rempli ?)
- Faut-il traiter ce contenu ?
- Où mettre le résultat...

[emulien]

Bonsoir Beginner !


Cette appllication marche fort bien, en effet le code barre ou le qr code pointé avec la caméra du smartphone s'affiche en effet dans le paragraphe ! Elle reconnait une grande variété de code à barre, plus qu'il m'en faut.
Ce que je veux c'est récupérer ce code pour l'envoyer vers l'application idoine et récupérer ce code c'est justement ce que je n'arrive pas à faire.
Je ne comprends pas pourquoi passer par un input alors que la valeur est déjà là dans le paragraphe mais il a le mérite d'avoir trouver une solution.
L'auteur de cette solution pensait récupérer cette donnée ainsi pour l'utiliser dans un formulaire, je crois bien.

Et attention une fois lancé ce code ne s'arrête pas, il faut ajouter quelque chose pour qu'il s’arrête.

Tu veux dire qu'il boucle, qu'il permet de lire des codes indéfiniment ?
Dans la suite de mon projet, quand j'aurais le code je le comparerais à un série de codes enregistrés dans un fichier sur un serveur et s'il n'appartient pas à la liste et bien je signifierais un message d'erreur !

Ce que je voudrais ? Récupérer le contenu du paragraphe dés qu'il est rempli (sans click) !!

Beginner, merci pour tes lumières


Cordialement

[Beginner.]

Tu n'as pas répondu à plusieurs de mes questions... C'est pour comprendre et mieux aider...

- Sinon récupérer le contenu du paragraphe est simple, c'est cette ligne de code qui fait ça :

var code_id_value = document.getElementById("scanned-QR").innerHTML;...

Après son exécution la variable "code_id_value" contient le contenu du paragraphe : <p id="scanned-QR"></p>.

- Ensuite il a utilisé un timer pour lire régulièrement le contenu de ce paragraphe car je suppose qu'il ne savait pas à quel moment il serait rempli... Il est possible cependant que l'auteur de la librairie est prévu quelque chose pour prévenir...

Par contre comme déjà dit tu n'es pas obligé de mettre le contenu dans une input, ce contenu est dans la variable "code_id_value" comme on l'a vu ci-dessus... Tu peux donc l'utiliser, la traiter, l'envoyer quelque part...

Tu veux dire qu'il boucle, qu'il permet de lire des codes indéfiniment ?

Non il n'utilise pas une boucle mais un timer pour lire toutes les millisecondes le contenu du paragraphe et à aucun moment ce timer est stoppé...

Il est possible de modifier le code pour que ce timer soit stoppé dés que le paragraphe est rempli...

Ce que je veux c'est récupérer ce code pour l'envoyer vers l'application idoine et récupérer ce code...

Je ne connais pas "idoine" mais comment as-tu fait pour tester le code ? As-tu fait une page teste ou tu as utilisé la démo du site ?

Parce que si tu veux exploiter ce code il faudra que tu fasses ta propre page test pour y rajouter ce dont tu as besoin...
As-tu pu par exemple tester le code que tu as posté de l'autre forum ?

Perso je n'ai pas réussi à le faire fonctionner même avec une image... C'est pourquoi je t'ai posé certaines questions comme : "...pourrais-tu nous donner un exemple de ce qui est afficher dans le paragraphe (un exemple de code) ? Et ça pourrait aider de savoir comment cela se passe : Il filme avec la caméra et analyse en direct la vidéo et quand il a réussi à décoder la vidéo il affiche le résultat dans le paragraphe, c'est ça ?"

Au début tu cliques sur le bouton "play" puis il filme et analyse en direct la vidéo et quand (on ne sait pas au bon de combien de temps ? D'où l'usage d'un timer...) il a réussi à décoder la vidéo il affiche le résultat dans le paragraphe, c'est ça ?

[emulien]

Bonjour Beginner,

C'est vrai que je n'ai pas répondu à tes questions point à point, car en te lisant je me dis que tu as tout compris du fonctionnement de ce plugin.
Tu peux avoir une idée du fonctionnement de cette appli sur : https://www.datizme.fr
C'est là que j'ai mis en oeuvre cette appli.
Je dois quitter mais je te répondrai plus longuement dés que je serais chez moi.

Merci pour ton aide

[emulien]

Bonsoir,

J'ai essayé ce que tu me proposes, j'ai placé les lignes de code dans le fichier index.html : j'ai défini la variable avant le paragraphe et j'ai utilisé un alert pour afficher la valeur de la variable. J'ai obtenu le message d'erreur suivant : undefined
C'est comme si la variable était calculée alors qu'aucun code barre n'est lu !!
Je continue à chercher.
La solution de l'autre forum fonctionne en effet. Le timer c'est un participant au forum qui l'a utilisé ce n'est pas le concepteur de l'appli !
Pourquoi est on obligé de lire le paragraphe toutes les millisecondes ? Je pensais que le onchange déclenchait la suite du programme c'est à dire ici le calcul de la variable
J'ai essayé ça (ça n'affiche pas hello qd je lis un code barre)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	<p id="scanned-QR" onchange="aze">eros</p>
 
	<script type="text/javascript">
                function aze {
                        alert ("hello");
       }
        </script>

Là je me débats ...



Cordialement

[Beginner.]

Salut,

Pourquoi est on obligé de lire le paragraphe toutes les millisecondes ? Je pensais que le onchange déclenchait la suite du programme c'est à dire ici le calcul de la variable

Ben comme déjà dit tu n'es pas obligé mais dans cette solution c'est nécessaire car la personne de l'autre forum ne savait pas à quel moment le paragraphe serait rempli donc il le lis régulièrement toutes les millisecondes.

Alors oui on pourrait se dire pourquoi ne pas utiliser l’évènement onchange mais cela ne fonctionne pas avec les paragraphes (ça fonctionne avec les input, textearea...) d'où la nécessitè de lire régulièrement toutes les millisecondes

J'ai essayé ça (ça n'affiche pas hello qd je lis un code barre)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    <p id="scanned-QR" onchange="aze">eros</p>
 
    <script type="text/javascript">
        function aze {
            alert ("hello");
       }
    </script>

La solution avec onchange ne fonctionne pas avec les paragraphes comme expliqué ci-dessus mais en plus il y a des erreurs dans ton code (il manque les parenthèses : "aze()").

La solution de l'autre forum fonctionne en effet. Le timer c'est un participant au forum qui l'a utilisé ce n'est pas le concepteur de l'appli !

Oui j'avais compris que cela ne vient pas de l'auteur de la librairie d'ailleurs comme déjà dit il est possible que l'auteur est prévu une solution pour cela et effectivement je pense que c'est le cas (je suis en train de regarder le code source...).

Sinon si ça fonctionne alors pourquoi tu ne l'utilises pas ?

[Doksuri]

Alors oui on pourrait se dire pourquoi ne pas utiliser l’évènement onchange mais cela ne fonctionne pas avec les paragraphes (ça fonctionne avec les input, textearea...) d'où la nécessitè de lire régulièrement toutes les millisecondes


La solution avec onchange ne fonctionne pas avec les paragraphes comme expliqué ci-dessus mais en plus il y a des erreurs dans ton code (il manque les parenthèses : "aze()").

et pourquoi pas MutationObserver ? developer.mozilla.org/en-US/docs/Web/API/MutationObserver (qui remplace le DOMSubtreeModified)

[Beginner.]

et pourquoi pas MutationObserver ? developer.mozilla.org/en-US/docs/Web/API/MutationObserver (qui remplace le DOMSubtreeModified)

+1... Ah ça c'est intéressant pour un autre truc me concernant (être averti dés qu'une scrollbar apparait l’événement scroll ne le fait pas apparemment...). Aprés je me demande quand même si ce n'est pas gourmand en ressources, mais peut-être moins qu'un timer ?

Bon l'idée du timer vient du code posté par emulien (il provient d'un autre forum), c'est un système D...

Hélas je ne peux pas tester le code, même avec une image cela ne fonctionne pas chez moi...

Mais en regardant le code source je vois que ce n'est pas une bonne manière de faire car (avec le timer ou autre) on ne peut pas savoir quand il y a un code dans le paragraphe...
Alors oui on peut savoir quand le paragraphe est rempli mais j'ai vu dans le code source de la démo que ce paragraphe pouvait être rempli par autre chose qu'un code, par exemple au début par "Scanning ..." comme on peut le voir dans ce bout de code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
play.addEventListener("click", function() {
        if (!decoder.isInitialized()) {
            scannedQR[txt] = "Scanning ...";
        } else {
            scannedQR[txt] = "Scanning ...";
            decoder.play();
        }
    }, false);

Bon c'est vrai qu'on pourrait s'en sortir si il n'y a que ça (on peut différencier un code de la string "Scanning ..."...

Mais en fait comme je le soupçonnais l'auteur semble fournir ce qu'il faut pour récupérer le résultat, être averti en cas d’erreur...

[emulien]

bonjour

Messieurs, merci pour votre soutien !
Je sais bien que je ne comprendrais pas comment fonctionne WEBCODECAMJS (et c'est bien dommage !) avant longtemps mais je ne pouvais pas utiliser la solution proposée dans l'autre forum sans rien y comprendre. Même si avoir le code barre isolé dans une zone de texte faisait mon bonheur !
Grâce à vous les choses se décantent.
De forum en forum, je pensais utiliser Mutation Observer. Je vais le mettre en oeuvre et je vous tiens au courant.
Beginner l'auteur de l'appli propose decoderpopup comme une extension de webcodecamjs plus simple en apparence mais que je ne pouvais utiliser en l'état choix du code lu a travers differentes text-box
Cordialement

[Beginner.]

La solution de l'autre forum c'est le système D, elle permet d'afficher le code mais pas de faire un véritable traitement...

Et surtout l'auteur semble fournir ce qu'il faut pour récupérer le résultat, être averti en cas d’erreur...

Il y a justement cette fonction pour récupérer le résultat :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
resultFunction: function(result) {
            /*
                result.format: code format,
                result.code: decoded string,
                result.imgData: decoded image data
            */
            alert(result.code);
        }

[Beginner.]

Par exemple sur ton site :

Tu peux avoir une idée du fonctionnement de cette appli sur : https://www.datizme.fr

Tu peux ajouter ton alert :

Dans le fichier main.js à la ligne 44 tu as la fameuse fonction "resultFunction" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    var args = {
        autoBrightnessValue: 100,
        resultFunction: function(res) {
            [].forEach.call(scannerLaser, function(el) {
                fadeOut(el, 0.5);
                setTimeout(function() {
                    fadeIn(el, 0.5);
                }, 300);
            });
            scannedImg.src = res.imgData;
            scannedQR[txt] = res.format + ": " + res.code;
        },

Tu peux ajouter après scannedQR[txt] = res.format + ": " + res.code; ton alert : alert("Voici le résultat : " + res.format + ": " + res.code);...

Ce n'est qu'un exemple...

PS : Perso je ne peux pas tester, je réponds d’après ma compréhension du code...

[Beginner.]

ce code je veux le récupérer sans le format du code

Ah oui ben justement, si tu veux juste le code c'est dans la variable "res.code"... Si par exemple tu veux l'afficher avec une alert fait ce que j'ai expliqué dans mon message précédent avec cette fois cette ligne : alert("Voici le code : " + res.code);...

C'est juste un exemple tu peux faire ce que tu veux de cette variable...

[emulien]

Bonjour Beginner,

Résultat des courses ?
En effet Beginner, grâce à tes explications, j'ai pu afficher le code dans un alert avec et sans le format du code !

C'est juste un exemple tu peux faire ce que tu veux de cette variable...

Par contre, j'ai essayé de mettre cette donnée dans une zone texte dans le fichier index.html et j'y suis pas arrivé ! (retour à la case départ!!)

Ma connaissance basique des formulaires repose sur une donnée qui est dans une zone texte et que j'envoie au serveur ou je traiterais cette donnée.
Il y à certainement des façons plus modernes de procéder mais celà ferait beaucoup de chose à découvrir pour moi !
C'est pour celà qu'isoler le code barre dans une zone texte vire à l'obsession ;o)

C'est juste un exemple tu peux faire ce que tu veux de cette variable...

Il est vrai que j'ai le code barre grâce à la fonction resultFonction.
Je peux donc écrire la suite de mon traitement dans le fichier main.js ???
Est-ce une bonne façon de procéder ?

Cordialement

[Beginner.]

Par contre, j'ai essayé de mettre cette donnée dans une zone texte dans le fichier index.html et j'y suis pas arrivé ! (retour à la case départ!!)

Ben je vois ton alert mais pas cette zone texte dont tu parles... Donne-nous le code html que tu as ajouté...

Bon supposons que tu veux afficher ce code dans une input de type "text" et ayant pour id "IDzonetext" : <input type="text" id="IDzonetext">...

Dans le index.html tu peux l’ajouter à la fin juste avant les script, à la ligne 311 tu as :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="js/filereader.js"></script>
        <!-- Using jquery version: -->
        <!--
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/qrcodelib.js"></script>
            <script type="text/javascript" src="js/webcodecamjquery.js"></script>
            <script type="text/javascript" src="js/mainjquery.js"></script>
        -->
        <script type="text/javascript" src="js/qrcodelib.js"></script>
        <script type="text/javascript" src="js/webcodecamjs.js"></script>
        <script type="text/javascript" src="js/main.js"></script>

Ajoute la input juste avant la ligne 311...

Dans le fichier main.js à la ligne 46 tu as :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
resultFunction: function(res) {
            [].forEach.call(scannerLaser, function(el) {
                fadeOut(el, 0.5);
                setTimeout(function() {
                    fadeIn(el, 0.5);
                }, 300);
            });
            scannedImg.src = res.imgData;
            scannedQR[txt] = res.code;
            alert("z" + res.code);
                },

Ben juste avant ton alert tu peux ajouter : document.getElementById("IDzonetext").value = res.code ; pour afficher le code dans la input...

Il est vrai que j'ai le code barre grâce à la fonction resultFonction.
Je peux donc écrire la suite de mon traitement dans le fichier main.js ???
Est-ce une bonne façon de procéder ?

Si tu as du code JS à ajouter pour traiter le code affiché dans la input j'ajouterais plutôt un script juste après tous les autres script de la page index.html...

[emulien]

Bonjour

C'est géant, ça marche ! Un grand merci beginner !

document.getElementById("IDzonetext").value = res.code

Ceci je l'avais lu et essayé parmi d'autres solutions.
Dans le fichier HTLM, j'avais placé une zone de texte en dehors d'une faute de frappe éventuelle, ce que je vois comme différences :
d'une part, j'avais placé ma zone de texte juste après : <p id="scanned-QR"></p>
d'autre part, j'avais placé dans le input un value =""
S'il me reste un peu dénergie, j'irais vérifier tout ça !
C'étaient mes premiers pas en javascript mais le traitement je vais le poursuivre en php que je maitrise aussi bien ;o)
Un grand merci Beginner et je n'oublie pas Doksuri

Cordialement