为什么画布上有视频和图像时canvas.captureStream()会耗尽我的CPU?

上下文

我有一个画布,上面有一个用户的视频和一个图像。画布以30 fps的速度循环运行以重新绘制视频和图像。这个设置占用了大约25%的CPU,我同意。我的录制函数是在Redux Thunk中调用的,它在录制开始和结束时获得调度。

我的配置是Windows 10,8GB内存,运行最新版本的Chrome。一切都在客户端运行。

守则

下面的代码是我用来录制画布的代码。

export const startRecordingStream =(audioStream) => {
  return (dispatch) => {
    const canvas = window.document.getElementById('canvas');
    let recordStream;

    if ('captureStream' in canvas) {
        recordStream = canvas.captureStream(25);
    } else if ('mozCaptureStream' in canvas) {
        recordStream = canvas.mozCaptureStream();
    } else if (!options.disableLogs) {
        console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
    }

    recordStream.addTrack(audioStream.getAudioTracks()[0]);
    let recorder = null;
    const options = {mimeType: 'video/webm;codecs=h264'};
    try {
     recorder = new MediaRecorder(recordStream, options);
    } catch (e){
      console.error('Exception while creating MediaRecorder', + e)
    }
    recorder.start();
    recorder.chunks = [];
    recorder.ondataavailable = (event) => {
      event.data.size &&  event.currentTarget.chunks.push(event.data)
    }
    recorder.onpause = event => {
      console.log('paused', event)
    }
    recorder.onresume = event => {
      console.log('resume', event)
    }
    recorder.onstop = function(event) {
      dispatch({
          type: "STOP_RECORDING",
          payload: event
        });
    }
      dispatch({
            type: "START_RECORDING",
            payload: recorder
          });   
   }
  }

问题

如果画布是1080p宽的,并且有一个视频和图像不断地在其中循环,那么CPU最大化是正常的吗?