Передать Blob через ajax на сервер

Здравствуйте, пытаюсь передать запись видео на сервер и там сохранить его, но почему-то на сервере сохраняется пустой файл.

JS код:
navigator.mediaDevices.enumerateDevices().then((info)=>{console.log(info)});
let video=document.querySelector("#video");
let canvas=document.querySelector("#canvas");
let context=canvas.getContext("2d");
navigator.mediaDevices.getUserMedia({video:true, audio:true}).then((stream)=>{
video.srcObject=stream;
video.play();
console.log(stream);
let mediaRecorder=new MediaRecorder(stream);
console.log(mediaRecorder);
document.querySelector("#start").addEventListener("click", function(){
mediaRecorder.start()
});

let videoChunk=[];
mediaRecorder.addEventListener("dataavailable",function(event){
videoChunk.push(event.data)

});

mediaRecorder.addEventListener("stop",function(){
let videoBlob=new Blob(videoChunk, {type:"video/mp4"});
console.log(videoBlob)
let videoURL=URL.createObjectURL(videoBlob);
console.log(videoURL);
let video2 = document.createElement('video');
video2.src = videoURL;
video2.controls = true;
video2.autoplay = false;
document.querySelector("#video2").appendChild(video2);
document.querySelector("#save").href=videoURL;
document.querySelector("#save").download="record.mp4";
console.log(videoChunk);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index2.php', true);
xhr.setRequestHeader('Content-type', 'video');
xhr.onload = function(e) {
console.log('Sent');
};
xhr.send(videoBlob);
videoChunk = [];
});
document.querySelector("#stop").addEventListener('click', function(){
mediaRecorder.stop();

});

});


document.querySelector("#snap").onclick=(()=>{
context.drawImage(video, 0, 0, 600, 500);
})


PHP код:
<?php
$a=$_POST["videoBlob"];
$f=fopen("./files/first.mp4", "w");
if ($f) {
echo "создан";
fwrite($f, $a);
fclose($f);

}


?>