使用 React hooks 时 MediaRecorder 的中间数据会丢失

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 正确地将每个块添加到块数组中，但不知何故，在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 同时管理chunks 和captured）所以你可以只调度一个动作，然后reducer就可以访问当前的块并适当地创建Blob。