Ankündigung

Einklappen
Keine Ankündigung bisher.

Code einscannen über Kamera

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Code einscannen über Kamera

    Hallöchen,
    gleich zu Beginn muss ich zugeben, ich bin nicht der absolut fortgeschrittene PHP/JavaScript oder wie auch immer Schreiber. Doch ich versuche seit Tagen folgendes umzusetzen:

    Die Seite ist optimiert nur für das Handyformat!

    Mit Klick auf einen Button in dem Formular soll sich die Kamera öffnen und einen QR / EAN Code einlesen. Dieser soll dann zurück in das Formular transportiert werden.

    Als wertvollsten Hinweis habe ich https://web.dev/getusermedia-intro/ versucht. Leider erscheint nur folgendes:
    bild.png

    Ich kann zwar dann mit "Datei auswählen" die Kamera starten, ein Bild aufnehmen und es wird auch angegeben:

    bild2.png
    aber einen Zugriff erhalte ich nicht. Auch wird der darin enthaltene Code nicht erkannt.

    Weiterhin testete ich https://www.webondevices.com/javascr...rcode-scanner/

    Leider erhalte ich eine weiße Seite und nix weiter.

    Wenn es jemanden geben sollte, der erfolgreich das umgesetzt hat, dann bitte gebt mir Bescheid. Ich bin nach nun über einer Woche probieren für jeden erfolgreichen Hinweis dankbar.

    Gruß vom Markus
    Angehängte Dateien
    Stichworte: -
  • #2
    Moin,
    1. Keine der beiden Lösungen basiert auf PHP und Fortgeschritten ist das ebenfalls nicht, daher => verschoben in Javascript & Co.
    2. Wenn offensichtlich funktionierende Quellen bei Dir nicht funktionieren, macht es Sinn zu zeigen, wie Du es umgesetzt hast. Woher sollen wir sonst erkennen, wo der Fehler liegen könnte?!
    Zeige bitte Deine Versuche und beschreibe, was Du an Fehler-Analyse durchgeführt hast.
    Competence-Center -> Enjoy the Informatrix
    PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

    Kommentar

    • #3
      Zitat von Arne Drews Beitrag anzeigen
      Keine der beiden Lösungen basiert auf PHP
      Habe ich ja auch nicht behauptet, die Seite, über die die Funktion aufgerufen wird, ist aber eine PHP-Seite.

      Zitat von Arne Drews Beitrag anzeigen
      ...und Fortgeschritten ist das ebenfalls nicht...
      Deshalb ja auch mein Zitat: "...ich bin nicht der absolut fortgeschrittene PHP/JavaScript oder wie auch immer Schreiber.".

      Zitat von Arne Drews Beitrag anzeigen
      Zeige bitte Deine Versuche und beschreibe, was Du an Fehler-Analyse durchgeführt hast.

      So dann,
      den Code von https://web.dev/getusermedia-intro/ eingefügt sieht dann so aus:
      <!DOCTYPE html>
      <html>
      <head>
      <script type="text/javascript">
      function hasGetUserMedia() {
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia || navigator.msGetUserMedia);
      }

      if (hasGetUserMedia()) {
      // Good to go!
      } else {
      alert('getUserMedia() is not supported in your browser');
      }
      </script>
      <video autoplay></video>
      <script type="text/javascript">
      var errorCallback = function(e) {
      console.log('Reeeejected!', e);
      };

      // Not showing vendor prefixes.
      navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);

      // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
      // See crbug.com/110938.
      video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
      };
      }, errorCallback);


      navigator.getUserMedia = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;

      var video = document.querySelector('video');

      if (navigator.getUserMedia) {
      navigator.getUserMedia({audio: true, video: true}, function(stream) {
      video.src = window.URL.createObjectURL(stream);
      }, errorCallback);
      } else {
      video.src = 'somevideo.webm'; // fallback.
      }


      var hdConstraints = {
      video: {
      mandatory: {
      minWidth: 1280,
      minHeight: 720
      }
      }
      };

      navigator.getUserMedia(hdConstraints, successCallback, errorCallback);

      var vgaConstraints = {
      video: {
      mandatory: {
      maxWidth: 640,
      maxHeight: 360
      }
      }
      };

      navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);


      MediaStreamTrack.getSources(function(sourceInfos) {
      var audioSource = null;
      var videoSource = null;

      for (var i = 0; i != sourceInfos.length; ++i) {
      var sourceInfo = sourceInfos[i];
      if (sourceInfo.kind === 'audio') {
      console.log(sourceInfo.id, sourceInfo.label || 'microphone');

      audioSource = sourceInfo.id;
      } else if (sourceInfo.kind === 'video') {
      console.log(sourceInfo.id, sourceInfo.label || 'camera');

      videoSource = sourceInfo.id;
      } else {
      console.log('Some other kind of source: ', sourceInfo);
      }
      }

      sourceSelected(audioSource, videoSource);
      });

      function sourceSelected(audioSource, videoSource) {
      var constraints = {
      audio: {
      optional: [{sourceId: audioSource}]
      },
      video: {
      optional: [{sourceId: videoSource}]
      }
      };

      navigator.getUserMedia(constraints, successCallback, errorCallback);
      }

      // Not showing vendor prefixes or code that works cross-browser:

      function fallback(e) {
      video.src = 'fallbackvideo.webm';
      }

      function success(stream) {
      video.src = window.URL.createObjectURL(stream);
      }

      if (!navigator.getUserMedia) {
      fallback();
      } else {
      navigator.getUserMedia({video: true}, success, fallback);
      }
      </script>
      <input type="file" accept="image/*;capture=camera">
      </body>
      </html>
      Ergebnis: Die Seite zeigt an:














      -------------------------------------------------------------------------------------------------------------------------

      Dann die Dateien von https://www.webondevices.com/javascr...rcode-scanner/ in einen separaten Pfad hochgeladen und als Ergebnis erhalte ich eine fast leere Seite mit einem Bild namens Download.png in einer Größe von 300 x 150 Pixel, mehr passiert da leider auch nicht.

      Dies also sind meine Versuche und deren Ergebisse.

      Gruß Markus

      Kommentar

      • #4
        Ich kann die Bilder leider nicht sehen, aber Kamera, Position etc. kann in der Regel nur über Https zugegriffen werden. Entsprechende Meldungen solltest du auch in der Entwickler Konsole deines Browser sehen.

        Kommentar

        • #5
          Zitat von Zeichen32 Beitrag anzeigen
          Ich kann die Bilder leider nicht sehen, aber Kamera, Position etc. kann in der Regel nur über Https zugegriffen werden. Entsprechende Meldungen solltest du auch in der Entwickler Konsole deines Browser sehen.
          Das ist ja auch nicht das Problem, der Aufruf erfolgt nur über eine responsive Seite.
          Trotzdem Danke für Deine Info. Bei so vielen Hilfestellungen hier hätte ich sie beinahe übersehen.

          Kommentar

          • #6
            https://nimiq.github.io/qr-scanner/demo/

            Kommentar

            • #7
              Zitat von kaminbausatz Beitrag anzeigen
              https://nimiq.github.io/qr-scanner/demo/
              Danke für den Tipp, doch leider werden die gescannten Daten weder irgend wo gespeichert, noch kann man sie auslesen.

              Wichtig für mich wäre aber das einscannen eines EAN-Codes, die Weiterleitung an eine Artikeldatei und dann das dortige Auslesen der angezeigten Daten. Das wäre echt der Hammer.

              Kommentar

              • #8
                Zitat von DerBerliner Beitrag anzeigen
                Danke für den Tipp, doch leider werden die gescannten Daten weder irgend wo gespeichert, noch kann man sie auslesen.
                Doch, kann man schon. Man muss halt die Doku lesen:

                https://nimiq.github.io/qr-scanner/

                Zitat von DerBerliner Beitrag anzeigen
                Wichtig für mich wäre aber das einscannen eines EAN-Codes, die Weiterleitung an eine Artikeldatei und dann das dortige Auslesen der angezeigten Daten. Das wäre echt der Hammer.
                Ist das jetzt ein Jobangebot oder willst du das selber machen? Irgendwie ist mir das nicht klar. Die Formulierung klingt so, als würdest du erwarten, dass das jemand für dich macht.

                Kommentar

                Vorherige Weiter
                Lädt...
                X