录制速度javascript

我目前正在创建一个项目，通过我的网站支持视频录制

我创建一个画布，然后将录制的帧推送到画布上。问题是，当我在录制后播放视频时，它播放得太快了。一个10秒长的视频在2秒内播放。我已经检查过播放速率设置为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;
        };

---

我猜罪魁祸首是

requestAnimationFrame

，它自己留下来，你无法判断它一直在调用回调的间隔，它可能高达60fps

再看看你的代码，我也说不出你是如何得出帧速率=

1000/30

我的建议（至少对你来说）是， 您可以执行以下操作：

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;
};