Instascan: iOS Safari 11.4- Problem beim Öffnen der Rückkamera

Hast du Zugriff auf das Apple-Gerät? Weißt du ob die Demo funktioniert?

Es sieht so aus, als ob es ein Problem mit iOS Safari gab, aber ich habe gelesen, dass die Leute dieses Problem durch das Hinzufügen von Meta-Tags lösen konnten. Stöbere einfach in diesem Forum herum und du wirst sehen. Ich arbeite an etwas ähnlichem, also bin ich interessiert. Was mich zurückhält ist, dass ich kein Gerät zur Hand habe.

Ich habe die Demo auf einem iPhone ausprobiert, es hat nicht funktioniert.

Ja, ich arbeite daran, ich kann das nicht zum Laufen bringen. Ich versuche, zurückzugehen und Threads erneut zu lesen. Ich habe die Frontkamera zum Laufen gebracht, indem ich den neuesten Web-RTC-Adapter hinzugefügt und das Attribut _playsinline_ zum Video-Tag hinzugefügt habe. Es kann die Kameras lesen, tut aber nichts, wenn auf die Rückkamera gewechselt wird.

Ich hatte das Attribut im Video-Tag hinzugefügt und auch das Meta-Tag erwähnt.

Ich hatte das Playsinline-Attribut im Video-Tag hinzugefügt und auch das Meta-Tag erwähnt.

Jemand hatte das tatsächlich in einem der Threads behoben. Ich probiere das gerade aus, muss aber warten, bis jemand mit einem iPhone zur Arbeit kommt.

Hey, ich habe das zum Laufen gebracht, aber es gibt immer noch das Problem, trotz der Auswahl von Kameras ist die Standardeinstellung immer die Rückfahrkamera. Wenn Sie also die Frontkamera auswählen müssen, sind Sie am Arsch (aber im Ernst, wer wird versuchen, mit der Frontkamera zu scannen).

Folgendes habe ich getan!

Ich habe das Meta-Tag hinzugefügt.
<meta name="apple-mobile-web-app-capable" content="yes">

Dieses Attribut wurde hinzugefügt:
<video id="scanner" class="video-back" playsinline></video>

Diese JS-Datei hinzugefügt:
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Und dann dies zur Veröffentlichung verpackt: https://github.com/JoseCDB/instascan/tree/ios-rear-camera. Ich bin mir nicht sicher, ob Sie Gulp mit node.js verwenden können, aber es ist einfach. Ich habe es in 15 Minuten verstanden! Ich verwende diese Personenversion von Instascan. Er kannte das Problem und konnte es beheben. Hoffe das hilft. Viel Glück.

Ich habe Meta-Tag, Video-Tag und adapter-latest.js verwendet.
Und ich verwende instscan.min.js und weiß nicht, wie ich ".js - scanner.js - camara.js" separat verwenden kann.

Ich habe Meta-Tag, Video-Tag und adapter-latest.js verwendet.
Und ich verwende instscan.min.js und weiß nicht, wie ich ".js - scanner.js - camara.js" separat verwenden kann.

Sie sollten node.js installiert haben. Es gibt eine Eingabeaufforderung, die all diese Dateien zusammenpackt, die endgültige Ausgabe wäre die minimierte JS-Datei des Instascanners.

Dies ist ein großartiges Produkt und es war wirklich nützlich, also vielen Dank, dass Sie es wunderbar gemacht haben. Hier ist das Problem mit diesem Instascan aus meiner Recherche:

• Die Klasse Camera gibt beim Aufrufen von getCameras eine Sammlung von Camera-Objekten zurück, die aus den MediaDeviceInfo- Objekten erstellt werden, die durch einen Aufruf von navigator.mediaDevices.enumerateDevices() gesammelt wurden. Dies sind KEINE MediaStream- Objekte, die den tatsächlichen Stream der Kamera enthalten, die beim Starten des Scanners verwendet wurde. Diese MediaDeviceInfo-Objekte enthalten die Eigenschaften _ id _ und _ name _ und nicht mehr. Sie werden verwendet, um ein Array von Kameraobjekten zu erstellen.

Wenn Sie _scanner.start(camera)_ aufrufen, übergeben Sie ein Camera- Objekt, das die Methode _camera.start()_ auf der Kamera aufruft.

• Die Methode _camera.start()_ ruft DANN _navigator.mediaDevices.getUserMedia(contraints)_ auf, die ein Arrary von MediaStream- Objekten basierend auf den in der Methode aufgelisteten gegebenen Einschränkungen
• _scanner.start()_ ruft _scanner._enableScan(camera)_ auf und gibt ihm das erste MediaStream-Objekt, das vom obigen Aufruf in camera zurückgegeben wurde. Es setzt die

                  **This Part Is the Disconnect and what is messing it all up!**

Das Einschränkungsproblem:

Das übergebene Camera-Objekt verwendet seine ID in den Constraints als _"obligatorisch"_ für die Suche der Geräte. Wenn es nicht gefunden wird, wird kein Video angezeigt. Auch andere "obligatorische" Einschränkungen werden festgelegt.

Verschiedene Geräte UNTERSTÜTZEN NICHT die verwendeten Einschränkungen!
Führen Sie diesen Link auf dem Gerät aus, das Sie verwenden möchten, und Sie erfahren, welche Einschränkungen es unterstützt:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Führen Sie diesen Link auf dem Gerät aus, das Sie verwenden möchten, und geben Sie eine Einschränkung ein. Es wird Ihnen sagen, ob es unterstützt wird:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Ipad/Iphone/IOS unterstützte Einschränkungen:

AspectRatio, FacingMode, _deviceId * _ , height, width, AspectRatio und andere.

_Wenn ich dies getestet habe, wird _deviceId als Einschränkung ignoriert._ Probieren Sie dies im obigen Link für Einschränkungen aus und Sie werden sehen, dass die deviceId = "" gesetzt wird. Wenn ich es in Javascript gepackt und angezeigt habe, hat das iPhone immer eine leere Geräte-ID zurückgegeben.

Um die Rückkamera des Iphones zu greifen, müssen Sie also den Gesichtsmodus und NICHT die Geräte-ID verwenden.

Von Android unterstützte Einschränkungen:

deviceId, _facingMode * _, Seitenverhältnis, Höhe, Breite und viele andere.

Ich habe dies auf einem Samsung-Tablet und einem Android-Handy getestet. Der Gesichtsmodus ist standardmäßig auf die Frontkamera des "Benutzers" eingestellt. Ich habe mit diesem Code experimentiert und festgestellt, dass der FacingMode für Android aus irgendeinem Grund noch nicht funktioniert. Im obigen Link funktioniert es aber. Ich werde diesen Teil weiter untersuchen und möglicherweise diesen Code so beheben, dass er ordnungsgemäß mitfacingMode und Android funktioniert.

* * ANTWORT AUF ANDROID-AUSGABE * * *
Der Gulp-Build dieses Projekts enthält die webrtc-Adapter-Version ^1.4.0, die den facialMode auf Android Chrome durcheinander bringt. Beim Durchsehen des Codes wurde tatsächlich der Gesichtsmodus gelöscht.

• Um dieses Projekt zu beheben - in _index.js_, entfernen Sie die Zeile 2 require('webrtc-adapter'); Folgen Sie dann den folgenden Build-Verfahren. Als ich auf einem Tablet und 4 verschiedenen Android-Handys in Chrome getestet habe, funktionierte alles wieder, um die Rückkamera zu greifen.

Um die Rückkamera auf dem Android mit diesem Instascan-Code zu greifen, können Sie die deviceId verwenden.
Stellen Sie sicher, dass deviceId eine _video_-Einschränkung wie ist

video: {
  devideId: this.id
}

Kamera-Einschränkungscode:

Hier ist der Code aus dem Projekt, der die Einschränkungen festlegt und die MediaStream- Objekte
Der Grund, warum dieser Code nicht richtig funktioniert, ist, dass die sourceId der _Videobeschränkung_ für _Android_ oder _Iphone_ nicht unterstützt wird. Dies muss in deviceId geändert werden . Außerdem müssen alle obligatorischen Elemente entfernt werden, wenn sie nicht für Ihr Gerät geeignet sind.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

So ändern Sie InstaScan und minimieren es:

Um dies zu erhalten und zu ändern, habe ich VSCode verwendet.
1) Installieren Sie Node.js und vsCode.
2) an einem Terminal in dem Verzeichnis, das Sie herunterladen möchten, ausführen:
git clone https://github.com/JoseCDB/instascan.git

3) am Terminal cd in das instascan-Verzeichnis:
cd instascan

4) Ändern Sie das Javascript und führen Sie gulp aus, um den Code freizugeben:
gulp release

5) Dadurch erhalten Sie ein neues minimiertes instascan.min.js-Element im Ordner _dist_.

Ich werde dieses Android-Problem hoffentlich dieses Wochenende lösen. Ich hoffe, dies gibt Ihnen genug Einblick für zukünftige Projekte mit dieser großartigen Bibliothek.

Hallo, das sollte gut funktionieren.
Fügen Sie zunächst https://github.com/webrtc/adapter hinzu.

Danach klonen Sie dies:
git clone https://github.com/quocthai95/instascan.git
Lauf:
npm i
Notwendiges installieren

Verwenden Sie gulp, um den endgültigen Code freizugeben:
gulp release

Ich habe Iphone 6 plus (iOS 11.4) und Iphone 8 plus (iOS 11.3) überprüft und es hat gut funktioniert. Sie können die Kameras normal austauschen.

Hoffe du kannst dein Problem lösen.

Hallo, das sollte gut funktionieren.
Fügen Sie zunächst https://github.com/webrtc/adapter hinzu.

Danach klonen Sie dies:
git clone https://github.com/quocthai95/instascan.git
Lauf:
npm i
Notwendiges installieren

Verwenden Sie gulp, um den endgültigen Code freizugeben:
gulp release

Ich habe Iphone 6 plus (iOS 11.4) und Iphone 8 plus (iOS 11.3) überprüft und es hat gut funktioniert. Sie können die Kameras normal austauschen.

Hoffe du kannst dein Problem lösen.

Bei der Installation von Notwendigem erhalte ich "12 Schwachstellen (1 niedrig, 5 moderat, 6 hoch)".
Einige "$ npm install --save-dev [Paketname]"-Befehle scheinen diese Schwachstellen zu beheben, aber ich kann sie aufgrund der folgenden Ausnahme nicht erstellen:

$ gulp release assert.js:351 throw err; ^ AssertionError [ERR_ASSERTION]: Task-Funktion muss in Gulp.set [als _setTask] angegeben werden (C:\Users\John\Downloads\instascan-ios-rear-camera\instascan-ios-rear-camera\node_modules\undertaker\lib \set-task.js:10:3)

Wie komme ich von hier weiter, ich würde diesen Build wirklich gerne ausprobieren. Es funktioniert so gut mit meinem Android-Handy?

/John

Hallo @johnatitide ,
Hast du die neueste Version von gulp (4.0.0) installiert? Wenn ja, versuchen Sie es bitte auf 3.9.1 zu beschränken. Zu Ihrer Information:
https://github.com/ampproject/docs/issues/793#issuecomment -354836162
Oder können Sie angeben, welche Befehle Sie zum Erstellen verwendet haben.

Hallo @quocthai95

Das Bauen funktioniert mit den folgenden Befehlen:
Git-Klon https://github.com/quocthai95/instascan.git
npm install [email protected]
npm ich
Schluckfreigabe

Ich kann jetzt die Kamera in Safari auf iPad und iPhone wechseln. Schön.

Besteht die Möglichkeit, dass die Constraint-Fixes wieder in Schmichs Repo zusammengeführt werden?

Besteht die Möglichkeit, dass die Constraint-Fixes wieder in Schmichs Repo zusammengeführt werden?

Ich habe eine neue Pull-Anfrage erstellt. Warte auf Annahme ^^

@quocthai95 hallo, ich bin deinen Schritten von https://github.com/schmich/instascan/issues/182#issuecomment -447198290 gefolgt.

Ich habe mich gewundert, dass ich auf meinem Android Chrome standardmäßig die Frontkamera bekomme. Ich frage mich, wie kann ich die Rückkamera als Standard festlegen? hast du einen beispielcode?

@fariskas ,
Verwenden Sie regexp, um zu testen, ob es mit /back/ übereinstimmt, und starten Sie es dann, damit Sie die Rückkamera als Standard verwenden können.

`Instascan.Camera.getCameras().then(Funktion (Kameras) {
if(kameras[0].name.match(/back/i)){
Scanner.start(Kameras[0]);
} sonst if(Kameras[1].name.match(/back/i)){
Scanner.start(Kameras[1]);
}
}

Dies könnte nützlich sein: Ich verwende eine for-Schleife, um "zurück" in cameras[i].name aber ich war nicht erfolgreich und konnte die Rückkamera auf dem iPad nicht auswählen, bis ich cameras[i].name an console.log und fand heraus, dass ich nach "achterzijde" suchen musste (was auf Niederländisch "back" ist).
Wenn Sie also nicht erfolgreich versuchen, die Rückkamera in iOS auszuwählen, versuchen Sie, "zurück" zu übersetzen oder schreiben Sie cameras[i].name in console.log , um herauszufinden, wie die Rückkamera heißt.

Ich kann bestätigen, dass die Demo nur mit der Frontkamera funktioniert. Dies ist mit Safari auf iOS 12.2

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Ich verwende seit etwa 7 Monaten eine modifizierte Version dieser Bibliothek auf über 30+ Arten von iOS und Android-Telefonen und -Tablets. Sehen Sie sich die Kommentare an, die ich oben zu einer modifizierten Version hinterlassen habe, um jede Kamera von dem Betriebssystem zu erhalten, mit dem Sie arbeiten. In den Kommentaren wird immer wieder davon gesprochen, dass danach der webrtc hinzugefügt wird, was meiner Meinung nach das gesamte Problem dieser Bibliothek ist.

Ich habe webrtc komplett aus dem Projekt entfernt und neu kompiliert. webrtc wird mit diesem Code nicht mehr benötigt, wenn es auf es5 oder höher transpiliert wird. Die Verwendung von webrtc in der Bibliothek und deren Codierung ermöglichte nicht das Abrufen der richtigen Kamera.

Ich habe die festen und transpilierten regulären und minimierten js-Dateien eingefügt, die ich seit einiger Zeit verwende. Ich verwende es für den Schulbesuch mit QrCodes auf allen Telefonen, die Schüler und Lehrer haben, die zu diesem Zeitpunkt etwa 30+ Modelle waren. Es kann jede Kamera aufnehmen.

Ich hoffe das hilft.

Rückkamera-Code
```
scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
.then(handleSuccess)
.catch(handleError);
// Scannen starten
scanner.addListener('scan', foundCode);

            Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    scanner.start(cameras[0]);
                }
                else {
           ...        
                }
            }).catch (function (e) {
             ...  
            });

```
instascan.min.zip

https://github.com/schmich/instascan/issues/182#issuecomment -443388022

Dies ist ein großartiges Produkt und es war wirklich nützlich, also vielen Dank, dass Sie es wunderbar gemacht haben. Hier ist das Problem mit diesem Instascan aus meiner Recherche:

• Die Klasse Camera gibt beim Aufrufen von getCameras eine Sammlung von Camera-Objekten zurück, die aus den MediaDeviceInfo- Objekten erstellt werden, die durch einen Aufruf von navigator.mediaDevices.enumerateDevices() gesammelt wurden. Dies sind KEINE MediaStream- Objekte, die den tatsächlichen Stream der Kamera enthalten, die beim Starten des Scanners verwendet wurde. Diese MediaDeviceInfo-Objekte enthalten die Eigenschaften _ id _ und _ name _ und nicht mehr. Sie werden verwendet, um ein Array von Kameraobjekten zu erstellen.

Wenn Sie _scanner.start(camera)_ aufrufen, übergeben Sie ein Camera- Objekt, das die Methode _camera.start()_ auf der Kamera aufruft.

• Die Methode _camera.start()_ ruft DANN _navigator.mediaDevices.getUserMedia(contraints)_ auf, die ein Arrary von MediaStream- Objekten basierend auf den in der Methode aufgelisteten gegebenen Einschränkungen
• _scanner.start()_ ruft _scanner._enableScan(camera)_ auf und gibt ihm das erste MediaStream-Objekt, das vom obigen Aufruf in camera zurückgegeben wurde. Es setzt das src-Element auf dieses Medienstream-Objekt.
  **This Part Is the Disconnect and what is messing it all up!**

Das Einschränkungsproblem:

Das übergebene Camera-Objekt verwendet seine ID in den Constraints als _"obligatorisch"_ für die Suche der Geräte. Wenn es nicht gefunden wird, wird kein Video angezeigt. Auch andere "obligatorische" Einschränkungen werden festgelegt.

Verschiedene Geräte UNTERSTÜTZEN NICHT die verwendeten Einschränkungen!
Führen Sie diesen Link auf dem Gerät aus, das Sie verwenden möchten, und Sie erfahren, welche Einschränkungen es unterstützt:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Führen Sie diesen Link auf dem Gerät aus, das Sie verwenden möchten, und geben Sie eine Einschränkung ein. Es wird Ihnen sagen, ob es unterstützt wird:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSupportedConstraints/deviceId

Ipad/Iphone/IOS unterstützte Einschränkungen:

AspectRatio, FacingMode, _deviceId * _ , height, width, AspectRatio und andere.

_Wenn ich dies getestet habe, wird _deviceId als Einschränkung ignoriert._ Probieren Sie dies im obigen Link für Einschränkungen aus und Sie werden sehen, dass die deviceId = "" gesetzt wird. Wenn ich es in Javascript gepackt und angezeigt habe, hat das iPhone immer eine leere Geräte-ID zurückgegeben.

Um die Rückkamera des Iphones zu greifen, müssen Sie also den Gesichtsmodus und NICHT die Geräte-ID verwenden.

Von Android unterstützte Einschränkungen:

deviceId, _facingMode * _, Seitenverhältnis, Höhe, Breite und viele andere.

Ich habe dies auf einem Samsung-Tablet und einem Android-Handy getestet. Der Gesichtsmodus ist standardmäßig auf die Frontkamera des "Benutzers" eingestellt. Ich habe mit diesem Code experimentiert und festgestellt, dass der FacingMode für Android aus irgendeinem Grund noch nicht funktioniert. Im obigen Link funktioniert es aber. Ich werde diesen Teil weiter untersuchen und möglicherweise diesen Code so beheben, dass er ordnungsgemäß mitfacingMode und Android funktioniert.

* _ * ANTWORT AUF ANDROID-PROBLEME * _ **
Der Gulp-Build dieses Projekts enthält die webrtc-Adapter-Version ^1.4.0, die den facialMode auf Android Chrome durcheinander bringt. Beim Durchsehen des Codes wurde tatsächlich der Gesichtsmodus gelöscht.

• Um in diesem Projekt zu beheben - in _index.js_, entfernen Sie die Zeile 2 require('webrtc-adapter'); Folgen Sie dann den unten stehenden Build-Verfahren. Als ich auf einem Tablet und 4 verschiedenen Android-Handys in Chrome getestet habe, funktionierte alles wieder, um die Rückkamera zu greifen.

Um die Rückkamera auf dem Android mit diesem Instascan-Code zu greifen, können Sie die deviceId verwenden.
Stellen Sie sicher, dass deviceId eine _video_-Einschränkung wie ist

video: {
  devideId: this.id
}

Kamera-Einschränkungscode:

Hier ist der Code aus dem Projekt, der die Einschränkungen festlegt und die MediaStream- Objekte
Der Grund, warum dieser Code nicht richtig funktioniert, ist, dass die sourceId der _Videobeschränkung_ für _Android_ oder _Iphone_ nicht unterstützt wird. Dies muss in deviceId geändert werden . Außerdem müssen alle obligatorischen Elemente entfernt werden, wenn sie nicht für Ihr Gerät geeignet sind.

async start() {
    let constraints;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if (iOS) {
      constraints = {
        audio: false,
        video: {
          facingMode: 'environment',
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    } else {
      constraints = {
        audio: false,
        video: {
          mandatory: {
            sourceId: this.id,
            minWidth: 600,
            maxWidth: 800,
            minAspectRatio: 1.6
          },
          optional: []
        }
      };
    }

    this._stream = await Camera._wrapErrors(async () => {
      return await navigator.mediaDevices.getUserMedia(constraints);
});

So ändern Sie InstaScan und minimieren es:

Um dies zu erhalten und zu ändern, habe ich VSCode verwendet.

1. Installieren Sie Node.js und vsCode.
2. an einem Terminal in dem Verzeichnis, das Sie herunterladen möchten, ausführen:
   git clone https://github.com/JoseCDB/instascan.git
3. am Terminal cd in das instascan-Verzeichnis:
   cd instascan
4. Ändern Sie das Javascript und führen Sie gulp aus, um den Code freizugeben:
   gulp release
5. Dadurch erhalten Sie ein neues minimiertes instascan.min.js-Element im Ordner _dist_.

Ich werde dieses Android-Problem hoffentlich dieses Wochenende lösen. Ich hoffe, dies gibt Ihnen genug Einblick für zukünftige Projekte mit dieser großartigen Bibliothek.

Ich habe die obigen Schritte befolgt und dann die Datei camera.js (in Zeile 29) wie unten beschrieben bearbeitet
facingMode: { exact: "environment" },
Es funktioniert für mich. Danke @apchandler

Ich freue mich, dass Sie etwas für sich haben! Danke @glorynguyen, dass gepostet hast !

Leider funktionieren diese Lösungen nicht auf iOS 13. Es ist einfach leer (nicht einmal schwarz).
Beim Remote-Debugging von Safari werden auch keine Fehler in der Konsole angezeigt.

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Ich verwende seit etwa 7 Monaten eine modifizierte Version dieser Bibliothek auf über 30+ Arten von iOS und Android-Telefonen und -Tablets. Sehen Sie sich die Kommentare an, die ich oben zu einer modifizierten Version hinterlassen habe, um jede Kamera von dem Betriebssystem zu erhalten, mit dem Sie arbeiten. In den Kommentaren wird immer wieder davon gesprochen, dass danach der webrtc hinzugefügt wird, was meiner Meinung nach das gesamte Problem dieser Bibliothek ist.

Ich habe webrtc komplett aus dem Projekt entfernt und neu kompiliert. webrtc wird mit diesem Code nicht mehr benötigt, wenn es auf es5 oder höher transpiliert wird. Die Verwendung von webrtc in der Bibliothek und deren Codierung ermöglichte nicht das Abrufen der richtigen Kamera.

Ich habe die festen und transpilierten regulären und minimierten js-Dateien eingefügt, die ich seit einiger Zeit verwende. Ich verwende es für den Schulbesuch mit QrCodes auf allen Telefonen, die Schüler und Lehrer haben, die zu diesem Zeitpunkt etwa 30+ Modelle waren. Es kann jede Kamera aufnehmen.

Ich hoffe das hilft.

Rückkamera-Code

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (Kommentar)

Damit ist mein Problem gelöst, vielen Dank.

Was ist die neueste Lösung dafür? Ich habe ein paar aus dem Thread ausprobiert, aber ich scheine nur die Frontkamera zu bekommen.
Ich weiß nicht, wie man Gulp verwendet oder tatsächlich .js .git-Projekte kompiliert, ich programmiere hauptsächlich in C#/Asp.net Mvc, daher ist dies ein bisschen neu für mich.
Die Lösung von apchandler gibt mir Fehler. (Video nicht definiert)
Derzeit wird ein "korrigierter" instascan.min.js für Android-Geräte und seine Version für IOS geladen, aber ich kann es nicht zum Laufen bringen.

Was ist die neueste Lösung dafür? Ich habe ein paar aus dem Thread ausprobiert, aber ich scheine nur die Frontkamera zu bekommen.
Ich weiß nicht, wie man Gulp verwendet oder tatsächlich .js .git-Projekte kompiliert, ich programmiere hauptsächlich in C#/Asp.net Mvc, daher ist dies ein bisschen neu für mich.
Die Lösung von apchandler gibt mir Fehler. (Video nicht definiert)
Derzeit wird ein "korrigierter" instascan.min.js für Android-Geräte und seine Version für IOS geladen, aber ich kann es nicht zum Laufen bringen.

Ist das HTML-Videoelement vorhanden?
```

When you run instascan you need to speficy a video element like:

var selbst = dies;
self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
self.scanner.addListener('scan', Funktion (Inhalt, Bild) {
self.scans.unshift({ date: +(Date.now()), content: content });
});
Instascan.Camera.getCameras().then(Funktion (Kameras) {
self.cameras = Kameras;
if (Kameralänge > 0) {
self.activeCameraId = Kameras[0].id;
self.scanner.start(kameras[0]);
} anders {
console.error('Keine Kameras gefunden.');
}
}).catch(funktion (e) {
Konsole.Fehler(e);
});
```

Ja, ich habe es funktioniert mit:

<video class="player" style="max-width:100%" id="preview" playsinline></video>

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
</script>

Starten von Kameras[0] für Iphone/Ios-Geräte. Und das für Android:

<script>
.....
  Instascan.Camera.getCameras().then(function (cameras) {
                if (cameras.length > 0) {
                    var selectedCam = cameras[0];
                    $.each(cameras, (i, c) => {
                        if (c.name.indexOf('back') != -1) {
                            selectedCam = c;
                            return false;
                        }
                    });
                    scanner.start(selectedCam);
                }
                else {
                    console.error('No cameras found.');
                }
              });
</script>

Anscheinend war das Problem, dass ich nur überprüft habe, ob Request.UserAgent.Contains("ios") und nicht "iphone", also habe ich auch das Android-Skript für das iPhone ausgeführt.

Das ist gut zu wissen. Danke für die Information.

@apchandler Hallo, wissen Sie, ob es eine Möglichkeit gibt, die "Haupt"

Ich habe eine Website, auf der meine Benutzer QR-CODES mit instascan scannen. Ich entwickle die Website und mache einige Tests. Ich greife mit meinem Mobiltelefon mit 4 Rückkameras (HUAWEI P30 PRO) auf die Website zu.

Ich habe die $.each ausprobiert und mit der ersten ausgewählten Rückkamera kann ich nichts scannen, weil die Sicht so unscharf und mit viel Zoom ist.

Aber wenn ich die Kameras auswähle[2] kann ich alles scannen.

Gibt es eine generische Möglichkeit, die Hauptkamera der Rückseite auszuwählen?

Ich meine, meine Webapp wird von so vielen Benutzern mit unterschiedlichen Mobiltelefonen, unterschiedlicher Anzahl von Kameras und auch unterschiedlicher Reihenfolge der Kameras verwendet.

Oder empfehlen Sie, bei allen Kameras eine Auswahl zu treffen und dann den Benutzer diejenige auswählen zu lassen, die für ihn perfekt funktioniert?

Vielen Dank

@apchandler Hallo, wissen Sie, ob es eine Möglichkeit gibt, die "Haupt"

Ich habe eine Website, auf der meine Benutzer QR-CODES mit instascan scannen. Ich entwickle die Website und mache einige Tests. Ich greife mit meinem Mobiltelefon mit 4 Rückkameras (HUAWEI P30 PRO) auf die Website zu.

Ich habe die $.each ausprobiert und mit der ersten ausgewählten Rückkamera kann ich nichts scannen, weil die Sicht so unscharf und mit viel Zoom ist.

Aber wenn ich die Kameras auswähle[2] kann ich alles scannen.

Gibt es eine generische Möglichkeit, die Hauptkamera der Rückseite auszuwählen?

Ich meine, meine Webapp wird von so vielen Benutzern mit unterschiedlichen Mobiltelefonen, unterschiedlicher Anzahl von Kameras und auch unterschiedlicher Reihenfolge der Kameras verwendet.

Oder empfehlen Sie, bei allen Kameras eine Auswahl zu treffen und dann den Benutzer diejenige auswählen zu lassen, die für ihn perfekt funktioniert?

Vielen Dank

Es tut mir leid. Mir ist kein Wert bekannt, der als 'Haupt'-Kamera angibt, wenn mehrere vorhanden sind. Sie können der Kameraauswahlfunktion das Kriterienobjekt zuweisen, indem Sie angeben, dass sie mindestens eine bestimmte Auflösung und andere Spezifikationen haben muss. Das könnte Ihnen zumindest eine Mindestfähigkeitskamera geben. Ansonsten klingt deine Lösung gut für deine Herangehensweise.

@apchandler Hallo, wissen Sie, ob es eine Möglichkeit gibt, die "Haupt"
Ich habe eine Website, auf der meine Benutzer QR-CODES mit instascan scannen. Ich entwickle die Website und mache einige Tests. Ich greife mit meinem Mobiltelefon mit 4 Rückkameras (HUAWEI P30 PRO) auf die Website zu.
Ich habe die $.each ausprobiert und mit der ersten ausgewählten Rückkamera kann ich nichts scannen, weil die Sicht so unscharf und mit viel Zoom ist.
Aber wenn ich die Kameras auswähle[2] kann ich alles scannen.
Gibt es eine generische Möglichkeit, die Hauptkamera der Rückseite auszuwählen?
Ich meine, meine Webapp wird von so vielen Benutzern mit unterschiedlichen Mobiltelefonen, unterschiedlicher Anzahl von Kameras und auch unterschiedlicher Reihenfolge der Kameras verwendet.
Oder empfehlen Sie, bei allen Kameras eine Auswahl zu treffen und dann den Benutzer diejenige auswählen zu lassen, die für ihn perfekt funktioniert?
Vielen Dank

Es tut mir leid. Mir ist kein Wert bekannt, der als 'Haupt'-Kamera angibt, wenn mehrere vorhanden sind. Sie können der Kameraauswahlfunktion das Kriterienobjekt zuweisen, indem Sie angeben, dass sie mindestens eine bestimmte Auflösung und andere Spezifikationen haben muss. Das könnte Ihnen zumindest eine Mindestfähigkeitskamera geben. Ansonsten klingt deine Lösung gut für deine Herangehensweise.

Vielen Dank für Ihre Antwort! Ich werde es mit der Auflösung versuchen. Instascan kann die Auflösung einer Kamera zurückgebenA?

Gemäß den Methoden von @glorynguyen und @apchandler.
Kann jetzt die Rückfahrkamera einschalten
Ändern Sie instascan.min
Vor
case 0:return i={audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}
Nach
case 0:return i=(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream)?{audio:!1,video:{facingMode:{exact:"environment"},mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}:{audio:!1,video:{mandatory:{sourceId:this.id,minWidth:600,maxWidth:800,minAspectRatio:1.6},optional:[]}}

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Ich verwende seit etwa 7 Monaten eine modifizierte Version dieser Bibliothek auf über 30+ Arten von iOS und Android-Telefonen und -Tablets. Sehen Sie sich die Kommentare an, die ich oben zu einer modifizierten Version hinterlassen habe, um jede Kamera von dem Betriebssystem zu erhalten, mit dem Sie arbeiten. In den Kommentaren wird immer wieder davon gesprochen, dass danach der webrtc hinzugefügt wird, was meiner Meinung nach das gesamte Problem dieser Bibliothek ist.

Ich habe webrtc komplett aus dem Projekt entfernt und neu kompiliert. webrtc wird mit diesem Code nicht mehr benötigt, wenn es auf es5 oder höher transpiliert wird. Die Verwendung von webrtc in der Bibliothek und deren Codierung ermöglichte nicht das Abrufen der richtigen Kamera.

Ich habe die festen und transpilierten regulären und minimierten js-Dateien eingefügt, die ich seit einiger Zeit verwende. Ich verwende es für den Schulbesuch mit QrCodes auf allen Telefonen, die Schüler und Lehrer haben, die zu diesem Zeitpunkt etwa 30+ Modelle waren. Es kann jede Kamera aufnehmen.

Ich hoffe das hilft.

Rückkamera-Code

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (Kommentar)

Sie haben gerade den Job eines Junior-Entwicklers gerettet, Sie haben sich selbst einen Fan fürs Leben.

Vielen Dank. Ich war genau dort, wo Sie waren, als ich diesen Code sah. Hatte eine Deadline und brauchte die Kameras von 30 verschiedenen Typen. Ich bin froh, dass sie das geschrieben haben.

Läuft jetzt 15 Monate mit 45 verschiedenen Telefonmodellen und nur einem Schluckauf auf einem Samsung-Telefon, der behoben wurde, als Samsung es gepatcht hat. Es war also ein Samsung WebKit-Fehler.

Hi,
Ich habe auch ein Problem mit der Rückkamera mit IOS wie bei einer anderen Person. Meine Rückkamera lässt sich auf dem iPhone nicht öffnen, die Standard-Frontkamera läuft. Bitte helfen Sie mir, wenn jemand dieses Problem mit der aktualisierten Version (13.xx. xx) von Safari gelöst hat.

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Ich verwende seit etwa 7 Monaten eine modifizierte Version dieser Bibliothek auf über 30+ Arten von iOS und Android-Telefonen und -Tablets. Sehen Sie sich die Kommentare an, die ich oben zu einer modifizierten Version hinterlassen habe, um jede Kamera von dem Betriebssystem zu erhalten, mit dem Sie arbeiten. In den Kommentaren wird immer wieder davon gesprochen, dass danach der webrtc hinzugefügt wird, was meiner Meinung nach das gesamte Problem dieser Bibliothek ist.

Ich habe webrtc komplett aus dem Projekt entfernt und neu kompiliert. webrtc wird mit diesem Code nicht mehr benötigt, wenn es auf es5 oder höher transpiliert wird. Die Verwendung von webrtc in der Bibliothek und deren Codierung ermöglichte nicht das Abrufen der richtigen Kamera.

Ich habe die festen und transpilierten regulären und minimierten js-Dateien eingefügt, die ich seit einiger Zeit verwende. Ich verwende es für den Schulbesuch mit QrCodes auf allen Telefonen, die Schüler und Lehrer haben, die zu diesem Zeitpunkt etwa 30+ Modelle waren. Es kann jede Kamera aufnehmen.

Ich hoffe das hilft.

Rückkamera-Code

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (Kommentar)

funktionierte sowohl auf Android als auch auf iOS wie ein Zauber! Ich habe gerade den Original-Instascan-Master-Zweig heruntergeladen, Ihre Dateien in den Ordner "dist" gelegt und das war's! vielen Dank, mein Herr !

funktionierte sowohl auf Android als auch auf iOS wie ein Zauber! Ich habe gerade den Original-Instascan-Master-Zweig heruntergeladen, Ihre Dateien in den Ordner "dist" gelegt und das war's! vielen Dank, mein Herr !

@antworks-hub hast du den gesamten Code aus dem Branch oder das minimierte js verwendet?
woher hast du den "dist"-Ordner?

funktionierte sowohl auf Android als auch auf iOS wie ein Zauber! Ich habe gerade den Original-Instascan-Master-Zweig heruntergeladen, Ihre Dateien in den Ordner "dist" gelegt und das war's! vielen Dank, mein Herr !

@antworks-hub hast du den gesamten Code aus dem Branch oder das minimierte js verwendet?
woher hast du den "dist"-Ordner?

@ Sandi2211 Ich glaube, ich habe einen Ordner "dist" im Stammverzeichnis des ursprünglichen instascan-Master-Zweigs erstellt und den Inhalt der Datei instasca,min.zip in diesen Ordner abgelegt.

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Ich verwende seit etwa 7 Monaten eine modifizierte Version dieser Bibliothek auf über 30+ Arten von iOS und Android-Telefonen und -Tablets. Sehen Sie sich die Kommentare an, die ich oben zu einer modifizierten Version hinterlassen habe, um jede Kamera von dem Betriebssystem zu erhalten, mit dem Sie arbeiten. In den Kommentaren wird immer wieder davon gesprochen, dass danach der webrtc hinzugefügt wird, was meiner Meinung nach das gesamte Problem dieser Bibliothek ist.
Ich habe webrtc komplett aus dem Projekt entfernt und neu kompiliert. webrtc wird mit diesem Code nicht mehr benötigt, wenn es auf es5 oder höher transpiliert wird. Die Verwendung von webrtc in der Bibliothek und deren Codierung ermöglichte nicht das Abrufen der richtigen Kamera.
Ich habe die festen und transpilierten regulären und minimierten js-Dateien eingefügt, die ich seit einiger Zeit verwende. Ich verwende es für den Schulbesuch mit QrCodes auf allen Telefonen, die Schüler und Lehrer haben, die zu diesem Zeitpunkt etwa 30+ Modelle waren. Es kann jede Kamera aufnehmen.
Ich hoffe das hilft.
Rückkamera-Code

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip
#182 (Kommentar)

Damit ist mein Problem gelöst, vielen Dank.

Danke, Mann, meine Arbeit funktioniert gut, fügen Sie einfach Ihre neuen js hinzu.

Kein Problem. Ich bin froh, dass das hier noch alles funktioniert.

Hat jemand herausgefunden, wie man die Rückkamera mit Safari unter iOS 12+ verwendet?

Ich verwende seit etwa 7 Monaten eine modifizierte Version dieser Bibliothek auf über 30+ Arten von iOS und Android-Telefonen und -Tablets. Sehen Sie sich die Kommentare an, die ich oben zu einer modifizierten Version hinterlassen habe, um jede Kamera von dem Betriebssystem zu erhalten, mit dem Sie arbeiten. In den Kommentaren wird immer wieder davon gesprochen, dass danach der webrtc hinzugefügt wird, was meiner Meinung nach das gesamte Problem dieser Bibliothek ist.

Ich habe webrtc komplett aus dem Projekt entfernt und neu kompiliert. webrtc wird mit diesem Code nicht mehr benötigt, wenn es auf es5 oder höher transpiliert wird. Die Verwendung von webrtc in der Bibliothek und deren Codierung ermöglichte nicht das Abrufen der richtigen Kamera.

Ich habe die festen und transpilierten regulären und minimierten js-Dateien eingefügt, die ich seit einiger Zeit verwende. Ich verwende es für den Schulbesuch mit QrCodes auf allen Telefonen, die Schüler und Lehrer haben, die zu diesem Zeitpunkt etwa 30+ Modelle waren. Es kann jede Kamera aufnehmen.

Ich hoffe das hilft.

Rückkamera-Code

scanner = new Instascan.Scanner({ video: video, scanPeriod: 4, mirror:false })
                .then(handleSuccess)
                .catch(handleError);
             //Start scanning
             scanner.addListener('scan', foundCode);

             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
                     scanner.start(cameras[0]);
                 }
                 else {
            ...        
                 }
             }).catch (function (e) {
              ...  
             });

instascan.min.zip

#182 (Kommentar)

Danke, @apchandler11! Sie haben meine Arbeit gerettet. gott dms!