Question

上下文

我有一个画布，其中包含用户的视频以及图像。画布循环运行，以30 fps的速度重新绘制视频和图像。这个设置占用了大约25％的CPU，我认为可以。我的录音功能在Redux Thunk中被调用，当录音开始和录音结束时，它会得到调度。

我的配置是Windows 10，具有8GB的RAM，并在最新版本的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
          });   
   }
  }

问题

运行此功能的那一刻，CPU开始耗尽。

问题

考虑到画布为1080p宽，并且视频和图像不断循环遍历，这对我的CPU来说是正常的吗？

当我在画布上有视频和图像时，为什么canvas.captureStream（）使我的CPU耗尽？

0 个答案: