PHP摄像头录制视频无法上传：未触发$_FILES['video']检测条件

问题描述 #

我正在实现将摄像头录制的视频连同当前userid上传至PHP数据库的功能，录制功能可正常运行，但视频无法上传至Uploads目录及数据库。调试发现PHP代码中if (isset($_FILES['video']))条件未被满足，相关代码如下：

PHP代码 #

<?php
session_start();
require_once 'conn.php';

$allowedExtensions = array('.mp4');
$path = 'Uploads/';

if (isset($_FILES['video'])) {
    $file = $_FILES['video'];
    $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
    $filename = pathinfo($file['name'], PATHINFO_FILENAME);

    if (!in_array($extension, $allowedExtensions)) {
        die('Invalid Data Type. ');
    }

    if ($file['error'] !== UPLOAD_ERR_OK) {
        die('Upload Failed with Error' . $file['error']);
    }

    $user_id = $_SESSION['id'];

    $sql = "INSERT INTO upload (userid, filename) VALUES (?, ?)";
    $stmt = $con->prepare($sql);
    $stmt->bind_param("is", $user_id, $filename);
    $stmt->execute();

    move_uploaded_file($file['tmp_name'], $path . '/' . $filename . '-' . $extension);

    echo "File uploaded successfully.";
    $stmt->close();
    $conn->close();
}
echo "error";
  exit();
?>

前端JS代码 #

const video = document.getElementById('videoElement');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
let mediaRecorder;
let chunks = [];

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)

function startVideo() {
  startButton.addEventListener('click', () => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
      .then(stream => {
        video.srcObject = stream;
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
        console.log('Recording started.');
        
        // Add event listeners for media recorder
        mediaRecorder.addEventListener('dataavailable', event => {
          chunks.push(event.data);
        });
        
        mediaRecorder.addEventListener('stop', () => {
          const blob = new Blob(chunks, { type: 'video/mp4' });
          const formData = new FormData();
          formData.append('video', blob, 'recording.mp4');
          const xhr = new XMLHttpRequest();
          xhr.open('POST', 'view.php');
          xhr.send(formData);
        });
      });
  });
  
  stopButton.addEventListener('click', () => {
    mediaRecorder.stop();
    console.log('Recording stopped.');
  });
};

HTML代码 #

<div id="container">
               <video id="videoElement" width="720" height="560" autoplay muted>
        
               </video>
        </div>

        </div>
        </article>
        <div class="side">
            <h3><center>CONTROLS</h3>
                <!-- latest na nagawa -->
                <button class="startButton" id="start">Start Recording</button>
                <button class="stopButton" id="stop">Stop Recording</button>
        </div>

解决思路 #

1. 排查前端请求问题 #

• 给XHR添加状态监听，确认请求是否成功发送、后端返回内容：

  xhr.onload = function() {
    console.log('后端响应:', this.responseText);
    console.log('请求状态码:', this.status);
  };
  xhr.onerror = function() {
    console.log('请求发送失败');
  };
  

• 核对view.php的路径是否正确，确保和当前页面处于同一目录，或路径书写无误。

2. 检查PHP上传配置 #

• 查看php.ini中的关键配置：
  • upload_max_filesize：设置值需大于录制视频的文件大小
  • post_max_size：该值必须大于upload_max_filesize
  • max_execution_time：视频较大时需延长执行时间
• 给Uploads目录设置可写权限，可先用chmod 755 Uploads测试，必要时调整为chmod 777。

3. 修正PHP代码错误 #

• 扩展名判断逻辑错误：$allowedExtensions数组里是.mp4，但pathinfo获取的extension不带点，修改为：

  $allowedExtensions = array('mp4');
  

• 文件路径拼接错误：当前代码会生成Uploads//recording-mp4这类错误文件名，改为：

  $path . $filename . '.' . $extension
  

• 输出逻辑错误：无论是否进入文件上传分支都会输出error，调整为：

  if (isset($_FILES['video'])) {
      // 原有上传逻辑
  } else {
      echo "error";
      exit();
  }
  

• 连接关闭变量错误：代码中用$con初始化连接，却调用$conn->close()，改为$con->close()。

4. 验证Session有效性 #

• 确认用户登录后$_SESSION['id']存在，避免Session问题中断流程，可在PHP开头添加：

  if (!isset($_SESSION['id'])) {
      die('用户未登录');
  }
  

内容的提问来源于stack exchange，提问作者John Zoil Talavera