Скорость записи javascript

Question

В настоящее время я создаю проект, поддерживающий запись видео через мой сайт.

Я создаю холст, а затем нажимаю на него записанные кадры. Проблема в том, что когда я воспроизвожу видео после его записи, он играет слишком быстро. Воспроизведение видео продолжительностью 10 секунд длится примерно 2 секунды. Я проверил, что для параметра playbackRate установлено значение 1. Я сохраняю запись в базе данных и ее ускорение там, поэтому она не имеет никакого отношения к видеоплееру браузеров.

Я относительно новый для AngularJS и javascript, поэтому мне жаль, если я оставил что-то важное.

Я попытался изменить много значений взад и вперед, но я не могу найти причину проблемы. Есть идеи?

Вот код для записи видео:

scope.startRecording = function() { 
      if (mediaStream) { 
       var video = $('.video-capture')[0]; 
       var canvas = document.createElement('canvas'); 
       canvas.height = video.videoHeight; 
       canvas.width = video.videoWidth; 
       ctx = canvas.getContext('2d'); 
       var CANVAS_WIDTH = canvas.width; 
       var CANVAS_HEIGHT = canvas.height; 

       function drawVideoFrame(time) { 
        videoRecorder = requestAnimationFrame(drawVideoFrame); 
        ctx.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
        recordedFrames.push(canvas.toDataURL('image/webp', 1)); 
       } 

       videoRecorder = requestAnimationFrame(drawVideoFrame); // Note: not using vendor prefixes! 
       scope.recording = true; 
      } 

     }; 
     scope.stopRecording = function() { 
      cancelAnimationFrame(videoRecorder); // Note: not using vendor prefixes! 

      // 2nd param: framerate for the video file. 
      scope.video.files = Whammy.fromImageArray(recordedFrames, 1000/30); 
      recordedVideoBlob = Whammy.fromImageArray(recordedFrames, 1000/30); 
      scope.videoMode = 'viewRecording'; 
      scope.recording = false; 
     }; 

Answer 1

Я предполагаю, что преступник requestAnimationFrame, оставили по себе, вы не можете сказать, в какие интервалах он продолжает называть обратный вызов, это может быть как высокими как 60 кадров в секунду.

также глядя на свой код, я не могу сказать, как вы пришли к выводу, что частота кадров = 1000/30

мой совет (по крайней мере, для Вашего случая) будет идти с $interval, вы можете сделать что-то вроде :

scope.frameRate = 10, videoInterval; // the amount I consider ideal for client-side video recording. 

scope.startRecording = function() { 
    if (mediaStream) { 
     var video = $('.video-capture')[0]; 
     var canvas = document.createElement('canvas'); 
     canvas.height = video.videoHeight; 
     canvas.width = video.videoWidth; 
     ctx = canvas.getContext('2d'); 
     var CANVAS_WIDTH = canvas.width; 
     var CANVAS_HEIGHT = canvas.height; 

     function drawVideoFrame() { 
      ctx.drawImage(video, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 
      recordedFrames.push(canvas.toDataURL('image/webp', 1)); 
     } 
     videoInterval = $interval(drawVideoFrame, 1000/scope.frameRate); 
     scope.recording = true; 
    } 
}; 

scope.stopRecording = function() { 
    $interval.cancel(videoInterval); 

    // 2nd param: framerate for the video file. 
    scope.video.files = Whammy.fromImageArray(recordedFrames, scope.frameRate); 
    recordedVideoBlob = Whammy.fromImageArray(recordedFrames, scope.frameRate); // you can chage this to some file copy method, so leave out the duplicate processing of images into video. 
    scope.videoMode = 'viewRecording'; 
    scope.recording = false; 
};