如何基于JavaScript WebRTC定时POST捕获图片并校验发送状态

我来帮你搞定这个问题！要实现每10秒发送一次摄像头图片，还得确保上一张发送成功再发下一张，核心是别用setInterval（容易造成请求堆积），改用递归式的setTimeout来控制流程，具体调整如下：

核心思路 #

只有当上一次图片发送请求成功（或失败后重试），才触发下一次的定时任务，这样能完全避免网络延迟导致的请求叠加问题。同时我们会把捕获、发送、状态校验的逻辑封装成独立函数，让代码更清晰易维护。

调整后的完整代码 #

// 全局变量存储视频流（方便后续关闭摄像头等操作）
let videoStream = null;
// 替换成你实际的后端接口地址
const UPLOAD_URL = '你的上传接口URL';

// 初始化摄像头
function initCamera() {
  // 使用标准的mediaDevices API，兼容主流浏览器
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      videoStream = stream;
      const videoElement = document.getElementById('video');
      // 直接用srcObject赋值流，比旧的URL.createObjectURL更简洁
      videoElement.srcObject = stream;
      videoElement.play();
      // 初始化完成后，等待10秒发送第一张图片
      setTimeout(sendCapturedImage, 10000);
    })
    .catch(err => {
      console.error('摄像头初始化失败:', err);
    });
}

// 捕获图片并发送的核心函数
function sendCapturedImage() {
  const videoElement = document.getElementById('video');
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 按照你的需求将视频帧绘制到canvas（缩放为320*240）
  ctx.drawImage(videoElement, 0, 0, 640, 480, 0, 0, 320, 240);
  
  // 获取base64图片数据并去掉前缀（data:image/png;base64,）
  const imgData = canvas.toDataURL('image/png');
  const base64Data = imgData.substr(22);
  
  // 发送POST请求并校验状态
  $.post(UPLOAD_URL, { dataImg: base64Data })
    .done(response => {
      console.log('图片发送成功:', response);
      // 上一次发送成功，10秒后发送下一张
      setTimeout(sendCapturedImage, 10000);
    })
    .fail((jqXHR, textStatus, errorThrown) => {
      console.error('图片发送失败:', textStatus, errorThrown);
      // 发送失败可选择重试（这里设置3秒后重试，可按需调整）
      setTimeout(sendCapturedImage, 3000);
    });
}

// 页面加载完成后初始化摄像头
window.addEventListener('load', initCamera);

关键调整说明 #

1. API兼容性优化：把旧的webkitGetUserMedia换成标准的navigator.mediaDevices.getUserMedia，现在Chrome、Firefox等主流浏览器都支持这个API，同时用srcObject直接绑定视频流，比webkitURL.createObjectURL更高效简洁。
2. 定时逻辑控制：用setTimeout替代setInterval，只有当上一次请求完成（成功/失败）后，才触发下一次定时，彻底避免请求堆积。
3. 状态校验：通过$.post的done（成功）和fail（失败）回调，明确判断上一张图片的发送状态，成功则继续定时，失败可选择重试或停止。
4. 代码模块化：把摄像头初始化和图片发送逻辑拆分成独立函数，便于后续维护和扩展（比如添加停止发送的功能）。

额外注意事项 #

• 确保你的后端接口能正确解析dataImg参数（base64格式的图片数据），完成解码和存储。
• 浏览器要求必须在HTTPS或localhost环境下才能访问摄像头，测试时注意环境。
• 如果需要停止发送，可以通过清除定时器，或者调用videoStream.getTracks()[0].stop()关闭摄像头。

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