javascripthtml5-videowebrtcrecordrtc

Video mediaDevices Assign a Blob To 'videoRef.srcObject' In Place of 'src'

I am trying to make a blob the src of a video element. My code is working fine when:

videoRef.src = URL.createObjectURL(blob)

but using 'src' and 'URL.createObjectURL' is deprecated in place of using 'srcObject' https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

enter image description here

and https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

enter image description here

My question is how can I simply add a blob file to the srcObject like so:

videoRef.srcObject = blob

When I try the above code I get the error: "TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type 'MediaStream'."

How can I not use the deprecated videoRef.src and apply a blob directly to videoRef.srcObject ? Or is it ok for blob type to use src, and only streams can't use src ?

Solution

  • URL.createObjectURL is only deprecated for streams, not blobs and mediasources.

    The MDN warning you reference is under the section titled Using object URLs for media streams. The warning itself says:

    If you still have code that relies on createObjectURL() to attach streams to media elements

    There's an effort to deprecate URL.createObjectURL specifically around streams, because streams are inherently local objects.

    TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement

    Looks like your browser hasn't implemented srcObject for blobs yet. This is common atm.

    E.g. both Chrome and Firefox have partial support for srcObject for streams only, but not blob, file, or mediasource.

    MDN on srcObject echoes this:

    As of November 2017, browsers only support MediaStream. For MediaSource, Blob and File, you have to create a URL with URL.createObjectURL() and assign it to HTMLMediaElement.src.