Web :如何强制记录到60 API？
摘要
- API谈到
- 上下文
- 问题:实际结果+预期结果
- 我已经尝试了
- 线索来帮助您帮助我<代码>H 210<代码>H 111最小和可测试的示例:先决条件和步骤，遵循+源代码>H 212
G 213/code>
我说的API
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
语境
我有一个video元素，在不同的src中加载和播放几次。在两个不同的视频之间，发生了一个转换，每个视频都会出现淡入。当一个视频播放的时候，我会在画布上画一个过渡和淡入的画面。
我在画布中画的所有东西都是使用Web记录的。然后下载与此录音相对应的WEBM文件。
问题所在
实际效果
由此产生的WEBM是不稳定的。当我在画布上画的时候，画是流动的。但是，由于记录画布绘画而产生的WEBM是不稳定的。
预期结果
由于记录画布绘图而产生的WEBM必须与画布绘图本身一样流畅。如果不可能得到准确的结果，那么: WEBM必须像画布那样流畅，我们不能说它是干的。
我已经尝试过的
首先，我尝试为媒体记录器的方法work.
Second，设置1ms、16 JS (对应于60 1ms)、100 JS、1000、10000等等的时间片段，但是它没有，我尝试每16 JS调用一次requestData (在简单的JS timeoutlistener中，每16 JS执行一次)，但没有工作。
帮助你帮助我的线索
也许我错了，但我的电脑上可能存在一个物质限制(我有一个没有显卡的HP谱x360，但只有一个小小的图形芯片)，或者我的Chromium上有一个逻辑限制(我的Ubuntu16.04LTS上有81.0.4044.138版本)。
如果你能证实这一点，它就能解决这个问题。如果您能够解释如何处理这个问题，那将是非常好的(的替代解决方案，或者其他的解决方案)。
最小和可测试的示例
先决条件和应遵循的步骤
至少有2个WEBM视频(请记住:我们希望输出一个包含画布绘图的新视频，它本身包含这两个输入视频以及转换和颜色效果等)有一个HTTP服务器和一个名为"index.html“的文件，您将用Chromiumv.81等打开它。在其中复制/粘贴以下源；单击“开始”按钮(不需要单击“停止”按钮)；它将在画布上绘制两个视频，具有过渡和颜色效果，它将记录画布绘图，并将出现一个“下载最终输出视频”，允许您下载输出视频。您将看到它是jerky.In (以下来源)，在名为videos.
的JS数组中复制/粘贴视频路径
资料来源
<html>
<head>
<title>Creating Final Video</title>
</head>
<body>
<button id="start">Start</button>
<button id="stop_recording">Stop recording</button>
<video id="video" width="320" height="240" controls>
<source type="video/mp4">
</video>
<canvas id="canvas" width=3200 height=1608></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var videos = []; // Populated by Selenium
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var video = document.querySelector("video");
startRecording();
$('#start').click(function() {
showSomeMedia(0, 0);
});
function showSomeMedia(videos_counter) {
resetVideo();
if(videos_counter == videos.length) {
$('#stop_recording').click();
return;
} else {
setVideoSrc(videos_counter);
setVideoListener();
videos_counter++;
}
video.addEventListener('ended', () => {
showSomeMedia(videos_counter);
}, false);
}
function resetVideo() {
var clone = video.cloneNode(true);
video.remove();
video = clone;
}
function setVideoSrc(videos_counter) {
video.setAttribute("src", videos[videos_counter]);
video.load();
video.play();
}
function setVideoListener() {
var alpha = 0.1;
video.addEventListener('playing', () => {
function step() {
if(alpha < 1) {
ctx.globalAlpha = alpha;
}
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
requestAnimationFrame(step)
if(alpha < 1) {
alpha += 0.00001;
}
}
requestAnimationFrame(step);
}, false)
}
function startRecording() {
const chunks = [];
const stream = canvas.captureStream();
const rec = new MediaRecorder(stream);
rec.ondataavailable = e => chunks.push(e.data);
$('#stop_recording').click(function() {
rec.stop();
});
rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));
window.setTimeout(function() {
rec.requestData();
}, 1);
rec.start();
}
function exportVid(blob) {
const vid = document.createElement('video');
vid.src = URL.createObjectURL(blob);
vid.controls = true;
document.body.appendChild(vid);
const a = document.createElement('a');
a.download = 'my_final_output_video.webm';
a.href = vid.src;
a.textContent = 'Download the final output video';
document.body.appendChild(a);
}
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2020-05-31 14:01:32
这个问题是通过使用我的游戏笔记本电脑(RoG)解决的，wich有一个很好的图形卡，能够以比我的频谱x360开发笔记本电脑更高的频率记录。
https://stackoverflow.com/questions/62113796
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号