Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream
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/
Replacing this.src = window.URL.createObjectURL(stream);
by this.srcObject = stream;
should fix the problem.