HTML Video Recorder：如何在移动端正确设置视频宽高比约束-html教程-PHP中文网

HTML Video Recorder：如何在移动端正确设置视频宽高比约束

在移动端浏览器中，mediatrackconstraints.aspectratio 常被忽略或不生效，因其仅为建议性约束；实际需结合 width/height 范围限定、设备方向适配及结果校验，才能可靠实现目标宽高比（如 9:16 竖屏）。

在移动端浏览器中，mediatrackconstraints.aspectratio 常被忽略或不生效，因其仅为建议性约束；实际需结合 width/height 范围限定、设备方向适配及结果校验，才能可靠实现目标宽高比（如 9:16 竖屏）。

Web 应用中通过 navigator.mediaDevices.getUserMedia() 设置视频录制宽高比时，开发者常期望使用 aspectRatio: 9 / 16 直接锁定竖屏比例。然而，该属性在绝大多数主流移动浏览器（Chrome for Android、Safari iOS、Samsung Internet）中均不被强制执行——它仅作为底层摄像头硬件的“建议值”，而移动设备普遍受限于固有传感器分辨率、驱动层裁剪逻辑及系统媒体栈优化策略，无法动态缩放或重采样输出帧以满足任意宽高比。

✅ 正确做法：用 width 和 height 范围替代 aspectRatio

由于 aspectRatio 在移动端不可靠，推荐改用显式的分辨率范围约束，同时确保其隐含目标比例：

const videoConstraints = {
  width:  { min: 360, ideal: 720, max: 1440 },
  height: { min: 640, ideal: 1280, max: 1920 },
  facingMode: 'user'
};

上述配置明确要求高度 ≥ 640px、宽度 ≤ 1440px，并优先匹配 720×1280（即 9:16），大幅提高获取理想分辨率的概率。注意：ideal 并非保证命中，但现代 Android 设备通常会优先选择最接近该值的原生支持分辨率（如 720p、1080p 或 1280×720 的旋转变体）。

⚠️ 关键注意事项

设备方向影响可用约束：竖屏（portrait）下 facingMode: 'user' 通常对应 height > width 的原生流；若用户横屏拍摄，部分设备可能自动切换为 width > height 输出，导致比例“翻转”。建议监听 window.orientation 或 screen.orientation 变化，并动态调整约束。

html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须校验实际流尺寸：调用 getUserMedia() 后，应通过 videoTrack.getSettings() 获取真实生效的分辨率，验证是否符合预期：

const stream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints });
const videoTrack = stream.getVideoTracks()[0];
const settings = videoTrack.getSettings();
console.log('Actual resolution:', settings.width, '×', settings.height);
// 若 settings.width/settings.height !== 9/16，需触发降级处理（如 Canvas 裁剪）

兜底方案：前端 Canvas 裁剪与填充
当硬件无法提供理想比例时，可在

function cropToPortrait(ctx, video, outputWidth = 720, outputHeight = 1280) {
  const scale = Math.min(outputWidth / video.videoWidth, outputHeight / video.videoHeight);
  const cropW = video.videoWidth * scale;
  const cropH = video.videoHeight * scale;
  const x = (outputWidth - cropW) / 2;
  const y = (outputHeight - cropH) / 2;
  ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
                x, y, cropW, cropH);
}