前提・実現したいこと
node.jsでgoogle cloud platform のvisionAPIを導入し、画像から文字抽出をしたいと考えております
発生している問題・エラーメッセージ
Unhandled Rejection (Error): {"servicePath":"vision.googleapis.com","port":443,"clientConfig":{},"scopes":["https://www.googleapis.com/auth/cloud-platform","https://www.googleapis.com/auth/cloud-vision"]}You need to pass auth instance to use gRPC-fallback client in browser. Use OAuth2Client from google-auth-library. Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. in div (at Vision.js:61) in Vision (at src/index.js:17)
該当のソースコード
javascript
1import React,{Component} from 'react'; 2 3async function quickstart() { 4 // Imports the Google Cloud client library 5const vision = require('@google-cloud/vision'); 6 7// Creates a client 8const client = new vision.ImageAnnotatorClient(); 9 10// Performs label detection on the image file 11const [result] = await client.labelDetection('./resources/dog.jpg'); 12const labels = result.labelAnnotations; 13console.log('Labels:'); 14labels.forEach(label => console.log(label.description)); 15} 16class Vision extends Component{ 17 18 render(){ 19 return( 20 <div> 21 {quickstart()} 22 23 24 </div> 25 ); 26 } 27} 28 29 30export default Vision;
試したこと
GCP(google cloud platform)のドキュメントを見て進めました。
https://cloud.google.com/vision/docs/quickstart-client-libraries?hl=ja
react形式でvisionAPIを使いたいため、そのようなコードになっています
認証方法がAPIキー、OAuthなどありますが、自分はOAuthの方でやっていると思います(APIキーの方が簡単だと思うのですが、ドキュメントをあまり理解できませんでした)
リンク先のクイックスタート(始める前に)の部分は設置できているとは思っています。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー