记录速度javascript
记录速度javascript
提问于 2015-03-30 20:26:45
我目前正在创建一个项目，通过我的网站支持视频录制。
我创建了一个画布，然后将录制的帧推送到其中。问题是，当我在录制视频之后播放视频时，它播放得太快了。一个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;
};回答 1
Stack Overflow用户
发布于 2015-03-31 10:20:22
我猜罪魁祸首是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;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29346234
复制相关文章
相似问题
腾讯云开发者
