javascript - 如何获取纵横比为 1 :1 and maximum available resolution 的网络摄像头流

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())，以您想要的任何裁剪方式将该视频绘制到 Canvas 上.从那里，使用 CanvasCaptureMediaStream 将编辑后的视频作为流返回，您可以在 WebRTC 通话中使用它。