网页端用户连接质量检测与视频录制适配方案咨询

Hey Gianmaria, great question—this is such a common frustration when building video recording tools, and there are practical, user-friendly ways to avoid that "record 90s, upload 5 minutes" nightmare. Let’s break this down into actionable steps:

一、先搞定连接质量检测（重点是上传速率） #

Upload speed is what matters most here, not download—since the user needs to send their recorded video to your server. You’ve got two main approaches:

1. 主动测速（最准确） #

Run a quick, lightweight upload test before the user starts recording. Here’s how to implement it in frontend JS:

• Create a small test blob (1MB is perfect—big enough to get a reliable reading, small enough to not annoy users)
• Upload it to a dedicated test endpoint on your server (the endpoint can just discard the data after receiving it)
• Calculate time taken to upload, then convert that to Mbps

Example code snippet:

async function measureUploadSpeed() {
  // Create a 1MB test file
  const testBlob = new Blob([new Uint8Array(1024 * 1024)], { type: 'application/octet-stream' });
  const startTime = performance.now();

  try {
    const res = await fetch('/api/upload-speed-test', {
      method: 'POST',
      body: testBlob,
      headers: { 'Content-Type': 'application/octet-stream' }
    });

    if (!res.ok) throw new Error('Test upload failed');
    
    const endTime = performance.now();
    const durationSec = (endTime - startTime) / 1000;
    // Convert to Mbps: 1MB = 8 megabits
    const uploadMbps = Math.round((1 * 8) / durationSec * 10) / 10;
    return uploadMbps;
  } catch (err) {
    console.error('Speed test error:', err);
    return null;
  }
}

2. 被动 fallback（快速但粗略） #

If the active test fails or you want a quick initial check, use the Network Information API to get the user’s connection type:

function getConnectionType() {
  if (!navigator.connection) return 'unknown';
  return navigator.connection.effectiveType; // Returns '4g', '3g', '2g', etc.
}

This isn’t as accurate as a real upload test (e.g., a "4G" connection could be fast or throttled), but it’s a good fallback to set a baseline.

二、根据测速结果适配录制参数 #

Once you have the upload speed, map it to pre-defined recording presets. The goal is to balance video quality with upload time that’s acceptable to users. Here’s a sample preset mapping:

Implementing the preset selection #

Use the speed test result to auto-select the best preset, and let users override it if they want (with clear context):

async function getRecommendedRecordingConfig() {
  const uploadSpeed = await measureUploadSpeed();
  const connectionType = getConnectionType();

  // Fallback to connection type if speed test fails
  if (!uploadSpeed) {
    switch(connectionType) {
      case '4g':
        return get720pPreset();
      case '3g':
        return get480pPreset();
      default:
        return get480pPreset();
    }
  }

  if (uploadSpeed > 10) return get1080pPreset();
  if (uploadSpeed > 3) return get720pPreset();
  return get480pPreset();
}

// Helper functions for presets
function get1080pPreset() {
  return {
    videoBitsPerSecond: 6000000, // 6Mbps
    mimeType: 'video/webm; codecs=vp9', // VP9 is efficient for web
    width: 1920,
    height: 1080,
    frameRate: 30
  };
}

function get720pPreset() {
  return {
    videoBitsPerSecond: 3000000, // 3Mbps
    mimeType: 'video/webm; codecs=vp9',
    width: 1280,
    height: 720,
    frameRate: 30
  };
}

function get480pPreset() {
  return {
    videoBitsPerSecond: 1500000, // 1.5Mbps
    mimeType: 'video/webm; codecs=vp9',
    width: 640,
    height: 480,
    frameRate: 24
  };
}

三、额外优化提升用户体验 #

1. 预估算上传时间 #

Show users the estimated upload time before they start recording. For example:

"Your upload speed is 4Mbps. Recording a 90s 720p video will take ~1.5 minutes to upload."

Calculate it using:
Estimated Upload Time (sec) = (File Size in Megabits) / Upload Speed (Mbps)
File size = (bitrate * duration) / 8 (convert bits to bytes)

2. 边录边传（进阶） #

Instead of waiting for the full recording to finish, split the video into chunks and upload them as they’re recorded. This:

• Avoids the "big upload wait" at the end
• Lets you monitor upload speed in real-time and adjust recording quality mid-session if needed
• Reduces data loss if the user loses connection mid-recording

3. 让用户掌控 #

Always give users the option to manually switch presets, but display the tradeoffs (e.g., "Full HD will take ~5 minutes to upload on your current connection").

四、关键注意事项 #

• Use efficient codecs: VP9 (webm) or H.264 (mp4) are the best balance of quality and file size for web recording.
• Test the speed quietly: Run the upload test in the background when the page loads, so users don’t have to wait before starting.
• Handle edge cases: If the speed test fails (e.g., no internet), default to the lowest preset to avoid failed uploads.

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