以恒定的 FPS 记录“原始”网络摄像头 stream，不使用 canvas

Question

我创建了一个 web (Vue.js) 和桌面应用程序 (Tauri)，它使用 getUserMedia 记录我相机的视频 stream。 摄像头分辨率为 4K，被 CamLink 识别为网络摄像头。 最后，对于录音部分，我使用了 MediaRecorder。 要是这么简单就好了……

图片质量非常好，但我很快发现它没有以一致的帧率记录。 视频有时是 29.042 fps，然后是 30.512 fps，等等。这对我以后要做的事情来说是个大问题。 当我在 After Effects 中打开视频时，它会抽搐。

我在 canvas 的帮助下实施了@kaiido解决方案，但我想知道是否有解决方案可以在没有 canvas 的情况下执行此操作，例如仅使用 MediaRecorder，因为它会降低应用程序的性能。

我不想操纵视频。 我想在恒定的帧速率下获得尽可能好的质量。

Answer 1

帧速率应在输入MediaStreamTrack上指定，例如在对getUserMedia(constraints)的调用中。

const constraints = {
  video: { frameRate: { exact: 30 } }
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);

尽管像这样限制性太强的约束很有可能不受支持，因此您可能更愿意请求一个初始ideal值，然后尝试通过MediaStreamTrack#applyConstraints()强制一个精确值。

const [track] = stream.getVideoTracks();
try {
  await track.applyConstraints(constraints);
}
catch(err) {
  // maybe try again with another value,
  // e.g the one from track.getSettings().frameRate
}