How to fix err_request_range_not_satisfiable error which occurs when I try to view a video recorded on the browser?
Mia Lopez 
I am new to react and I am trying to develop a web application with video recording capabilities. This is my code:App.js:
import ScreenRecording from './Recorder'
function App() { return ( <div className="App"> <header className="App-header"> <ScreenRecording /> </header> </div> );
}
export default App;Recorder.js:
import './Recorder.css'
import React from 'react';
import ReactDom from 'react-dom';
import axios from "axios";
const ScreenRecording = () => { var strName = null; var strEmail = null; const video = document.getElementById('video'); async function captureMediaDevices(mediaConstraints = { video: { width: 1280, height: 720 }, audio: { echoCancellation: true, noiseSuppression: true, sampleRate: 44100 } }) { const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints); video.src = null; video.srcObject = stream; video.muted = true; return stream; } let recorder = null; var strFile = null; var webcamblob = null; function stopRecording() { recorder.stream.getTracks().forEach(track => track.stop()); } async function recordVideo() { const stream = await captureMediaDevices(); video.src = null; video.srcObject = stream; video.muted = true; video.autoplay = true; recorder = new MediaRecorder(stream); let chunks = []; recorder.ondataavailable = event => { if (event.data.size > 0) { chunks.push(event.data); } } recorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }) chunks = []; webcamblob = blob; const blobUrl = URL.createObjectURL(blob); strFile = blobUrl; } recorder.start(200); } const previewRecording = () => { video.srcObject = null; video.src = strFile; video.muted = false; video.autoplay = true; } const uploadRecording = () => { strName = document.getElementById("name").value; strEmail = document.getElementById("email").value; const formData = new FormData(); // Update the formData object formData.append("file2upload", webcamblob); formData.append("email", strEmail); formData.append("name", strName); // Request made to the backend api // Send formData object axios.post("", formData); cleardata(); alert("Upload success!"); }; const cleardata = () => { URL.revokeObjectURL(strFile); webcamblob = null; } return( <center> <div> <button onClick={recordVideo}>Record video</button> <button onClick={stopRecording}>Stop recording</button> <button onClick={previewRecording}>Replay</button> <button onClick={uploadRecording}>Upload and close</button> </div> </center> )
}
function Video(){ return (<div className="Display"> <center> <video id='video' className="Display-video" width="800" height="600" autoplay muted></video> </center> </div>)
}
ReactDom.render( <React.StrictMode> <Video /> </React.StrictMode>, document.getElementById('vid')
);
export default ScreenRecording;The program was working as expected until recently. Presently, It is not working and when I try to replay the recorded video using the "Replay" button, the browser console is returning the error:net::ERR_REQUEST_RANGE_NOT_SATISFIABLE. When the blob size is read, it is zero. Can someone please help to fix the issue?
3 Reset to default
