Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 474
user1469734 Avatar asked Jun 29 '18 12:06

user1469734


People also ask

What can I use instead of createObjectURL?

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

What is srcObject?

The srcObject property of the HTMLMediaElement interface sets or returns the object which serves as the source of the media associated with the HTMLMediaElement . The object can be a MediaStream , a MediaSource , a Blob , or a File (which inherits from Blob ).


2 Answers

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/

like image 117
Barkermn01 Avatar answered Oct 07 '22 22:10

Barkermn01


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

like image 25
YaTaras Avatar answered Oct 07 '22 21:10

YaTaras