async + await + fetch + RecordRTC how to sync to server while recording (how to create a stack or waiting queu….)

THIS QUESTION IS ABOUT : finding a way to “stack” or create a waiting or queue…

NOTE : I did successful streams (webcam to server) but clogs very fast….

you can test it here : https://www.stubfees.com/templates/tests_ubox_slice/streamrtc3.php if you test with chrome, you’ll see jpg periodically of the mediarecorder sent blobs…

I have a javascript code to use mediaRecorder

*** FULL CODE HERE : https://github.com/jintor/stream_mediarecorder/blob/main/recorder.js

mediaRecorder.ondataavailable = handleDataAvailable;

mediaRecorder.start(3000); to send a portion every x seconds

a handleDataAvailable that takes the blob and convert to uint8

function handleDataAvailable(event) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(event.data); 
    reader.onloadend = async function(event) { 
        let arrayBuffer = reader.result; 
        let uint8View = new Uint8Array(arrayBuffer); 
        stubchunks(uint8View,order); // SLICE AND AJAX ASYNC AWAIT FETCH to send to server
        order += 1; 
    }
}

because it’s a uint8 I can slice it in smaller parts… I can receive at server side and save arrays in .txt than recombine all .txt into an array and with php pack I can reconvert the uint8 to binary.

**** NOTE : on chrome with vp9 => ffmpeg can easily reconvert each segments 😉

**** NOTE : on firefox with vp8 => ffmpeg can only reconvert the first segment

**** NOTE : on safari with any codec => I think async + await clogs everything and safari cannot handle sending anything 🙁

---

——— ISSUE : await + async + fecth seems to send,send,send without any waiting stack or queu…. after a few minutes the browser slowsdown……

so how can I create a waiting stack ?

List of possible approachs ?

• save in indexedDB and do a background sync with a worker.js ?

or any suggestions on implementing a waiting list ?