Mit zxing-Barcode-Scanner innerhalb einer web-Seite

Gibt es ein funktionierendes Beispiel, wie Sie mit der zxing Barcode Scanner von einer web-Seite?

Bezogen zu dieser Dokumentation:
https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages

sollte nicht die folgenden test-code arbeiten?

JS:

function Test1()
{
	$.ajax(
	{
        url: "zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
        success:function()
		{
            alert("success");
        },
        error:function()
		{
            alert("error");
        }
    });
}
	
function Test2()
{
	$.ajax(
	{
        url: "http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
        success:function()
		{
            alert("success");
        },
        error:function()
		{
            alert("error");
        }
    });
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="button1" onClick="Test1();">Test 1</button>
<br>
<br>
<button id="button2" onClick="Test2();">Test 2</button>

Ich bekomme ständig "Fehler" auf meinem Android 4.4.2 Samsung Galaxy TabPro und Samsung Galaxy S4.
Ich habe versucht den stock-browser, Chrome, Firefox und Dolphin Browser.

Sogar http://zxing.appspot.com/scan nicht funktioniert, wie Sie es immer die mich auffordert, installieren Sie die (bereits installiert) app.

Jede Hilfe wäre sehr geschätzt werden.

InformationsquelleAutor CrazyTea | 2014-10-14
  1. 20

    ZXing ist nicht speziell für die Arbeit mit AJAX. Stattdessen arbeitet Sie mit der Eröffnung eines geparsten URL im Standard-browser. Das Verhalten der browser ist vor allem, was ist verantwortlich für die user experience von diesem Punkt an.

    Gibt es mehrere Methoden, gepostet zu diesem; leider gibt es keine Methode, die funktioniert für alle browser.

    Einigen Browsern, wenn Sie öffnen Sie Sie von der Befehlszeile aus prüfen, um zu sehen, ob die URL bereits geöffnet ist, in einen anderen tab, und wenn ja, wird dieser tab statt ein neues. Dies führt zu einer "onhashchange" - Ereignis aus, wenn die zxing-link enthält "zxing://scan/?ret=mytab.html#{CODE}".

    Anderen Browsern nicht, führen Sie diese überprüfung, so dass wir wind-up mit mehreren tabs, alle mit der gleichen URL (mit Ausnahme der hash), und keiner von Ihnen die Steigerung der "hashchanged" Ereignis. Für diese Browser müssen wir wieder die Seite aus dem cache, wenn möglich (um zu verhindern, dass der Netzwerkverkehr auf jedem scan), und ändern Sie die localStorage-Wert auf das, was der hash ist. Wenn der browser in der Lage ist das hören für den "Speicher" - event, können wir verwenden, um trigger-code.

    Den code unten funktioniert mit Chrome, das systeminterne Android-browser und Firefox. Es kann mit anderen zusammenarbeiten, aber ich habe nicht versucht. Ein Firefox-Nachteil, obwohl, ist, dass das scanner-Fenster nur schließen, wenn die about:config-Einstellung "dom.allow_scripts_to_close_windows" ist auf "true" gesetzt.

    ** Dies wurde geändert, um besser arbeiten mit mehreren Seiten, die es ermöglichen, durchsucht, und jetzt können Sie haben unterschiedliche hashes ohne Eingriff in den code. **

    NEUE VERSION 12/19/16

    <!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/javascript">

    if(window.location.hash.substr(1,2) == "zx"){
        var bc = window.location.hash.substr(3);
        localStorage["barcode"] = decodeURI(window.location.hash.substr(3))
        window.close();
        self.close();
        window.location.href = "about:blank";//In case self.close isn't allowed
    }
</script>
<SCRIPT type="text/javascript" >
    var changingHash = false;
    function onbarcode(event){
        switch(event.type){
            case "hashchange":{
                if(changingHash == true){
                    return;
                }
                var hash = window.location.hash;
                if(hash.substr(0,3) == "#zx"){
                    hash = window.location.hash.substr(3);
                    changingHash = true;
                    window.location.hash = event.oldURL.split("\#")[1] || ""
                    changingHash = false;
                    processBarcode(hash);
                }

                break;
            }
            case "storage":{
                window.focus();
                if(event.key == "barcode"){
                    window.removeEventListener("storage", onbarcode, false);
                    processBarcode(event.newValue);
                }
                break;
            }
            default:{
                console.log(event)
                break;
            }
        }
    }
    window.addEventListener("hashchange", onbarcode, false);

    function getScan(){
        var href = window.location.href;
        var ptr = href.lastIndexOf("#");
        if(ptr>0){
            href = href.substr(0,ptr);
        }
        window.addEventListener("storage", onbarcode, false);
        setTimeout('window.removeEventListener("storage", onbarcode, false)', 15000);
        localStorage.removeItem("barcode");
        //window.open  (href + "#zx" + new Date().toString());

        if(navigator.userAgent.match(/Firefox/i)){
            //Used for Firefox. If Chrome uses this, it raises the "hashchanged" event only.
            window.location.href =  ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}"));
        }else{
            //Used for Chrome. If Firefox uses this, it leaves the scan window open.
            window.open   ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}"));
        }
    }

    function processBarcode(bc){
        document.getElementById("scans").innerHTML += "<div>" + bc + "</div>";
        //put your code in place of the line above.
    }

</SCRIPT>
<META name="viewport" content="width=device-width, initial-scale=1" />
</HEAD>
<BODY>
<INPUT id=barcode type=text >
<INPUT style="width:100px;height:100px" type=button value="Scan" onclick="getScan();">
<div id="scans"></div>
</BODY>
</HTML>

    Können Sie eine JS-include-Datei für den oberen block der Skript, und fügen Sie es auf allen Seiten, wo Sie brauchen, scan-Fähigkeiten.

    Dann in den Körper Ihres Dokuments, können Sie ein Ereignis irgendwo anrufen getZxing(), aufgerufen processBarcode(barcode), die Sie schreiben Sie in Ihre Seite. Im Lieferumfang enthalten ist ein einfaches Beispiel für Willen.

    Seite Hinweis: Das erste mal, wenn Sie laufen zxing von Ihrer Seite, werden Sie aufgefordert, wählen Sie eine Standard-app. Stellen Sie sicher, wählte die gleiche browser, dass Sie die Seite aus. Darüber hinaus, wenn Sie zuvor gewählt haben, eine Standard-broswer für zxing und ändern wollen, welchen browser Sie verwenden für zxing, müssen Sie die Standardeinstellungen löschen von Ihrem anderen Browsern.

    Vielen Dank an @sean owen für seine harte Arbeit und fantastisches Produkt.

    UPDATE 12/19/16

    Ok, ich habe eine etwas robustere version, die gut funktioniert, mit Firefox und Chrome. Ein paar Dinge, die ich entdeckt:

    Chrome verwenden Sie die Storage Ereignis aus, wenn der scanner nicht öffnen Sie Chrome automatisch und es werden die Hash Ereignis nach wird es Standard.

    Firefox wird nie die Hash Ereignis, sondern öffnet ein extra Fenster, es sei denn, Sie rufen den scanner mit window.location.href (Danke, @Roland)

    Gibt es ein paar andere Abweichungen, aber keinen deal BREAKER.

    Verließ ich die "zx" - Präfix in der hash, so dass der code könnte die Abgrenzung zwischen scanner hashes und regelmäßige hashes. Wenn Sie lassen Sie es in dort, Sie werden nicht feststellen, dass es in der processBarcode Funktion, und nicht-zx hashes funktionieren wie erwartet.

    • Können Sie uns ein Beispiel arbeiten? Das wäre toll
    • Ich SCHLIEßLICH ein funktionierendes Beispiel. Sorry für die 10-wöchige Verzögerung! Ich habe auch optimiert, den code ein wenig, um zu verhindern, dass mehrere Zuhörer.
    • Die Verwendung von storage-event ist eine Super Idee, danke für das teilen dieser trick ! 🙂
    • Dies ist eine unglaubliche post. Eine riesige Antwort für begrenzte Daten über mobile.
    • Das Bearbeiten scheint nicht zu funktionieren für mich. Ich bin in Sie suchen weiter. Danke alfadog
    • Hi @dave, und vielen Dank für das heads-up. Ich werde Bearbeiten und erneut einzureichen.
    • Auf meinem Samsung Note 3 die Kamera wird unscharf-scan und barcode-Leser gibt Fehler "sorry, die android-Kamera ist ein problem aufgetreten. möglicherweise müssen Sie das Gerät neu zu starten." funktioniert gut, wenn die app verwendet wird, direkt
    • Der Autor @sean owen wissen möchte über diese, aber für mich klingt es wie ein problem mit dem browser. Haben Sie versucht, ein anderes? Nicht vergessen zum zurücksetzen der Standard-Aktionen, wenn Sie tun...
    • Vielen Dank für diesen tollen code. Aber ich mag Ihre älteren Lösung besser: groups.google.com/d/msg/zxing/dQ4_wKjut1M/vOaguJIss3wJ . In der aktuellen Lösung, die ich hatte zu entfernen die zx-Präfix verwenden: processBarcode(unescape(hash).substr(2)); . Auch die browser-Schaltfläche "zurück" funktioniert nicht mehr. Nach dem Scannen eines Codes, jeder Klick auf den zurück-button fügt eine weitere Kopie der selben bar-code.
    • Vielen Dank für deinen input, @Roland... ich werde neu bewerten diese version mit Ihren Gedanken in den Sinn.
    • Das ist Genial. Vielen Dank

    InformationsquelleAutor alfadog67
Schreibe einen Kommentar