componentDidMount() {
        navigator.mediaDevices
            .getUserMedia({ video: true})
            .then(stream => { this.handleSuccess(this.videoTag.current.srcObject = stream) })
            .catch(console.log);

    }


handleSuccess(stream) {
        console.log('st',stream)
        media_recorder = new MediaRecorder(stream);
            media_recorder.start(10000);
            media_recorder.addEventListener('dataavailable', function (e) {
                console.log('e.data', e.data)
                var reader = new FileReader();
                var base64data
                reader.readAsDataURL(e.data);
                reader.onload = function () {
                    base64data = reader.result;
                    const base64EncodedData = base64data.split(',')[1];
                    const body = JSON.stringify({
                        data: base64EncodedData
                    });
                    fetch('http://localhost:3090/api/recording', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body
                    }).then(res => {
                        return res.json()
                    }).then(json => console.log(json));                    
                }
            });
}

from the webcam i am continuously generating blob at regular intervals then i am encoding to base64 and decoding at server level which helps me to generate mp4 files in local storage but the issue was when i started the playing those generated files only initial file is playing, from second file onward it is not playing can any one help to solve this issue