Is there a way to get a MediaStream from an URL without creating a video tag

Question

From https://stackoverflow.com/a/21227589/130910:

var stream = videoTag.captureStream()

But I don't want to have to create the tag.

I want to do this because my stream may be from a webcam or a video, and when it's a webcam, I am setting the videoTag.srcObject to the result of navigator.mediaDevices.getUserMedia(...). So it makes the API clunky.

I want to do:

const stream = getStreamFromLocalVideoOrWebcam()
videoTag.src = stream

Is this possible? What is the best approach?

Answer 1

I want to do this because my stream may be from a webcam or a video

I'll take that to mean you have a MediaStream (from getUserMedia/webcam), or a URL (pointing at a video).

If you actually have a MediaStream, you should be setting the srcObject, as you are now. If you have a URL, you should be using the src property instead. So, the design of the return value of your function getStreamFromLocalVideoOrWebcam() is flawed.

You could always do something like this instead:

function setVideoSource(videoEl) {
  if (... something ...) {
    videoEl.src = someVideoUrl;
  } else {
    videoEl.srcObject = navigator.mediaDevices.getUserMedia(...);
  }
}

const videoEl = document.createElement('video');
setVideoSource(videoEl);