react-webcam | Webcam component | Camera library

I'm trying to set google application credentials using the following command set GOOGLE_APPLICATION_CREDENTIALS=KEY_PATH(I replaced KEY_PATH with the path of the JSON file that contains my service account key).

When I run this command

gcloud auth application-default print-access-token everything works fine.

But I get this error on the browser

Error: {"servicePath":"vision.googleapis.com","port":443,"clientConfig":{},"fallback":true}You need to pass auth instance to use gRPC-fallback client in browser or other non-Node.js environments. Use OAuth2Client from google-auth-library.

This is the file where I use vision:

I'm using React.js to create an application that would take a photo and upload it to Firebase Storage. I am using the react-webcam library, which uses this command to take a photo:

I'm following a tutorial and tried to capture an image using webcam as a jpeg and I want to upload it to firebase storage where it requires me to upload it as file or blob. I'm able to upload an image when I use format, but I want to upload an image directly from the webcam capture. Is there anyway to convert jpeg to file or blob?

Here's the code

I am trying to run this HTML example https://codepen.io/mediapipe/details/KKgVaPJ from https://google.github.io/mediapipe/solutions/face_mesh#javascript-solution-api in a create react application. I have already done:

• npm install of all the facemesh mediapipe packages.
• Already replaced the jsdelivr tags with node imports and I got the definitions and functions.
• Replaced the video element with react-cam

I don't know how to replace this jsdelivr, maybe is affecting:

I have a problem to use React BarcodeScannerComponent. How can I stop the scan process after return result? By console.log, it return correct result and keep scan, how can I remove focus on the component so it can stop scanning ?

There is my Component, Thanks

I'm using the react-webcam npm library and currently, the "capture image" button is located at the bottom of the screen as shown here. Capture button default position

What I want to do is to get that button to the bottom center of the capture window as I've shown here. Area the capture button needs to be added

This is my camera and button

I try to run deep lab model javascript on video here but I get the error Unhandled Rejection (Error): The dtype of dict['ImageTensor'] provided in model.execute(dict) must be int32, but was float32 , here is my code

I am having issues with

I'm using react-web-cam to access the webcam. I want to draw the stream into a canvas because I want to draw a square on top of the stream. I was able to do that using a canvas object. The code is the following and it works: