录制速度javascript

Recording speed javascript

本文关键字：javascript 速度      更新时间：2023-09-26

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

我创建了一个画布，然后将录制的帧推到画布上。问题是，当我在录制完视频后播放视频时，它播放得太快了。一个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;
        };

我猜罪魁祸首是requestAnimationFrame，它自己留下来，你无法判断它以什么间隔不断调用回调，它可能高达60fps。

同样看看你的代码，我不知道你是如何得出帧速率=1000/30 的结论的

我的建议（至少对于你的情况）是使用CCD_ 3，你可以做一些类似的事情：

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;
};
相关文章：