使用navigator.mediaDevices.getUserMedia触发Illegal Invocation错误求助

在项目中使用下述代码实现用户端录制音频并直接上传至服务器时，触发了Illegal Invocation错误，已知这属于上下文错误，但不确定具体触发原因。相关代码如下：

navigator.mediaDevices.getUserMedia({
    audio: true
  })
  .then(function(stream) {
    recorder = new MediaRecorder(stream);

    const chunks = [];

    recorder.onstop = (e) => {
      const blob = new Blob(chunks, {
        type: "audio/wav;codecs=MS_PCM"
      });
      var fileUpload = new FormData();
      fileUpload.append("fileToUpload", blob, "audio.wav");
      $.post("upload.php", fileUpload);
    };

    recorder.ondataavailable = (e) => {
      chunks.push(e.data);
    };

    recorder.start();
  });

解决思路 #

• 核心触发原因：jQuery的$.post方法默认会自动序列化传入的数据，而FormData是原生二进制数据对象，被序列化后会破坏其结构，从而抛出Illegal Invocation错误。
• 修复方案1：改用带正确配置的jQuery Ajax
  将$.post替换为$.ajax，手动设置两个关键参数：processData: false（阻止jQuery处理FormData）、contentType: false（让浏览器自动设置正确的multipart/form-data头部），代码示例：

  $.ajax({
    url: "upload.php",
    type: "POST",
    data: fileUpload,
    processData: false,
    contentType: false,
    success: function(res) {
      // 处理上传成功逻辑
    },
    error: function(xhr) {
      // 处理上传失败逻辑
    }
  });
  

• 修复方案2：使用原生XMLHttpRequest
  直接用浏览器原生API发送请求，完全避免jQuery的自动序列化干扰，代码示例：

  const xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php");
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 上传成功后的处理
    } else {
      // 上传失败后的处理
    }
  };
  xhr.send(fileUpload);
  

• 额外注意事项：确认recorder变量的作用域是否正确，避免因变量提前被回收导致的异常；同时检查服务器端upload.php的文件接收逻辑，确保能正确解析FormData中的音频文件。

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