如何解决画布上30 fps,1080p的高质量媒体记录器
我有一个canvas应用程序,该应用程序当前捕获画布的图像并编译一个发送到ffmpeg的视频,该ffmpeg然后输出他们选择的视频格式。问题是它超级慢!不是在视频转换上,而是在实际帧的编译上,您看到我必须暂停视频和动画并拍摄画布的屏幕截图。因此,我不是在考虑截图,而是在考虑使用MediaRecorder和canvas.captureStream。我可以输出视频,但是质量真的很低,并且视频不断掉帧。我需要使帧速率至少为30 fps或更高,并且质量必须很高。这是我的记录功能
async [RECORD] ({state}) {
state.videoOutputURL = null;
state.outputVideo = document.createElement("video");
const videoStream = state.canvas.captureStream(30);
const mediaRecorder = new MediaRecorder(videoStream);
mediaRecorder.ondataavailable = function(e) {
state.captures.push(e.data);
};
mediaRecorder.onstop = function(e) {
const blob = new Blob(state.captures);
state.captures = [];
const videoURL = URL.createObjectURL(blob);
state.outputVideo.src = videoURL;
state.outputVideo.width = 1280;
state.outputVideo.height = 720;
document.body.append(state.outputVideo);
};
mediaRecorder.start();
state.anim.start();
state.video.play();
lottie.play();
state.video.addEventListener("ended",async () => {
mediaRecorder.stop();
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。