How to Transfer the image capture by web cam to google cloud vision api

In this I am capturing the Image from the Webcam.But I fail to transfer the image to the google cloud vision api.I wanna do the text detection also when the capturing the image and image transfer through the api. Can anybody help out with that problem? This is Webcam code

<script>
    (function() {

        var width = 320; // We will scale the photo width to this
        var height = 0; // This will be computed based on the input stream

        var streaming = false;

        var video = null;
        var canvas = null;
        var photo = null;
        var startbutton = null;
        var data=null;
        
        function startup() {
            video = document.getElementById('video');
            canvas = document.getElementById('canvas');
            photo = document.getElementById('photo');
            startbutton = document.getElementById('startbutton');

            navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: false
                })
                .then(function(stream) {
                    video.srcObject = stream;
                    video.play();
                })
                .catch(function(err) {
                    console.log("An error occurred: " + err);
                });

            video.addEventListener('canplay', function(ev) {
                if (!streaming) {
                    height = video.videoHeight / (video.videoWidth / width);

                    if (isNaN(height)) {
                        height = width / (4 / 3);
                    }

                    video.setAttribute('width', width);
                    video.setAttribute('height', height);
                    canvas.setAttribute('width', width);
                    canvas.setAttribute('height', height);
                    streaming = true;
                }
            }, false);

            startbutton.addEventListener('click', function(ev) {
                takepicture();
                ev.preventDefault();
            }, false);

            clearphoto();
            quickstart()
        }


        function clearphoto() {
            var context = canvas.getContext('2d');
            context.fillStyle = "#AAA";
            context.fillRect(0, 0, canvas.width, canvas.height);

            data = canvas.toDataURL('image/png');
            photo.setAttribute('src', data);
        }

        function takepicture() {
            var context = canvas.getContext('2d');
            if (width && height) {
                canvas.width = width;
                canvas.height = height;
                context.drawImage(video, 0, 0, width, height);

                data = canvas.toDataURL('image/png');

                photo.setAttribute('src', data);
            } else {
                clearphoto();
            }
        }

        
        window.addEventListener('load', startup, false);
    })();
    </script>

I wanna add that code in the webcam portion.

// Imports the Google Cloud client library
async function quickstart() {
        process.env.GOOGLE_APPLICATION_CREDENTIALS = "/home/manu/Cap/Real_Time/VisionAPI_DEMO/ServiceAccountToken.json"

        const vision = require('@google-cloud/vision');


        const client = new vision.ImageAnnotatorClient();

        // Performs text detection on the local file
        const [result] = await client.textDetection("image/test.jpg");
        const detections = result.textAnnotations;
        const [ text, ...others ] = detections
        console.log(`Text: ${ text.description }`);
    } 
quickstart()

from How to Transfer the image capture by web cam to google cloud vision api