如何修复当我尝试查看浏览器上录制的视频时发生的 err_request_range_not_satisfiable 错误？

Question

我是 React 新手，我正在尝试开发一个具有视频录制功能的 Web 应用程序。这是我的代码： 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;

该程序直到最近才按预期运行。目前，它不起作用，当我尝试使用“重播”按钮重播录制的视频时，浏览器控制台返回错误： 网络::ERR_REQUEST_RANGE_NOT_SATISFIABLE。 当读取 blob 大小时，它为零。有人可以帮忙解决这个问题吗？

Answer 1

我也有同样的问题。事实证明，在使用带有 no-cors 的获取操作后，我的 blob 大小为 0，因此视频抱怨范围。