Question

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

我创建一个画布，然后将录制的帧推送到它。问题是，当我录制视频后播放视频时播放速度太快。一段10秒长的视频播放时间为2秒。我已经检查了playbackRate被设置为1.我将录制内容保存到数据库中并将其加速，因此它与浏览器videoplayer无关。

我对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，留在它自己的身上，你无法分辨它一直在调用回调，它可以高达60fps。

还在看你的代码，我不知道你是如何得出结论帧率= 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;
};

录制速度javascript

1 个答案: