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

Adding on to jib's answer, here's a code snippet from MDN detailing a fallback for supporting older browsers:

const mediaSource = new MediaSource();
const video = document.createElement('video');
try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}

Just adding my recent 'fun' experience with Safari on iOS and MacOS here. I finally figured out that the latest versions need a bit more love to get blob videos to play back, namely the use of the new video.srcObject (not .src) needing to be provided with a new Blob that includes type information about the video being played. Eg:

var fileInfo = {type: "video/mp4"}
video.srcObject = new Blob([blob], fileInfo);

Using the basic structure from another post the following code worked for me:

function setVideoFromBlob(blob, fileInfo = {type: "video/mp4"}) {
    // Older browsers may not have srcObject
    if ('srcObject' in video) {
        try {
           //fileInfo (type) required by safari, but not by chrome..
           video.srcObject = new Blob([blob], fileInfo);
        } catch (err) {
            if (err.name != "TypeError") {
                throw err;
            }
            // Even if they do, they may only support MediaStream
            video.src = URL.createObjectURL(blob);
        }
    } else {
        video.src = URL.createObjectURL(blob);
    }
}

Hope this helps some people out.

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.