javascript — запись видеопотока с веб-камеры и загрузка больших двоичных объектов на сервер.

поэтому у меня есть сайт, который может записывать видеопоток с веб-камеры пользователя и конвертировать его в блоб, используя getUserMedia(), Теперь я хочу отправить этот BLOB-объект на сервер, чтобы видео могло быть сохранено и обработано. У меня есть trobule отправка файла BLOB-объекта через AJAX, я пытался использовать как метод formData + XMLHttpRequest (), а также чистый AJAX. Для моего приложения очень важно, чтобы пользователи могли записывать видео и немедленно отправлять это видео на мой сервер.

Любая помощь будет принята с благодарностью.

так что HTML:

    <div class="demo">
<video id="preview" autoplay width="400" height="300"></video>
<video id="recording" width="400" height="300" style="display:none;" controls></video>

<div class="progress">
<div class="progress-bar"></div>
<span>01:00</span>
</div>
<button class="record">Record</button>
<button class="upload">Upload</button>
</div>

Соответствующие функции JS:

function captureVideo () {
const preview = document.querySelector('video#preview');
const recording = document.querySelector('video#recording');
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
preview.srcObject = stream;
preview.captureStream = preview.captureStream || preview.mozCaptureStream;
return new Promise(resolve => preview.onplaying = resolve);
}).then(() => {
let recorder = new MediaRecorder(preview.captureStream());
let data = [];

recorder.ondataavailable = event => data.push(event.data);
recorder.start();
log(recorder.state + " for " + (60000/1000) + " seconds...");

let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});

$('button.stop').click(function () {
recorder.stop();
});

return Promise.all([ stopped ]).then(() => data);
}).then ((recordedChunks) => {
let recordedBlob = new Blob(recordedChunks, {
type: "video/webm"});
recording.src = URL.createObjectURL(recordedBlob);
$('#preview').hide();
$('#recording').show();
log("Successfully recorded " + recordedBlob.size + " bytes of " +
recordedBlob.type + " media.");
$('button.upload').click(function() {
sendVideoToAPI(recordedBlob);
});
}).catch(log);
}
function sendVideoToAPI (blob) {

let fd = new FormData();
let file = new File([blob], 'recording');

fd.append('data', file);
console.log(fd); // test to see if appending form data would work, it didn't this is completely empty.


let form = new FormData();
let request = new XMLHttpRequest();
form.append("file",file);
request.open("POST",  "/demo/upload", true);
request.send(form); // hits the route but doesn't send the file
console.log(request.response) // returns nothing

// I have also tried this method which hits the route and gets a response however the file is not present in the request when it hits the server.
// $.ajax({
//     url: Routing.generate('upload'),
//     data: file,
//     contentType: false,
//     processData: false,
//     error: function (res) {
//         console.log(res);
//     },
//     success: function(res) {
//         console.log(res);
//     }
// });
}