How to fix err_request_range_not_satisfiable error which occurs when I try to view a video recorded on the browser?

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("https://xyz.php", 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?

Recommended topics

Hot tags