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 ||          


        

Answer 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

try {
  this.srcObject = stream;
} catch (error) {
  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/

Answer 2

If you are using Chrome you can use:

video.srcObject = stream;

instead of:

this.srcObject = stream;

Answer 3

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