title: JavaScript small image on data url
body: <p>I am trying to capture the users webcam and upload it to my backend. I found out how to generate a data url (e.g. data:image/jpeg;base64,/9j/4A...) from the webcam stream. But the data url is always generated in a 300x150 size. This is way to small to us this image. Do you know how to do it better? I am a javascript newbe.</p>
  <pre><code> &lt;script type=&quot;text/javascript&quot;&gt;
    var video = document.querySelector(&quot;#videoElement&quot;);
    var photo_button = document.querySelector(&quot;#photo_button&quot;);
    const canvas = document.createElement('canvas');
  
    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (error) {
          console.log(&quot;Something went wrong!&quot;);
        });
    }
  
    photo_button.addEventListener('click', function() {
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
          let image_data_url = canvas.toDataURL('image/jpeg');
  
          // data url of the image
          console.log(image_data_url);
    });
  &lt;/script&gt;
  </code></pre>