如何使用MediaRecorder()在桌面端录制移动端分辨率的视频

要让桌面端和移动端录制相同分辨率的竖屏视频，核心是通过getUserMedia的视频约束强制指定竖屏分辨率和比例，同时配置MediaRecorder确保输出格式一致。以下是具体实现方案：

1. 明确目标竖屏分辨率 #

先确定你需要的移动端竖屏分辨率（比如常见的720×1280、1080×1920），然后在getUserMedia的视频参数中添加精确约束，强制浏览器采用该竖屏规格。

2. 修改getUserMedia的视频约束 #

将原代码中video: true替换为带具体分辨率、比例的约束对象，确保桌面端摄像头输出竖屏画面：

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    // 指定目标竖屏分辨率（以720×1280为例）
    width: { exact: 720 },
    height: { exact: 1280 },
    // 强制竖屏比例，避免浏览器自动调整为横屏
    aspectRatio: { exact: 9/16 },
    // 可选：指定前置摄像头，移动端和桌面端通用
    facingMode: 'user'
  }
})
.then((mediaStreamObj) => {
  // ... 后续录制逻辑
});

兼容性处理 #

如果部分桌面摄像头不支持精确的竖屏分辨率，可以将exact改为ideal，并设置最小分辨率兜底，让浏览器优先匹配理想值：

video: {
  width: { ideal: 720, min: 480 },
  height: { ideal: 1280, min: 854 },
  aspectRatio: { exact: 9/16 },
  facingMode: 'user'
}

3. 配置MediaRecorder确保输出一致 #

初始化MediaRecorder时指定明确的MIME类型和视频比特率，避免浏览器自动调整编码参数导致分辨率变化：

const medRec = new MediaRecorder(mediaStreamObj, {
  mimeType: 'video/mp4;codecs=h264',
  // 根据分辨率设置合适的比特率（720p建议2.5Mbps，1080p建议5Mbps）
  videoBitsPerSecond: 2500000
});

完整修改后的代码 #

// 全局变量提前声明
let chunksArr = [];
let startBtn, endBtn;

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    width: { exact: 720 },
    height: { exact: 1280 },
    aspectRatio: { exact: 9/16 },
    facingMode: 'user'
  }
})
.then((mediaStreamObj) => {
  // 配置MediaRecorder
  const medRec = new MediaRecorder(mediaStreamObj, {
    mimeType: 'video/mp4;codecs=h264',
    videoBitsPerSecond: 2500000
  });
  window.mediaStream = mediaStreamObj;
  window.mediaRecorder = medRec;
  medRec.start();

  medRec.ondataavailable = (e) => {
    chunksArr.push(e.data);
  };

  medRec.onstop = () => {
    window.blobFile = new Blob(chunksArr, { type: "video/mp4;codecs=h264" });
    chunksArr = [];

    const recMediaFile = document.createElement("video");
    recMediaFile.setAttribute("id", "vid-recorder2");
    recMediaFile.controls = true;
    // 强制视频元素以竖屏比例显示
    recMediaFile.style.aspectRatio = "9/16";
    const RecUrl = URL.createObjectURL(window.blobFile);
    recMediaFile.src = RecUrl;
    document.getElementById(`vid-recorder`).replaceWith(recMediaFile);
  };

  startTimer();
  startBtn.disabled = true;
  endBtn.disabled = false;
})
.catch(err => {
  console.error("获取媒体设备失败:", err);
});

关键说明 #

• aspectRatio约束：强制16:9的竖屏比例，确保桌面端摄像头不会输出横屏画面。
• 分辨率约束：通过exact或ideal指定目标分辨率，让浏览器优先匹配移动端常用的竖屏规格。
• MediaRecorder配置：明确MIME类型和比特率，避免不同浏览器对编码参数的自动调整导致输出不一致。

内容的提问来源于stack exchange，提问作者astrakid932