necesidad
El desarrollo de aplicaciones híbridas, shell nativo + aplicación web, llama a la función de cámara nativa en el elemento web y muestra el contenido de la cámara en el área designada de la página web. Al mismo tiempo, puede tomar fotografías y realizar reconocimiento facial manualmente. mostrar los resultados del reconocimiento en la página web.
pila de tecnología
vue, Html5, etiqueta de vídeo, Android, IOS, Baidu AI
analizar
1. Utilice navigator.mediaDevices.getUserMedia para llamar a la función de cámara nativa del sistema
2. La etiqueta de video muestra el contenido de la cámara.
3. Obtenga imágenes usando la etiqueta del lienzo.
4. Cargue la imagen al servidor e identifique la imagen a través de Baidu AI.
5. La web muestra los resultados del reconocimiento.
código central
1. Llame a la función de cámara nativa del sistema y use la etiqueta de video para mostrar html:
<video id=webcam :style=videoEstilo :width=videoWidth :height=videoHeight precarga del bucle > </video>
JavaScript:
initVideo() { deja eso = esto; this.video = document.getElementById(webcam); setTimeout(() => { if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { //Llame al dispositivo multimedia del usuario y acceda a la cámara this.getUserMedia( { video: { ancho: { ideal: that.videoWidth, max: that.videoWidth }, alto: { ideal: that.videoHeight, max: that.videoHeight }, facesMode: usuario, // FrameRate de la cámara frontal: { ideal: 30, min: 10 } } }, this.videoSuccess, this.videoError ); else { this.$toast.center(La cámara no pudo abrirse, verifique la configuración de permisos). }, 300); }, getUserMedia(constraints, Success, error) { if (navigator.mediaDevices.getUserMedia) { // La última API estándar navigator.mediaDevices .getUserMedia(constraints) .then(success) .catch(error); } else if (navigator.webkitGetUserMedia) { //navegador principal webkit navigator.webkitGetUserMedia(restricciones, éxito, error); } else if (navigator.mozGetUserMedia) { //navegador firfox navigator.mozGetUserMedia(restricciones, éxito, error } else if (navigator.getUserMedia) { //Navegador API antiguo; getUserMedia(restricciones, éxito, error } }, videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play(); videoError(error) { console.error(error); en Error, verifique la configuración de permisos! },2. Canvas obtiene fotografías de la cámara.
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(imagen/png);
3. Llame a Baidu AI para identificar imágenes
JavaScript:
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); , that.uuid); util.ajax .post(XXXXXXXXXX, archivo, {encabezados: {Tipo de contenido: multipart/form-data } }) .then(function(response) { if ((response.status = 200)) { .....el reconocimiento es exitoso, muestra el resultado} else { ....el reconocimiento falló} }) .catch(function(error) { console.error(error }); //Convierte base64 a Blob 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], { tipo); : cadenamime });Adaptación del teléfono móvil
1. Dado que la administración de permisos de Android ha cambiado desde Android 6, el shell nativo de Android debe procesarse de la siguiente manera:
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(solicitud final de PermissionRequest) { request.grant(request.getResources()); }});2. Sistema IOS, disponible después de Safari11
3. Error OverconstrainedError Algunos teléfonos Android informarán un error OverconstrainedError. La razón es que la configuración de los parámetros de la cámara no es razonable y no se pueden encontrar las configuraciones especificadas.