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

问题描述：

基本上问题出现在标题中。这是关于WebRTC和getUserMedia功能。类似的问题在这里：How to keep 1:1 aspect ratio video all the time in WebRTC。但在我的情况下，我需要使用MediaRecorder录制流，只是使用CSS剪裁视频元素是不够的。我对getUserMedia约束有点困惑。有aspectRatio参数，但我没有管理如何实现所需的结果。什么工作对我来说是这样定义的约束：如何获得长宽比为1：1和最大可用分辨率的网络摄像头流

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

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

[如何在WebRTC中始终保持1：1宽高比视频]可能的副本（https://stackoverflow.com/questions/36961228/how-to-keep-11-aspect-ratio-video-all -the-time-in-webrtc） – jib

@jib是的，这个问题是相似的，但我需要一个流来记录它使用MediaRecorder。只用css裁剪视频元素是不够的。 –

'aspectRatio'尚未在Chrome或Firefox中实现。但是，听起来像您期望getUserMedia（）为您重新调整摄像头输出。并非所有浏览器都这样做，而是让您发现相机的本机模式，因此可能会因OverconstrainedError而失败。 – jib

答

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

你所要做的就是做自己的剪裁并制作自己的流。您可以通过将视频的srcObject设置为getUserMediaStream，然后将每个帧（使用requestAnimationFrame()），将该视频以任何裁剪方式绘制到画布上来实现此目的。从那里，使用CanvasCaptureMediaStream将编辑后的视频作为可用于WebRTC呼叫的流传回。

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

相关推荐