javascript - 将网络摄像头视频渲染到 Canvas 时超出最大调用堆栈大小

Question

我正在开发一个应用程序，其中 session 中有两个参与者，他们可以进行视频通话。基本上会有3个视频流。其中两名参与者和一名将共享屏幕。这部分已经可以工作，但是当用户单击录制按钮时，这 3 个视频应该输入到 Canvas 中，并且在暂停时应该暂停。我试图在 Canvas 中仅渲染一个视频以测试它是否有效“RangeError:绘制函数超出了最大调用堆栈大小”。

const draw = (canva, context) => {
    console.log('localVideoRef', localVideoRef)
    context.drawImage(localVideoRef.current, 0, 0, canva.clientWidth, canva.clientHeight);
    console.log('context draw', context)
    requestAnimationFrame(draw(canva, context))
  }
  const handleRecord = () => {
    const canva = document.createElement('canvas');
    canva.id = "canvas";
    const context = canva.getContext("2d");
    canva.width = canva.clientWidth;
    canva.width = canva.clientHeight;
    console.log('canva', context, canva);
    console.log('room', room);
    draw(canva, context);
    requestAnimationFrame(draw(canva, context)) # above error is shown here
    console.log('canva after drawing image', canva);
  }

错误在这一行requestAnimationFrame(draw(canva, context))

更新(停止记录后仍持续运行)

let canva, context = null;

function App(props) {
  const [record, setRecord] = React.useState('');
  React.useEffect(() => {
    canva = document.createElement('canvas');
    canva.id = "canvas";
    context = canva.getContext("2d");
    canva.width = canva.clientWidth;
    canva.width = canva.clientHeight;
  }, [])
  React.useEffect(() => {
    console.log('record', record);
    if (record === 'start' || record === 'resume') {
      requestAnimationFrame(() => draw(canva, context));
      console.log('canva after paint video', canva);
    } else {
      // when pausing or stoping recording, the painting should not be done. 
      console.log('this is the canva after paused or stopped', canva)
    }

  }, [record])
  const draw = (canva, context) => {
    context.drawImage(localMediaRef.current, 0, 0, canva.clientWidth, canva.clientHeight);
    console.log('painting');
    requestAnimationFrame(() => draw(canva, context));
  }
  const handleRecord = (type) => {
    setRecord(type)
  }
  render {
    return (

    )
  }
}

Answer 1

requestAnimationFrame(draw(canva, context))

这段代码将立即调用draw，然后无论draw的返回值是什么，都将被传递到requestAnimationFrame中。在绘制内部，您重复此过程，立即调用绘制，绘制立即调用绘制等。

相反，您希望将函数传递到请求动画帧中，如下所示:

requestAnimationFrame(() => draw(canva, context));