Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream

Question

I get the warning that a function will be deprecated in Chrome future release.

It's this script:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, (stream) => {
        this.src = window.URL.createObjectURL(stream);
        this.stream = stream;
    }, (error) => {
        console.log(error);
    });
}

That records webcam so I can save it, but the following warning is shown in the console:

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead.

But when I change:

this.src = window.URL.createObjectURL(stream);

To

this.src = window.HTMLMediaElement.srcObject(stream);

It doesn't work anymore like it did before..

Solution 1

Your misunderstanding what HTMLMediaElement is.

It is the JavaScript Class/Prototype that represents a HTML <audio> or <video> tag whether it's in the HTML or not.

For a more class like explanation <audio> on the page is an object of type HTMLAudioElement and that extends HTMLMediaElement and that in turn extends HTMLElement.

If you get the media element with querySelector() or getElementById() or create a media element in JavaScript with createElement("audio") or createElement("video") you'll get an instance of HTMLMediaElement.

In your case this is an object of HTMLMediaElement class.

With JavaScript, as a rule of thumb if the object type name starts with HTML it is referring to an HTML Element / Tag.

All you need to do is change

this.src = window.URL.createObjectURL(stream);

to

if ('srcObject' in this) {
  this.srcObject = stream;
} else {
  this.src = window.URL.createObjectURL(stream);
}

This is taken from Mozilla Documentation

You can read more about how this change should be used, and where this answer takes knowledge from: https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

Solution 2

Replacing this.src = window.URL.createObjectURL(stream); by this.srcObject = stream; should fix the problem.

Comments

[Barkermn01]

only if video variable is setup with the scopes required and points to the video element you're wanting to effect at no point in the OP's code is video defined

[tatsu]

the <src DOM tag does not accept the srcObject value.

[tatsu]

this doesn't answer the question for me. createObjectURL was not only used for displaying video, it was also used for downloading files. the src tag does not accept a srcObject, now there is no solution for downloading a file.

[Barkermn01]

@tatsu What are you talking about the answer is correct for the question asked if it does not work for you open a question and give us your code to see what is wrong with it, don't just say does not answer the question for me, well then you have a different question.

[user1709076]

how do you turn the result of a FileReader() into a stream