MediaStream Recording API：ondataavailable事件未触发问题求助

我太懂这种明明视频能正常播放，但录制回调就是没反应的憋屈了！咱们从几个最常见的原因入手排查，帮你搞定这个问题：

1. 确认你调用了MediaRecorder.start()和stop() #

很多时候问题出在没启动录制或者没触发停止动作——ondataavailable默认只有在调用stop()时才会触发（如果没设置timeslice参数的话）。如果你的代码里只获取了流但没启动录制，或者一直没调用stop()，那自然不会有日志输出。

举个正确的流程示例：

let recordedChunks = [];
let mediaRecorder;

navigator.mediaDevices.getUserMedia({video:true, audio:true})
.then(function(stream) {
  const myVideoMedia = document.getElementById("vid1");
  myVideoMedia.srcObject = stream;
  
  // 初始化MediaRecorder，先检查MIME类型是否支持
  let mimeType = 'video/webm;codecs=vp9';
  if (!MediaRecorder.isTypeSupported(mimeType)) {
    console.warn('该格式不支持，降级为video/webm');
    mimeType = 'video/webm';
  }
  
  mediaRecorder = new MediaRecorder(stream, { mimeType });
  
  // 绑定ondataavailable事件（一定要在start之前绑定！）
  mediaRecorder.ondataavailable = function(e) {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
      console.log('已捕获录制片段：', e.data); // 这里就能输出日志了
    }
  };
  
  // 可选：录制完成后的处理
  mediaRecorder.onstop = function() {
    const blob = new Blob(recordedChunks, { type: mimeType });
    // 这里可以处理录制好的Blob，比如下载或者上传
  };
  
  // 必须调用start才会开始录制！
  mediaRecorder.start();
  
  // 示例：5秒后自动停止录制
  setTimeout(() => {
    mediaRecorder.stop();
  }, 5000);
})
.catch(err => {
  console.error('获取媒体流失败：', err);
});

2. 检查MIME类型是否被浏览器支持 #

如果你的MediaRecorder初始化时指定了浏览器不支持的MIME类型，它会静默失败，导致ondataavailable根本不会触发。一定要用MediaRecorder.isTypeSupported()来验证格式：

// 常用的兼容写法
const supportedTypes = [
  'video/webm;codecs=vp9,opus',
  'video/webm;codecs=vp8,opus',
  'video/webm',
  'video/mp4'
];
const mimeType = supportedTypes.find(type => MediaRecorder.isTypeSupported(type));
if (!mimeType) {
  alert('你的浏览器不支持MediaRecorder录制功能！');
  return;
}

3. 确保事件绑定在start()之前 #

如果先调用mediaRecorder.start()再绑定ondataavailable事件，第一个片段的事件会被错过，甚至后续的也可能无法触发。一定要先绑定事件，再启动录制。

4. 检查是否需要用户交互触发录制 #

现代浏览器出于安全限制，不允许在页面加载完成后自动启动MediaRecorder——必须通过用户的交互（比如按钮点击）来触发start()。如果你的代码是在页面初始化时直接调用start()，会被浏览器阻止，导致录制没真正开始。

比如改成按钮触发：

<button id="startBtn">开始录制</button>
<button id="stopBtn">停止录制</button>

<script>
let mediaRecorder;
let recordedChunks = [];

navigator.mediaDevices.getUserMedia({video:true, audio:true})
.then(stream => {
  const video = document.getElementById("vid1");
  video.srcObject = stream;
  
  const mimeType = 'video/webm';
  mediaRecorder = new MediaRecorder(stream, { mimeType });
  
  mediaRecorder.ondataavailable = e => {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
      console.log('捕获片段');
    }
  };
  
  // 绑定按钮事件
  document.getElementById('startBtn').addEventListener('click', () => {
    recordedChunks = []; // 清空之前的片段
    mediaRecorder.start();
    console.log('开始录制');
  });
  
  document.getElementById('stopBtn').addEventListener('click', () => {
    mediaRecorder.stop();
    console.log('停止录制');
  });
});
</script>

5. 检查媒体流是否正常 #

虽然你能在video元素看到视频，但也要确认音频流是否正常获取——如果音频捕获失败，有些浏览器的MediaRecorder也会异常。可以在getUserMedia的回调里检查stream的tracks：

stream.getTracks().forEach(track => {
  console.log(`Track类型：${track.kind}，状态：${track.readyState}`);
});

按照上面的步骤排查，应该就能让ondataavailable正常触发，看到你想要的控制台日志了！

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