将网络摄像机视频渲染到画布时，超出了最大调用堆栈大小

Question

我正在开发一个应用程序，其中将有两个参与者在一个会话中，他们可以进行视频通话。基本上，将有3个视频流。两名参与者和一名参与者将共享屏幕。这部分已经在工作了，但当用户单击录制按钮时，这3个视频应该在画布中输入，当暂停时，应该暂停。我尝试在画布中只渲染一个视频，以测试它是否有效“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);
  }

错误出在这条行请求动画帧（绘制（canva，上下文））

更新（即使在停止记录后仍继续运行）

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

嗨，这是因为您已经在Draw（）代码中调用了Request estAnimationFrame（）。因此该函数已经是递归的。通过调用DrawANDRequest estAnimationFrame（Draw），您将同时调用2个无限递归函数。只需删除Draw（），它就可以工作了：

const draw = (canva, context) => {
    console.log('localVideoRef', localVideoRef)
    context.drawImage(localVideoRef.current, 0, 0, canva.clientWidth, canva.clientHeight);
    console.log('context draw', context)
    requestAnimationFrame( (timestamp)=>draw(canva, context) ); // EDITED AS PER @Nicholas' answer.
}
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);        //just remove this line
    requestAnimationFrame( (timestamp)=>draw(canva, context) ) // EDITED AS PER @Nicholas' answer.
    console.log('canva after drawing image', canva);
}

有关requestAnimationFrame的详细信息，请参阅此文档。请注意，在他们的示例中，requestAnimationFrame（step）被调用，但step（）没有被调用。

更新：正如@Nicholas所指出的，您需要将绘图功能包装在另一个功能中。如上所示。

至于为什么会导致最大调用大小超出错误，我其实有点困惑，当我在控制台上测试错误代码Chrome时候，反而得到了这个错误：

未捕获的TypeError:未能对“Window”执行“requestAnimationFrame”:作为参数1提供的回调不是函数。

这实际上在理论上是正确的。将requestAnimationFrame视为类似于setTimeoutsetTimeout使用类似于setTimeout（callback，time）的回调 ；requestAnimationFrame也是如此。

当您传递< code > requestAnimationFrame(draw(canva，context) )时，您基本上是在告诉requestAnimationFrame函数在其代码中的某个位置执行类似于< code>draw(canva，context)()的操作，而不是像您所期望的那样< code>draw(canva，context)。因此，它在我的Chrome控制台上抛出了< code > callback provided is not a function 错误。

但是对于超出最大调用堆栈的错误，我认为您的JavaScript引擎/编译器的请求AnimationFrame捕获错误，忽略它，然后继续按原样调用绘制函数。因此，这基本上可以翻译为：

draw = (canva, context)=>{
    ...
    draw(canva, context) //oh noes
}

这基本上是一个无限运行的递归函数。因此，超过最大调用堆栈错误。

Answer 2

requestAnimationFrame(draw(canva, context))

这段代码将立即调用draw，然后draw的返回值将被传递到requestAnimationFrame。在draw中，重复这个过程，立即调用draw，它立即调用drew，等等。

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

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