如何将网络摄像头捕获的图像传输到谷歌云视觉 API

Question

在这里，我正在从网络摄像头捕获图像。但是我无法将图像传输到谷歌云视觉 api。我还想在通过 api 捕获图像和图像传输时进行文本检测。 有人可以帮忙解决这个问题吗？ 这是网络摄像头代码

<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>

我想在网络摄像头部分添加该代码。

// 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()