三星Internet浏览器HTML5移动端WebApp摄像头流上传冻结问题求助

我开发的系统里有个模块，用HTML5实现了移动端WebApp的摄像头流上传功能，在Android端Chrome里运行完全正常，但在三星Internet浏览器里画面频繁冻结——有时候录制一开始就卡，有时候录到一半突然就不动了。我还发现，当录制过程中有电话接入这类中断操作时，这个问题很容易复现。

相关的video标签设置和约束代码如下：

video = document.getElementById('vid');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
video.style.width = '160px';
video.style.height = '90px';

// 媒体约束
constraints: {
  video: {
    mandatory: {
      minWidth: CANVAS_WIDTH,
      minHeight: CANVAS_HEIGHT,
      maxWidth: CANVAS_WIDTH,
      maxHeight: CANVAS_HEIGHT
    }
  }
}

解决方案与排查建议 #

看起来你遇到的是三星Internet浏览器对MediaStream API的兼容性问题，我之前也帮开发者排查过类似的情况，给你几个针对性的方案：

1. 替换废弃的mandatory约束语法 #

你当前使用的mandatory约束是旧版MediaStream API的写法，现在已经被标准废弃了。三星Internet浏览器对新标准的兼容性更敏感，建议改成现代的约束格式：

constraints: {
  video: {
    width: { exact: CANVAS_WIDTH },
    height: { exact: CANVAS_HEIGHT }
  }
}

如果业务允许，也可以用ideal替代exact，让浏览器优先选择接近目标的分辨率，降低硬件适配压力，减少冻结概率。

2. 处理媒体流中断后的手动恢复 #

当电话接入这类系统级中断发生时，三星Internet浏览器不会像Chrome那样自动恢复摄像头流。你需要监听流的inactive事件，或者全局的devicechange事件，手动重新获取媒体流：

// 假设stream是你获取到的摄像头流
stream.addEventListener('inactive', () => {
  navigator.mediaDevices.getUserMedia(constraints)
    .then(newStream => {
      video.srcObject = newStream;
      // 这里调用你的录制重启逻辑
      restartRecordingProcess();
    })
    .catch(err => console.error('恢复摄像头流失败:', err));
});

// 同时监听设备变化事件，应对设备状态异常
navigator.mediaDevices.addEventListener('devicechange', () => {
  // 执行流的重新初始化逻辑
});

3. 优化video标签的属性设置 #

三星Internet浏览器对HTML5视频属性的处理和Chrome有差异，建议用更可靠的DOM属性赋值方式，同时添加webkit前缀兼容旧版本：

video = document.getElementById('vid');
video.autoplay = true;
video.muted = true;
video.playsinline = true;
video.setAttribute('webkit-playsinline', ''); // 兼容旧版三星浏览器
video.style.width = '160px';
video.style.height = '90px';

避免用setAttribute设置布尔属性，直接赋值DOM属性的兼容性更好。

4. 避免强制固定非原生分辨率 #

部分三星机型的摄像头硬件在处理非原生分辨率时容易出现适配问题，导致流冻结。如果业务场景允许，不要强制固定分辨率，改用ideal参数让浏览器自动选择最合适的配置：

constraints: {
  video: {
    width: { ideal: CANVAS_WIDTH },
    height: { ideal: CANVAS_HEIGHT }
  }
}

5. 同步帧捕获与浏览器渲染周期 #

如果你的录制是通过Canvas捕获视频帧实现的，确保Canvas尺寸和视频流的实际分辨率一致，同时用requestAnimationFrame替代setTimeout来处理帧捕获，这样能和浏览器的渲染周期同步，减少卡顿：

function captureAndUploadFrame() {
  if (video.readyState === 4) { // 确保视频已加载完成
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 执行帧上传逻辑
  }
  requestAnimationFrame(captureAndUploadFrame);
}

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