Trying to screenshot from a webcam stream but not capturing the stream

Question

I'm attempting to create a program to capture a screenshot every day at the same time for water clarity comparison. The problem is it's saving a screenshot but not including the web stream in the shot. How can I get the screengrab to get the still from the web feed?

 <img style="max-height: 700px !important" src="https://relay.ozolio.com/pub.api?cmd=poster&oid=CID_HQKO00000499">
  </img>


  <a id="button" class="btn btn-success">Take Whole Page</a>

  </div>
  <!-- Bootstrap Script file -->
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"
    integrity="sha256-c3RzsUWg+y2XljunEQS0LqWdQ04X1D3j22fd/8JCAKw=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"
    integrity="sha256-FPJJt8nA+xL4RU6/gsriA8p8xAeLGatoyTjldvQKGdE=" crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(document).ready(function () {


      document.getElementById("button").addEventListener("click", wholePage);




      function wholePage() {
        html2canvas(document.body, {
          onrendered: function (canvas) {
            var img = canvas.toDataURL();
            $("#result-image").attr('src', img).show();

            let today = new Date();

            canvas.toBlob(function (blob) {
              saveAs(blob, (today.toString()) + ".png");
            });
          }
        });
        return false;
      }
    });


  </script>