如何获得宽高比为1：1和最大可用分辨率的网络摄像头流

Question

基本上问题在于标题。这是关于WebRTC和getUserMedia的功能。类似的问题在这里：How to keep 1:1 aspect ratio video all the time in WebRTC。但在我的情况下，我需要使用MediaRecorder录制流，只是用css裁剪视频元素是不够的。 我对getUserMedia约束感到有点困惑。有aspectRatio参数，但我没有管理如何用它实现所需的结果。对我有用的是以这种方式定义约束：

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

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

Answer 1

并非所有相机都支持所有宽高比。 1:1肯定是一个古怪的长宽比。

你要做的就是做自己的裁剪并制作自己的流。您可以通过将视频的srcObject设置为getUserMediaStream，然后每一帧（使用requestAnimationFrame()）将该视频绘制到画布上，以您想要的任何裁剪方式完成此操作。从那里开始，使用CanvasCaptureMediaStream将已编辑的视频作为可在您的WebRTC调用中使用的流发回。