brauchen
Hybrid-App-Entwicklung, native Shell + WebApp, ruft die native Kamerafunktion im Webpart auf und zeigt den Kamerainhalt im dafür vorgesehenen Bereich der Webseite an. Gleichzeitig können Sie manuell Bilder aufnehmen und eine Gesichtserkennung durchführen Anzeige der Erkennungsergebnisse auf der Webseite.
Technologie-Stack
vue, Html5, Video-Tag, Android, IOS, Baidu AI
analysieren
1. Verwenden Sie navigator.mediaDevices.getUserMedia, um die native Kamerafunktion des Systems aufzurufen
2. Das Video-Tag zeigt den Kamerainhalt an
3. Bilder mithilfe des Canvas-Tags abrufen
4. Laden Sie das Bild auf den Server hoch und identifizieren Sie das Bild über Baidu AI
5. Web zeigt Erkennungsergebnisse an
Kerncode
1. Rufen Sie die native Kamerafunktion des Systems auf und verwenden Sie das Video-Tag, um HTML anzuzeigen:
<video id=webcam :style=videoStyle :width=videoWidth :height=videoHeight Schleife vorladen > </video>
JavaScript:
initVideo() { let that = this; this.video = document.getElementById(webcam); setTimeout(() => { if ( navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.mozGetUserMedia ) { //Rufen Sie das Mediengerät des Benutzers an und greifen Sie auf die Kamera zu this.getUserMedia( { video: { width: { ideal: that.videoWidth, max: that.videoWidth }, height: { ideal: that.videoHeight, max: that.videoHeight },facingMode: user, //FrameRate der Frontkamera: { ideal: 30, min: 10 } } }, this.videoSuccess, this.videoError ); } else { this.$toast.center(Kamera konnte nicht geöffnet werden, bitte überprüfen Sie die Berechtigungseinstellungen! } }, 300); }, getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //Die neueste Standard-API navigator.mediaDevices .getUserMedia(constraints) .then(success) .catch(error); } else if (navigator.webkitGetUserMedia) { //Webkit-Kernbrowser navigator.webkitGetUserMedia(constraints, success, error); } else if (navigator.mozGetUserMedia) { //firfox browser navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //Alter API-Navigator . getUserMedia(constraints, success, error); videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.play( }, videoError(error) { this.$toast.center(Camera is on Fehlgeschlagen, bitte Berechtigungseinstellungen überprüfen! },2. Canvas erhält Kamerabilder
JavaScript:
this.canvas = document.createElement(canvas); .... let context = this.canvas.getContext(2d); context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); imgSrc = this.canvas.toDataURL(image/png);
3. Rufen Sie Baidu AI an, um Bilder zu identifizieren
JavaScript:
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); , that.uuid); util.ajax .post(XXXXXXXXXX, file, { headers: { Content-Type: multipart/form-data } }) .then(function(response) { if ((response.status = 200)) { .....Erkennung erfolgreich, Ergebnis anzeigen} else { ....Erkennung fehlgeschlagen} }) .catch(function(error) { console.error(error }); //Base64 in Blob konvertieren dataURItoBlob(base64Data) { var byteString; (base64Data.split(,)[0].indexOf(base64) >= 0) byteString = atob(base64Data.split(,)[1]); else byteString = unescape(base64Data.split(,)[1]); var mimeString = base64Data .split(,)[0] .split(:)[1] .split(;)[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type : mimeString });Handy-Anpassung
1. Da sich die Berechtigungsverwaltung von Android seit Android 6 geändert hat, muss die native Android-Shell wie folgt verarbeitet werden:
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(final PermissionRequest request) { request.grant(request.getResources()); }});2. IOS-System, verfügbar nach Safari11
3. OverconstrainedError-Fehler: Einige Android-Telefone melden einen OverconstrainedError-Fehler. Der Grund dafür ist, dass die Kameraparametereinstellungen unangemessen sind und die angegebenen Einstellungen nicht gefunden werden können.