Downloading HTML5 Canvas Returns a Transparent File

JavaScript
1

I am attempting to write a file that takes a screenshot of a video WebRTC stream, saves it to a <canvas> tag, and then downloads that data as a png file to the server. So far, I have been able to complete all of those tasks; unfortunately, the png file is currently transparent and has none of the data from the canvas.

The code to take the screenshot is an edited version of the code provided by this Mozilla tutorial.

var width = 640;
    var height = 0;
    var streaming = false;
    var xhttp = new XMLHttpRequest();
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var photoButton = document.getElementById('photoButton');
    var data;

    window.addEventListener('load', function() {
        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);

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

        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');
            }
        }

Furthermore, this is an extra function I have written that makes use of AJAX to download the file:

function sendPicture() {
            xhttp.open("POST", "testSave.php");
            xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhttp.onreadystatechange = function() {
                console.log(xhttp.responseText);
            }
            xhttp.send("imgData=" + data);
        }

The PHP file is also included below:

<?php
$data = $_POST['imgData'];
$file = "uploads/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;
?>

I have confirmed that no errors are occurring in the terminal, and that using setTimeout to delay the download has no effect, so I assume that there is an issue with my AJAX or PHP code.
If I can make anything more clear please let me know.
Thank you!

2

As an added clarification, I have been testing this code locally through XAMPP.