Passing base64 to google vision gives 400 error - reactjs

Question

I am grabbing frames from the webcam, converting each image bitmap into a base64 string then passing that to the Google vision API. When i do this i am catching an error but it only logs as true. Im new to react and am struggling to see what i am missing.
grabFrame() {
let mediaStreamTrack = this.state.mediaStream.getVideoTracks()[0];
let imageCapture = new window.ImageCapture(mediaStreamTrack);
return imageCapture.grabFrame();
}
uploadFrame() {
this.grabFrame()
.then(function(bitmapImage) {
var canvas = document.createElement("canvas")
canvas.width = bitmapImage.width;
canvas.height = bitmapImage.height;
let context = canvas.getContext("2d")
context.drawImage(bitmapImage, 0, 0);
let base64Image = canvas.toDataURL("image/png")
const request = new vision.Request({
image: new vision.Image({
base64: base64Image,
}),
features: [ new vision.Feature('FACE_DETECTION') ]
})
vision.annotate(request)
.then((response) => {
console.log(`Response: ${response}`)
})
.catch((error) => {
console.log(`Error: ${error}`) >>>> "Error: true"
});
}).catch((error) => {
console.log('grabFrame() error: ', error)
});
}
In the console, all I can see is POST https://vision.googleapis.com/v1/images:annotate?key=xxxxxxxxxxxxxxxxxxx 400
Logging base64Image gives data:image/png;base64,iVBORw0KGgoAA...
Am I missing something?