Using MediaRecorder: getting an error seemingly when I'm setting the source of a live video preview

Question

I'm experimenting with MediaRecorder and was able to actually record video, but when I attempt to give a live preview of the video, I just get the following two error messages, which seem to just refer to the same issue:

• GET http://127.0.0.1:5000/[object%20MediaStream] 404 (NOT FOUND)
• Uncaught (in promise) DOMException: Failed to load because not supported source was found

I have checked and seen other similar posts and haven't been able to find a solution that works. Here's the code:

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');
    liveVideo.src = stream;
    liveVideo.play();

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

  });
};

I believe that liveVideo.src = stream; may be causing an error.

Answer 1

No idea why, but replacing the line liveVideo.src = stream; with liveVideo.srcObject = liveStream; fixes the issue