title: How to Transfer the image capture by web cam to google cloud vision api
body: <p>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</p>
  <pre><code>&lt;script&gt;
      (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(&quot;An error occurred: &quot; + 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 = &quot;#AAA&quot;;
              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 &amp;&amp; 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);
      })();
      &lt;/script&gt;
  </code></pre>
  <p>I wanna add that code in the webcam portion.</p>
  <pre><code>// Imports the Google Cloud client library
  async function quickstart() {
          process.env.GOOGLE_APPLICATION_CREDENTIALS = &quot;/home/manu/Cap/Real_Time/VisionAPI_DEMO/ServiceAccountToken.json&quot;
  
          const vision = require('@google-cloud/vision');
  
  
          const client = new vision.ImageAnnotatorClient();
  
          // Performs text detection on the local file
          const [result] = await client.textDetection(&quot;image/test.jpg&quot;);
          const detections = result.textAnnotations;
          const [ text, ...others ] = detections
          console.log(`Text: ${ text.description }`);
      } 
  quickstart()
  </code></pre>