Échec de l'exécution de «createObjectURL» sur «URL»:

132

Erreur d'affichage ci-dessous dans Safari.

Échec de l'exécution de 'createObjectURL' sur 'URL': aucune fonction correspondant à la signature fournie n'a été trouvée.

Mon code est:

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

Ceci est mon code pour l'image:

function myUploadOnChangeFunction() { 
    if (this.files.length) { 
       for (var i in this.files) { 
           if (this.files.hasOwnProperty(i)) { 
              var src = createObjectURL(this.files[i]); 
              var image = new Image(); 
              image.src = src; 
              imagSRC = src; 
              $('#img').attr('src', src); 
            }
       }           
   } 
} 
Hardik Mandankaa
la source
6
Salut Hardik, que transmettez-vous à votre createObjectURL(...)fonction lorsque vous obtenez cette erreur?
Arthur Weborg
2
l'objet doit être un objet File ou un objet Blob pour créer une URL d'objet pour.voir devdocs.io/dom/window.url.createobjecturl
yxf
1
Ceci est mon code pour l'image: function myUploadOnChangeFunction () {if (this.files.length) {for (var i in this.files) {if (this.files.hasOwnProperty (i)) {var src = createObjectURL (this. fichiers [i]); var image = nouvelle image (); image.src = src; imagSRC = src; $ ('# img'). attr ('src', src); }}}}
Hardik Mandankaa
@HardikMansaraa Allez-y et modifiez cela dans votre question.
soktinpk
window.URL.createObjectURL('broken')jette une erreur:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
Juan Mendes

Réponses:

150

METTRE À JOUR

Pensez à éviter la createObjectURL()méthode, pendant que les navigateurs désactivent sa prise en charge. Attachez simplement l' MediaStreamobjet directement à la srcObjectpropriété de HTMLMediaElementeg <video>element.

const mediaStream = new MediaStream();
const video = document.getElementById('video-player');
video.srcObject = mediaStream;

Cependant, si vous devez travailler avec MediaSource, Blobou File, vous devez créer une URL avec URL.createObjectURL()et l'attribuer à HTMLMediaElement.src.

Lisez plus de détails ici: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject


Réponse plus ancienne

J'ai rencontré la même erreur, lorsque je suis passé aux createObjectURLdonnées brutes:

window.URL.createObjectURL(data)

Il doit être Blob, Fileou MediaSourceobjet, pas des données elles-mêmes. Cela a fonctionné pour moi:

var binaryData = [];
binaryData.push(data);
window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))

Consultez également le MDN pour plus d'informations: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

mimo
la source
2
Salut .. Que faire si je traite avec "application / pdf"? J'obtiens la même erreur sur la console lorsque je traite un fichier PDF
N Sharma
@mimo J'utilise le même code pour télécharger le fichier. Mais deux fichiers sont téléchargés. L'un est le fichier correct et un fichier supplémentaire avec le même nom mais l'état d'échec est en cours de téléchargement. Avez-vous une idée de pourquoi cela se produit?
Shardul
Je suis confus avec ce commentaire, dans MDN, il décourage l'utilisation de URL.createObjectURL()pour les flux multimédias. Cependant, il n'indique PAS de ne pas l'utiliser pour une entrée de fichier comme indiqué dans la question initiale.
alextrastero
140

Cette erreur est due au fait que la fonction createObjectURLest obsolète pour Google Chrome

J'ai changé ceci:

video.src=vendorUrl.createObjectURL(stream);
video.play();

pour ça:

video.srcObject=stream;
video.play();

Cela a fonctionné pour moi.

Christian
la source
+1 Voir l'exemple avec fallback developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…
eddyparkinson
createObjectURL n'est pas obsolète comme indiqué ici mais n'accepte plus l'objet de flux multimédia
goodies4uall
Cela devrait être la réponse.
DomingoR
il y a un autre problème video.play () semble être restreint: DOMException: play () ne peut être lancé que par un geste de l'utilisateur.
user889030
@ user889030 cela signifie simplement que vous ne pouvez pas ouvrir une page Web et vous attendre à ce que le flux de la webcam démarre. Vous devez laisser l'utilisateur démarrer explicitement le flux. Utilisez simplement un bouton pour démarrer le flux
S.Ramjit
26

Mon code était cassé car j'utilisais une technique obsolète. C'était ça:

video.src = window.URL.createObjectURL(localMediaStream);
video.play();

Ensuite, j'ai remplacé cela par ceci:

video.srcObject = localMediaStream;
video.play();

Cela a fonctionné à merveille.

EDIT: Récemment, localMediaStreama été obsolète et remplacé par MediaStream. Le dernier code ressemble à ceci:

video.srcObject = MediaStream;

Références:

  1. Technique obsolète: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
  2. Technique obsolète moderne: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. Technique moderne: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
Dani Amsalem
la source
9

J'ai eu la même erreur pour le MediaStream. La solution est de définir un flux vers le srcObject.

À partir de la documentation :

Important: si vous avez encore du code qui repose sur createObjectURL () pour attacher des flux aux éléments multimédias, vous devez mettre à jour votre code pour simplement définir srcObject directement sur MediaStream.

max.kovpak
la source
3

Le problème est que les clés fournies dans la boucle ne font pas référence à l'index du fichier.

for (var i in this.files) {
    console.log(i);
}

La sortie du code ci-dessus est:

0
length
item

Mais ce qui était attendu était:

0
1
2
etc...

Ensuite, l'erreur se produit lorsque le navigateur tente de s'exécuter, par exemple:

window.URL.createObjectURL(this.files["length"])

Je suggère une implémentation basée sur le code suivant:

var files = this.files;
for (var i = 0; i < files.length; i++) {
    var file = files[i],
        src = (window.URL || window.webkitURL).createObjectURL(file);
    ...
}

J'espère que cela peut aider quelqu'un.

Salutations!

Hiago Takaki
la source
2

Si vous utilisez ajax, il est possible d'ajouter les options xhrFields: { responseType: 'blob' }:

$.ajax({
  url: 'yourURL',
  type: 'POST',
  data: yourData,
  xhrFields: { responseType: 'blob' },
  success: function (data, textStatus, jqXHR) {
    let src = window.URL.createObjectURL(data);
  }
});
Guilherme Porto
la source
-6

Je l'ai corrigé en téléchargeant la dernière version à partir de l' url GgitHub GitHub

AutoCiudad
la source