besoin
Le développement d'une application hybride, shell natif + webApp, appelle la fonction de caméra native dans le composant WebPart et affiche le contenu de la caméra dans la zone désignée de la page Web. En même temps, vous pouvez prendre manuellement des photos et effectuer une reconnaissance faciale, et. afficher les résultats de la reconnaissance sur la page Web.
pile technologique
vue, Html5, balise vidéo, Android, IOS, Baidu AI
analyser
1. Utilisez navigator.mediaDevices.getUserMedia pour appeler la fonction de caméra native du système
2. La balise vidéo affiche le contenu de la caméra
3. Obtenez des images à l'aide de la balise canvas
4. Téléchargez l'image sur le serveur et identifiez l'image via Baidu AI
5. Le Web affiche les résultats de la reconnaissance
code de base
1. Appelez la fonction de caméra native du système et utilisez la balise vidéo pour afficher le HTML :
<video id=webcam :style=videoStyle :width=videoWidth :height=videoHeight préchargement de la boucle > </video>
Javascript :
initVideo() { let that = this; this.video = document.getElementById(webcam); setTimeout(() => { if ( navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ) { //Appelez le périphérique multimédia de l'utilisateur et accédez à la caméra this.getUserMedia( { video : { width : { idéal : that.videoWidth, max : that.videoWidth }, height : { idéal : that.videoHeight, max : that.videoHeight }, faceMode : utilisateur, // FrameRate de la caméra frontale : { idéal : 30, min : 10 } } }, this.videoSuccess, this.videoError ); } else { this.$toast.center (La caméra n'a pas pu s'ouvrir, veuillez vérifier les paramètres d'autorisation ! } ; }, 300); }, getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //La dernière API standard navigator.mediaDevices .getUserMedia(constraints) .then(success) .catch(error); } else if (navigator.webkitGetUserMedia) { //navigateur principal du webkit navigator.webkitGetUserMedia(constraints, success, error); } else if (navigator.mozGetUserMedia) { //navigateur firfox navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //Ancien navigateur API. getUserMedia(contraintes, succès, erreur); videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play(); }, videoError(error) { console.error(error); sur Échec, veuillez vérifier les paramètres d'autorisation ! );2. Canvas obtient des images de caméra
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. Appelez Baidu AI pour identifier les images
Javascript :
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); , that.uuid); util.ajax .post(XXXXXXXXXX, fichier, { en-têtes : { Content-Type : multipart/form-data } }) .then(function(response) { if ((response.status = 200)) { .....la reconnaissance est réussie, afficher le résultat} else { ....la reconnaissance a échoué} }) .catch(function(error) { console.error(error); }); //Convertir base64 en Blob dataURItoBlob(base64Data) { var byteString ; (base64Data.split(,)[0].indexOf(base64) >= 0) byteString = atob(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 }); },Adaptation téléphone portable
1. La gestion des autorisations d'Android ayant changé depuis Android 6, le shell natif d'Android doit être traité comme suit :
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(final PermissionRequest request) { request.grant(request.getResources()); }});2. Système IOS, disponible après Safari11
3. Erreur OverconstrainedError Certains téléphones Android signaleront une erreur OverconstrainedError. La raison en est que les paramètres de la caméra sont déraisonnables et que les paramètres spécifiés sont introuvables.