Instascan: IOS11 - Web-RTC-Kompatibilität

Erstellt am 1. Juli 2017  ·  18Kommentare  ·  Quelle: schmich/instascan

Danke für diese tolle Arbeit,
Wir versuchen, diesen Code zum Scannen von QR-Codes im IOS-Browser zu implementieren. Wir testen mit der neuesten IOS11-Beta, die Web RTC unterstützt.

Wir haben Zugriff auf die eth-Kamera und webRTC getUserMedia()

Ich erhalte jedoch einen anhaltenden Fehler = Unhandled Promise Rejection: TypeError: Type error at line 13231
<br i="9"/> case 3:<br i="10"/> return this._stream = i.sent, i.abrupt("return", window.URL.createObjectURL(this._stream));<br i="11"/>

auch IOS-Webkit-Version, die RTC-kompatibel ist = 604
muss also wahrscheinlich die Zeile 13168 aktualisieren

<br i="16"/> if (!navigator.userAgent.match(/Version\/(\d+).(\d+)/))<br i="17"/> return e.browser = "Unsupported webkit-based browser with GUM support but no WebRTC support.", e;<br i="18"/> e.browser = "safari", e.version = this.extractVersion(navigator.userAgent, /AppleWebKit\/([0-9]+)./, 1), e.minVersion = 602<br i="19"/> }<br i="20"/>

Hilfreichster Kommentar

Hier ist eine Version, die funktioniert, kompiliert von https://github.com/centogram/instascan
instascan.zip

Alle 18 Kommentare

$500 Kopfgeld Ich bin nicht in der Lage, dieses Problem zu lösenVielleicht würde ein Kopfgeld von $500 jemanden ermutigen, der fähiger ist als ich, dieses Problem zu lösen. Ich glaube, dass IOS11 Beta jetzt webRTC getUserMedia() unterstützt. Sie können eine funktionierende Demo sehen (nur wenn Sie iOS11 Beta installiert haben :-) --> https://tokbox.com/developer/sdks/js/ --> https://tokbox.com/developer/beta/safari /

Dieses Kopfgeld ist immer noch gültig - und ich werde es respektieren.
wir beabsichtigen, instascan in unserem Projekt einzusetzen, benötigen aber Unterstützung (für die wir bereit sind zu zahlen)
gibt es jemanden, der das kann?
[1] das Problem lösen
[2] Open-Source-Code zum instascan-Projekt beisteuern
[3] und verdiene etwas Geld für deine Bemühungen

+1

@ddwyer Wir haben Instascan kürzlich in unserer Anwendung implementiert. Es ist eine großartige Bibliothek und funktioniert wie erwartet. Wir haben nicht die veröffentlichte Version verwendet, sondern eine neue von master erstellt.

Folgendes habe ich getan, um einen neuen Build für unsere App zu erhalten:

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Das Auswählen einer Kamera basierend auf der ID hat nicht funktioniert. Es wurde immer die Frontkamera verwendet. Wir haben dies gelöst, indem wir camera.js einen hässlichen Patch hinzugefügt haben:

diff --git a/src/camera.js b/src/camera.js
index 5403b3c..4a46e32 100644
--- a/src/camera.js
+++ b/src/camera.js
@@ -31,6 +31,11 @@ class Camera {
       }
     };

+    var userAgent = window.navigator.userAgent;
+    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
+        constraints.video.facingMode = "environment";
+    }
+
     this._stream = await Camera._wrapErrors(async () => {
       return await navigator.mediaDevices.getUserMedia(constraints);
     });

Ich würde keine PR für diese Änderung erstellen, da es keine schöne Lösung ist. Aber es funktioniert, Sie können es gerne in Ihren Projekten verwenden.

Nur zu Ihrer Information, in der Betaversion von iOS11 benötigt das Element <video /> das Attribut playsinline . Scheint für eine Weile ein Fehler zu sein, aber jetzt, da die Beta bald abgelaufen ist, idk ...

https://github.com/serratus/quaggaJS/commit/e8352c7017a2f7a7500fa054f342b9689ff5d8b7#diff -afd7828cb7f3e7a1f8fe7305f50b5021

https://github.com/PaulKinlan/qrcode/commit/b79718b2391969b2291db93ba388b4c2b2f3f9d4

Ich kann bestätigen, dass wir die Anweisungen von @inorbert und shazam befolgt haben.. wie von Zauberhand funktioniert alles.
Wir werden versuchen , das Gefundene zu verbessern und darüber Bericht zu erstatten .
-- Darren

Dies ist in schmich/instascan/pull/78 behoben. Vergessen Sie nicht, die neuesten webrtc-adapter manuell in Ihr Projekt aufzunehmen.

@PallasKatze ist ein Javascript-GURU - das funktioniert jetzt alles und sollte vielleicht getestet und zusammengeführt werden? Falls jemand Interesse hat, wurde das Kopfgeld vollständig ausgezahlt - vielen Dank für Ihre Hilfe.

warum arbeite ich es nicht auf Safari11
var userAgent = window.navigator.userAgent;

  • if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
  • Constraints.video.facingMode = "Umgebung";
  • }
    +
    this._stream = wait Camera._wrapErrors(async () => {
    return wait navigator.mediaDevices.getUserMedia(constraints);
    });

Hier ist eine Version, die funktioniert, kompiliert von https://github.com/centogram/instascan
instascan.zip

@centogram ist es mir möglich, die Frontkamera mit Ihrem ios11-Code zu verwenden? Danke :)

@pandalion ja, aber Sie müssen den Code ändern. Sie sollten lediglich die Einschränkung Constraints.video.facingMode von "environment" in "user" ändern.

@centogram funktioniert wie ein Zauber. Gratuliere!

@centogramm @hrrsppzgl
Welche Zeile muss ich ändern?

@centogramm @hrrsppzgl
Welche Zeile muss ich ändern?

@adelsadek1
Was brauchen Sie wirklich? Haben Sie @centogram modifizierten Code von hier heruntergeladen?
https://github.com/centogram/instascan

@hrrsppzgl ja, ich habe aber immer noch nicht @centogram erwähnt, um die Zeile zu ändern, aber ich habe nicht

@hrrsppzgl ja, ich habe aber immer noch nicht @centogram erwähnt, um die Zeile zu ändern, aber ich habe nicht

Suchen nach
frontalMode: { exakt: "environment" },
Ändern Sie "Umgebung" in "Benutzer"

image

Hallo @lnorbert

Ich habe versucht, deinen Schritten zu folgen,

git clone [email protected]:schmich/instascan.git
cd instascan/
npm install gulp-cli -g
npm install
gulp release
cp dist/instascan.min.js /path/to/our/libraries/include/dir

Aber wenn Sie das erste cmd versuchen, wird der folgende Fehler ausgegeben

Screenshot 2019-07-15 at 7 20 52 PM

Bitte, können Sie mir hier helfen?

Dankeschön

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

CarlosSanMartin picture CarlosSanMartin  ·  8Kommentare

deadmanwalking74 picture deadmanwalking74  ·  7Kommentare

axed picture axed  ·  5Kommentare

marvinex123 picture marvinex123  ·  11Kommentare

igun997 picture igun997  ·  4Kommentare