Passing base64 to google vision gives 400 error

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?