如何使用MediaRecorder()在桌面上录制移动分辨率

Question

我想在移动设备上录制与桌面设备相同的分辨率。当我在桌面上启动 MediaRecorder() 时，与在同一浏览器但在移动设备上启动时相比，它具有分辨率不同的横向尺寸。

如何在桌面上获得与移动设备上相同的分辨率，我希望移动设备分辨率为默认分辨率，仅限纵向模式。

      navigator.mediaDevices.getUserMedia({audio: true, video: true   })
      .then((mediaStreamObj) => {
      
         // Create a new MediaRecorder instance
         const medRec = new MediaRecorder(mediaStreamObj);
         window.mediaStream = mediaStreamObj;
         window.mediaRecorder = medRec;
         medRec.start();
         
         //when recorded data is available then push into chunkArr array
         medRec.ondataavailable = (e) => {
          chunksArr.push(e.data);
        };
         
         //stop the video recording
         medRec.onstop = () => {

             window.blobFile = new Blob(chunksArr, { type:"video/mp4;codecs=h264" });
             chunksArr= [];
             
             // create video element and store the media which is recorded
             const recMediaFile = document.createElement("video");
             recMediaFile.setAttribute("id", "vid-recorder2");
             recMediaFile.controls = true;
             const RecUrl = URL.createObjectURL(window.blobFile);
             recMediaFile.src = RecUrl;
             document.getElementById(`vid-recorder`).replaceWith(recMediaFile);
            
      };
      startTimer();
      startBtn.disabled = true;
      endBtn.disabled = false;
   });

Answer 1

您可以通过向 .getUserMedia() 提供约束对象来请求输入视频流的分辨率。约束对象可以包含视频轨道约束，例如这些。

如果您正在尝试纵向模式分辨率，您可以尝试如下操作：

const constraints = {
  audio: true,
  video: {
    width: { ideal: 480 },
    height: { ideal:  640 }
}
stream = await navigator.mediaDevices.getUserMedia(constraints)

但是，这很重要，您无法告诉 getUserMedia 它提供的视频流的确切尺寸或宽高比。它实际生成的内容取决于其可用的相机硬件。例如，如果你给它一些类似的东西，

   video: {
     width:  { min: 144, ideal: 640, max: 1920 },
     height: { min: 176, ideal: 480, max: 1080 }
   }

它会拒绝您的请求或给您返回相机硬件可以处理的内容。也就是说，在典型的台式机/笔记本电脑上，不太可能具有纵向模式宽高比。

并且它会因机器和浏览器的品牌和型号而异。这是一个提示。

这就是在说“你（可能）不能那样做™”。