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

Question

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

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

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

Answer 1

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

您所要做的就是自己裁剪并制作自己的流。 您可以通过将视频的srcObject设置为 getUserMediaStream，然后每一帧(使用 requestAnimationFrame()(以您想要的任何裁剪方式将该视频绘制到画布上来做到这一点。 从那里，使用CanvasCaptureMediaStream将编辑后的视频作为流返回，您可以在WebRTC调用中使用。