记录速度 javascript

Posted 2023-02-25

【中文标题】记录速度 javascript

【英文标题】：Recording speed javascript

【发布时间】：2015-03-30 12:26:45

【问题描述】：

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

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

【参考方案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;
;