Question

我正在研究一个更高阶的组件，它将提供使用MediaRecorder API捕获媒体的功能。但是，当我尝试使用捕获的视频（以传递给createObjectURL的Blob的形式）时，出现了错误ERR_REQUEST_RANGE_NOT_SATISFIABLE。当我控制台记录传递给包装组件的Blob时，它的长度为0。我在代码的末尾包含了我的代码。

为了诊断问题，我尝试了以下测试：

控制台在handleDataAvailable中记录newChunks会记录正确的值（即[Blob]）。
我添加了React.useEffect(() => console.log(chunks), [chunks]);，以查看是否实际上正在更新块。这还会导致记录正确的值（即[Blob]）。
我添加了React.useEffect(() => console.log(captured), [captured]);以便查看捕获的内容是否正在更新。这会导致记录大小为0的Blob。
在handleStop中，我管理日志块和通过组合块创建的Blob。这将导致一个空数组和一个大小分别为0的Blob。

这使我相信handleDataAvailable正确地将每个块添加到了chunks数组，但是以某种方式在运行handleStop时清空了该数组。

有人看到造成这种情况的原因吗？

代码：

import React from 'react';

import { getUserMedia, getConstraints } from '../../utils/general';

const withMediaCapture = (WrappedComponent, recordingType, facingMode, deviceID) => {
  const constraints = getConstraints(recordingType, facingMode, deviceID);

  const type = recordingType === 'audio'
    ? 'audio/ogg; codecs=opus'
    : 'video/webm; codecs=vp9';

  return props => {
    const [mediaStream, setMediaStream] = React.useState(undefined);
    const [mediaRecorder, setMediaRecorder] = React.useState(undefined);
    const [isRecording, setIsRecording] = React.useState(false);
    const [captured, setCaptured] = React.useState(undefined);
    const [chunks, setChunks] = React.useState([]);

    // On mount, get the mediaStream:
    const setupStream = () => {
      getUserMedia(constraints)
      .then(setMediaStream)
      .catch(error => {/* TODO: Handle error */});
    };
    React.useEffect(setupStream, []);

    // Once we have gotten the mediaStream, get the mediaRecorder:
    const handleDataAvailable = ({ data }) => {
      const newChunks = [...chunks, data];
      setChunks(newChunks);
    };
    const handleStop = foo => {
      const blob = new Blob(chunks, { type });
      setCaptured(blob);
      setChunks([]);
    }
    const getMediaRecorder = () => {
      mediaStream && setMediaRecorder(Object.assign(
        new MediaRecorder(mediaStream),
        {
          ondataavailable: handleDataAvailable,
          onstop: handleStop,
        },
      ));
    }
    React.useEffect(getMediaRecorder, [mediaStream]);

    const toggleRecording = () => {
      isRecording
        ? mediaRecorder.stop()
        : mediaRecorder.start();
      setIsRecording(!isRecording);
    };

    return <WrappedComponent {...{ preview: mediaStream, captured, toggleRecording, isRecording, ...props }} />;
  };
};

const VideoCaptureDemo = ({ preview, captured, toggleRecording, isRecording }) => {
  const previewRef = React.useRef(null);
  const capturedRef = React.useRef(null);

  const setupPreview = () => {
    previewRef.current.srcObject = preview;
  };
  React.useEffect(setupPreview, [preview]);

  const setupCaptured = () => {
    const url = captured && window.URL.createObjectURL(captured);
    capturedRef.current.src = url;
  };
  React.useEffect(setupCaptured, [captured]);

  return (
    <div>
      <video ref={previewRef} autoPlay={true} muted={true} />
      <video ref={capturedRef} controls />
      <button onClick={toggleRecording}>
        {isRecording ? 'Stop Recording' : 'Start Recording'}
      </button>
    </div>
  );
};

export default withMediaCapture(VideoCaptureDemo, 'videoAndAudio');

Answer 1

handleStop和handleDataAvailable都关闭了初始的空chunks数组。如果handleDataAvailable被多次调用，则较早的块将丢失，并且handleStop将始终根据空块数组创建Blob。由setChunks引起的重新渲染将导致创建handle方法的新版本，但是MediaRecorder仍将使用创建MediaRecorder时的版本。

您可以使用functional updates来修复handleDataAvailable，但是为了修复handleStop，我认为最好切换到使用useReducer（由reducer管理{{1 }}和chunks），这样您就可以调度一个动作，然后减速器可以访问当前块并适当地创建Blob。

使用React挂钩时MediaRecorder的中间数据丢失

1 个答案: