web-dev-qa-db-fra.com

La désapprobation de createObjectURL et son remplacement par le nouveau HTMLMediaElement.srcObject ne fonctionne pas pour le flux de webcam

Je reçois l’avertissement qu’une fonction sera déconseillée dans Chrome version future.

C'est ce 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);
    });
}

Cela enregistre la webcam pour que je puisse la sauvegarder, mais l'avertissement suivant est affiché dans la console:

[Obsolète] URL.createObjectURL avec les flux multimédias est obsolète et sera supprimé de M68, vers juillet 2018. Veuillez utiliser plutôt HTMLMediaElement.srcObject.

Mais quand je change:

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

À

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

Ça ne marche plus comme avant.

javascripthtml5webkithtml5-videohtml5-audio
18
user1469734

Votre incompréhension de ce que HTMLMediaElement est.

C'est la classe/le prototype JavaScript qui représente une balise HTML <audio> Ou <video>, Qu'elle soit en HTML ou non.

Pour une classe plus semblable à l'explication <audio> De la page, il s'agit d'un objet de type HTMLAudioElement, qui étend HTMLMediaElement et qui étend à son tour HTMLElement.

Si vous obtenez l'élément multimédia avec querySelector() ou getElementById() ou créez un élément multimédia en JavaScript avec createElement("audio") ou createElement("video"), vous obtiendrez un instance de HTMLMediaElement.

Dans votre cas, this est un objet de HTMLMediaElement class.

Avec JavaScript, en règle générale, si le nom du type d'objet commence par HTML, il fait référence à un élément/tag HTML.

Tout ce que vous devez faire c'est changer

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

à

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

Ceci est tiré de Documentation Mozilla

Vous pouvez en savoir plus sur la manière dont ce changement doit être utilisé et sur l’emplacement de cette réponse: https://www.fxsitecompat.com/fr-CA/docs/2017/url-createobjecturl-stream-has- été-obsolète /

45
Martin Barker

Remplacement de this.src = window.URL.createObjectURL(stream); par this.srcObject = stream; devrait résoudre le problème.

6
YaTaras