如何获得纵横比为 1:1 和最大可用分辨率的网络摄像头流

Question

基本上问题就在标题中。这是关于 WebRTC 和 getUserMedia 功能。类似的问题在这里：如何在 WebRTC 中始终保持 1:1 宽高比视频。但就我而言，我需要使用 MediaRecorder 录制流，仅使用 css 裁剪视频元素是不够的。我对 getUserMedia 约束有点困惑。有 aspectRatio 参数，但我没有管理如何用它实现所需的结果。对我有用的是以这种方式定义约束：

const constraints = {
  audio: true,
  video: {
    width: { exact: 720 },
  }
};

但它不会自动定义最大分辨率。你有什么想法如何以聪明的方式做到这一点吗？

Answer 1

并非所有相机都将支持所有纵横比。 1:1当然是一个奇怪的纵横比。

您需要做的是自己裁剪并制作自己的流。您可以通过将视频设置为srcObjectgetUserMediaStream，然后每一帧（使用requestAnimationFrame()）将该视频以任何您想要的裁剪方式绘制到画布上。从那里，用于CanvasCaptureMediaStream将编辑过的视频作为流返回，您可以在 WebRTC 呼叫中使用该流。