Отмена createObjectURL и замена новым HTMLMediaElement.srcObject не работает для потока веб-камеры

Я получаю предупреждение о том, что функция будет устаревать в будущей версии Chrome.

Это сценарий:

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);
    });
}

Это записывает веб-камеру, поэтому я могу ее сохранить, но в консоли отображается следующее предупреждение:

[Устаревание] URL.createObjectURL с медиа-потоками устарел и будет удален в M68 около июля 2018 года. Вместо этого используйте HTMLMediaElement.srcObject.

Но когда я меняю:

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

к

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

Он больше не работает, как раньше.

Ответ 1

Ваше недопонимание, что такое HTMLMediaElement.

Это класс/прототип JavaScript, который представляет HTML- <audio> или <video> независимо от того, присутствует он в HTML или нет.

Для более классного объяснения <audio> на странице есть объект типа HTMLAudioElement который расширяет HTMLMediaElement а в свою очередь расширяет HTMLElement.

Если вы получите медиа-элемент с помощью querySelector() или getElementById() или создадите медиа-элемент в JavaScript с помощью createElement("audio") или createElement("video") вы получите экземпляр HTMLMediaElement.

В вашем случае this объект класса HTMLMediaElement.

В JavaScript, как правило, имя типа объекта начинается с HTML, оно ссылается на элемент/тег HTML.

Все, что вам нужно сделать, это изменить

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

в

try {
  this.srcObject = stream;
} catch (error) {
  this.src = window.URL.createObjectURL(stream);
}

Это взято из документации Mozilla

Вы можете прочитать больше о том, как использовать это изменение и откуда этот ответ требует знаний: https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

Ответ 2

Замена this.src= window.URL.createObjectURL(stream); this.srcObject = stream; должен решить проблему.

Ответ 3

Если вы используете Chrome, вы можете использовать:

video.srcObject = stream;

вместо:

this.srcObject = stream;