Запрос API Google Cloud Vision от React с ошибкой веб-камеры: «Нет изображения» - PullRequest
Новая
       19

Запрос API Google Cloud Vision от React с ошибкой веб-камеры: «Нет изображения»

0 голосов
/ 16 декабря 2018

Я пытаюсь сделать запрос API Google Cloud Vision от компонента камеры React, и мое изображение отправляется непосредственно в API в виде строки в кодировке base64.В частности, я использую камеру реагирования npm, чтобы получить фотографию пользователя через веб-камеру или переднюю (селфи) мобильную камеру.

Ошибка, которую я продолжаю получать, - «Ошибка: изображение отсутствует».После нескольких часов попыток различных способов кодирования, декодирования, строкового преобразования и иного массирования данных BLOB-объектов мне не удалось преобразовать изображение в работающий формат.Вот соответствующие разделы моего компонента camera.js: 

import React, { Component } from 'react';
import axios from 'axios';
import Camera from 'react-camera';
import 'react-html5-camera-photo/build/css/index.css'
...

export default class App extends Component {

  constructor(props) {
    super(props);
    this.takePicture = this.takePicture.bind(this);
    this.state = {blob:''};
    this.confirmphoto.bind(this)
  }

  takePicture() {
     this.camera.capture()
     .then(blob => {
        this.img.src = URL.createObjectURL(blob)
        this.img.onload = () => {
           URL.revokeObjectURL(this.src)
        }
        this.setState({
           blob:blob
        })
     })
  }

  confirmphoto() {
     console.log("blob contents:", this.state.blob);
     axios.post(process.env.REACT_APP_BACK_END_SERVER + 'submitChallenge', this.state.blob)
     .then((res)=>{
        console.log(res);
     })
     .catch((err)=>{
        console.log(err);
     });//end axios call
  }

А вот соответствующие части моего маршрута запроса API: 

var express = require('express');
var router = express.Router();
...
const vision = require('@google-cloud/vision');
const client = new vision.ImageAnnotatorClient();

function pictureIsValid(pictureFile) {

   // Stringify raw blob data
   var newObj = JSON.stringify(pictureFile);
   console.log(newObj);

   // Convert blob to base64
   var newObj = Buffer.from(newObj).toString('base64');
   console.log(newObj);

   // JSON request for Google Cloud Vision API

   const request = {
      "requests":[
          {
            "image":{
               "content": newObj
            },
            "features":[
               {
                  "type":"LABEL_DETECTION",
                  "maxResults":1
               }
            ]
         }
      ]
   };

   // Making the request
   client.annotateImage(request)
   .then(function(res){
      console.log("result: ", res);
   })
   .catch(function(err){
      console.log(err);
   });
};

router.post('/', function (req, res) {
   var data = req.body;
   console.log("data passed type:", typeof data);
   var test = pictureIsValid(data);
   res.sendStatus(200).send();
});

Используя стратегически размещенные журналы консоли, данныекажется переданным, но как объект, и это несколько строк зашифрованных данных, которые выглядят так: 

{ ' ����\u0000\u0010JFIF\u0000\u0001\u0001\u0001\u0000H\
u0006\b\u0007\u0007\b\n\u0011\u000b\n\t\t\n\u0014\u000f\
u0017\u001a\u001d% \u001a\u001c#\u001c\u0017\u0017!,!#\'
(***\u0019\u001f.1-)1%)*(\u0001\u0007\b\b\n\t\n\u0013\u0
00b\u000b\u0013(\u001b\u0017\u001b(((((((( ...u000f\u000
7���j���_\'i�F;��`�Ҿ���\u0017R�l�פ�)�q�y��f��\r��i�S�S\\
�4\u0010\nv)qJ)�W\u0013\u0014���.*�q���8�LRaq���8�*����':
'' }

Это то, что отображается в терминале после преобразования base64 вышеупомянутого: 

eyLvv73vv73vv73vv71cdTAwMDBcdTAwMTBKRklGXHUwMDAwXHUwMDAx
XHUwMDAxXHUwMDAxXHUwMDAwSFx1MDAwMEhcdTAwMDBcdTAwMDDvv73v
v71cdTAwMDBcZkFwcGxlTWFya1xu77+977+9XHUwMDAw77+9XHUwMDAw
XHUwMDA3XHUwMDA1XHUwMDA1XHUwMDA2XHUwMDA1XHUwMDA1XHUwMDA3
XHUwMDA2XHUwMDA2XHUwMDA2XGJcdTAwMDdcdTAwMDdcYlxuXHUwMDEx
XHUwMDBiXG5cdFx0XG5cdTAwMTRcdTAwMGZcdTAwMGZcZlx1MDAxMVx1
MDAxOFx1MDAxNVx1MDAxOVx1MDAxOVx1MDAxN1x1MDAxNVx1MDAx ...

Похоже, что base64, это то, что должен принимать API Google Cloud Vision, но я продолжаю получать сообщение об ошибке, что "нет изображения".Я также попытался представить сам большой двоичный объект, строковые и неформатированные версии большого двоичного объекта и данные в формате base64.

У меня есть подлое подозрение, что данные BLOB-объектов даже не являются данными изображений с самого начала.Кто-нибудь знает, где я иду не так?Нужно ли переключаться в другой пакет узлов камеры / веб-камеры?

...