precisar
O desenvolvimento de aplicativos híbridos, shell nativo + webApp, chama a função de câmera nativa na web part e exibe o conteúdo da câmera na área designada da página da web. Ao mesmo tempo, você pode tirar fotos manualmente e realizar o reconhecimento facial e. exibir os resultados do reconhecimento na página da web.
pilha de tecnologia
vue, HTML5, tag de vídeo, Android, IOS, Baidu AI
analisar
1. Use navigator.mediaDevices.getUserMedia para chamar a função de câmera nativa do sistema
2. A tag de vídeo exibe o conteúdo da câmera
3. Obtenha imagens usando a tag canvas
4. Faça upload da imagem para o servidor e identifique-a por meio do Baidu AI
5. Web exibe resultados de reconhecimento
código principal
1. Chame a função de câmera nativa do sistema e use a tag video para exibir o HTML:
<video id=webcam :style=videoStyle :width=videoWidth :height=videoHeight pré-carregamento do loop > </video>
JavaScript:
initVideo() { deixe isso = isto; { //Chame o dispositivo de mídia do usuário e acesse a câmera this.getUserMedia( { video: { largura: { ideal: that.videoWidth, max: that.videoWidth }, altura: { ideal: that.videoHeight, max: that.videoHeight }, enfrentandoMode: user, //FrameRate da câmera frontal: { ideal: 30, min: 10 } } }, this.videoSuccess, this.videoError ); else { this.$toast.center(Falha ao abrir a câmera, verifique as configurações de permissão! } }, 300); }, getUserMedia(restrições, sucesso, erro) { if (navigator.mediaDevices.getUserMedia) { //A API padrão mais recente navigator.mediaDevices .getUserMedia(restrições) .then(sucesso) .catch(error); } else if (navigator.webkitGetUserMedia) { //navegador principal do webkit navigator.webkitGetUserMedia(restrições, sucesso, erro } else if (navigator.mozGetUserMedia) { //navegador firfox navigator.mozGetUserMedia(restrições, sucesso, erro } else if (navigator.getUserMedia) { //navegador API antigo . getUserMedia(restrições, sucesso, erro); videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play(); em Falha, verifique as configurações de permissão! },2. O Canvas obtém fotos da câmera
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(imagem/png);
3. Ligue para o Baidu AI para identificar as imagens
JavaScript:
deixe isso = isso; deixe base64Data = this.canvas.toDataURL(); deixe blob = this.dataURItoBlob(base64Data); , that.uuid); util.ajax .post(XXXXXXXX, arquivo, { cabeçalhos: { Content-Type: multipart/form-data } }) .then(function(response) { if ((response.status = 200)) { .....reconhecimento bem-sucedido, exibir o resultado} else { ....reconhecimento falhou} }) .catch(function(error) { console.error(error }); //Converter base64 em 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], { tipo). : mimeString });Adaptação para celular
1. Como o gerenciamento de permissões do Android mudou desde o Android 6, o shell nativo do Android precisa ser processado da seguinte forma:
myWebView.setWebChromeClient(new WebChromeClient() { @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(solicitação final de PermissionRequest) { request.grant(request.getResources()); }});2. Sistema IOS, disponível após Safari11
3. Erro OverconstrainedError Alguns telefones Android relatarão um erro OverconstrainedError. O motivo é que as configurações dos parâmetros da câmera não são razoáveis e as configurações especificadas não podem ser encontradas.