web-dev-qa-db-de.com

Die Einstellung von createObjectURL und das Ersetzen durch das neue HTMLMediaElement.srcObject funktioniert nicht für den Webcam-Stream

Ich erhalte die Warnung, dass eine Funktion in einer zukünftigen Version von Chrome) veraltet sein wird.

Es ist dieses Skript:

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

Das zeichnet die Webcam auf, damit ich sie speichern kann, aber die folgende Warnung wird in der Konsole angezeigt:

[Veraltet] URL.createObjectURL mit Medienstreams ist veraltet und wird in M68 um Juli 2018 entfernt. Verwenden Sie stattdessen HTMLMediaElement.srcObject.

Aber wenn ich mich ändere:

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

Zu

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

Es funktioniert nicht mehr so ​​wie vorher ..

javascripthtml5webkithtml5-videohtml5-audio
18
user1469734

Ihr Missverständnis, was HTMLMediaElement ist.

Es ist die JavaScript-Klasse/der JavaScript-Prototyp, die/der ein HTML-Tag <audio> Oder <video> Darstellt, unabhängig davon, ob es sich um ein HTML-Tag handelt oder nicht.

Für eine klassenähnlichere Erklärung ist <audio> Auf der Seite ein Objekt vom Typ HTMLAudioElement und das erweitert HTMLMediaElement und das erweitert wiederum HTMLElement.

Wenn Sie das Medienelement mit querySelector() oder getElementById() abrufen oder ein Medienelement in JavaScript mit createElement("audio") oder createElement("video") erstellen, erhalten Sie eine Instanz von HTMLMediaElement.

In Ihrem Fall ist this ein Objekt der Klasse HTMLMediaElement.

Bei JavaScript bezieht sich die Faustregel, wenn der Name des Objekttyps mit HTML beginnt, auf ein HTML-Element/-Tag.

Alles, was Sie tun müssen, ist zu ändern

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

zu

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

Dies ist aus Mozilla-Dokumentation entnommen

Lesen Sie mehr darüber, wie diese Änderung verwendet werden sollte und woher diese Antwort das Wissen bezieht: https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has- veraltet /

45
Martin Barker

Das Ersetzen von this.src = window.URL.createObjectURL(stream); durch this.srcObject = stream; Sollte das Problem beheben.

6
YaTaras