使用MediaRecorder设置直播视频预览源时出现错误求助

你的判断完全正确，错误根源就是liveVideo.src = stream;这行代码。

浏览器的<video>元素的src属性只接受URL格式的字符串，当你直接把MediaStream对象赋值给它时，浏览器会自动将对象转为字符串[object MediaStream]，并把这个字符串当作请求路径去访问，于是就出现了GET http://127.0.0.1:5000/[object%20MediaStream] 404 (NOT FOUND)的错误；同时因为这个路径不是合法的视频源，也就抛出了DOMException: Failed to load because not supported source was found。

正确的做法是使用专门的srcObject属性来绑定MediaStream，这是HTML5为媒体元素提供的标准属性，用于直接关联媒体流。

修改后的代码如下：

window.onload = function () {
  recordButton = document.getElementById('record');
  stopButton = document.getElementById('stop');

  // get video & audio stream from user
  navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
  })
  .then(function (stream) {
    liveStream = stream;

    var liveVideo = document.getElementById('live');
    // 替换为srcObject绑定媒体流
    liveVideo.srcObject = stream;
    liveVideo.play();

    recordButton.disabled = false;
    recordButton.addEventListener('click', startRecording);
    stopButton.addEventListener('click', stopRecording);

  });
};

另外补充一点：调用liveVideo.play()时可能会因为浏览器的自动播放策略抛出错误，建议用Promise捕获处理，比如：

liveVideo.play().catch(err => {
  console.error('播放失败:', err);
});

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