почему canvas.captureStream () максимально загружает мой процессор, когда у меня есть видео и изображение на холсте? - PullRequest
Новая
       12

почему canvas.captureStream () максимально загружает мой процессор, когда у меня есть видео и изображение на холсте?

0 голосов
/ 12 ноября 2018

Контекст

У меня есть холст с видео пользователя и изображение. Холст работает в цикле, чтобы перекрасить видео и изображение со скоростью 30 кадров в секунду. Эта настройка занимает около 25% процессорного времени, с чем у меня все в порядке. Моя функция записи вызывается в Redux Thunk, который получает диспетчер, когда запись начинается и когда запись заканчивается.

Моя конфигурация - Windows 10 с 8 ГБ оперативной памяти и работает в последней версии 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 и на нем непрерывно воспроизводятся видео и изображение?

...