Nie udało się wykonać „createObjectURL” na „URL”:

145

Wyświetl poniżej błąd w Safari.

Nie udało się wykonać „createObjectURL” na „URL”: nie znaleziono funkcji pasującej do podanego podpisu.

Mój kod to:

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

To jest mój kod do obrazu:

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
źródło
6
Cześć Hardik, co przekazujesz do swojej createObjectURL(...)funkcji, kiedy pojawia się ten błąd?
Arthur Weborg,
3
obiekt musi być obiektem File lub Blob, aby utworzyć adres URL obiektu for.see devdocs.io/dom/window.url.createobjecturl
yxf
1
To jest mój kod dla obrazu: function myUploadOnChangeFunction () {if (this.files.length) {for (var i in this.files) {if (this.files.hasOwnProperty (i)) {var src = createObjectURL (this. pliki [i]); var image = new Image (); image.src = src; imagSRC = src; $ ('# img'). attr ('src', src); }}}}
Hardik Mandankaa,
@HardikMansaraa Śmiało i edytuj to w swoim pytaniu.
soktinpk
window.URL.createObjectURL('broken')zgłasza błąd:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
Juan Mendes

Odpowiedzi:

160

AKTUALIZACJA

Rozważ unikanie createObjectURL()metody, podczas gdy przeglądarki wyłączają jej obsługę. Wystarczy dołączyć MediaStreamobiekt bezpośrednio do srcObjectwłasności HTMLMediaElementnp <video>. Elementu.

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

Jednakże, jeśli trzeba pracować z MediaSource, Bloblub File, trzeba stworzyć URL z URL.createObjectURL()i przypisać go do HTMLMediaElement.src.

Przeczytaj więcej szczegółów tutaj: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject


Starsza odpowiedź

Wystąpił ten sam błąd, kiedy przekazałem createObjectURLsurowe dane:

window.URL.createObjectURL(data)

To musi być Blob, Filelub MediaSourceobiektu, a nie same dane. To zadziałało dla mnie:

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

Sprawdź także MDN, aby uzyskać więcej informacji: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

mimo
źródło
2
Cześć .. Co zrobić jeśli mam do czynienia z aplikacją / pdf? Otrzymuję ten sam błąd na konsoli, gdy mam do czynienia z plikiem PDF
N Sharma
@mimo Używam tego samego kodu do pobierania pliku. Ale dwa pliki są pobierane. Jeden z nich to poprawny plik i jeden dodatkowy plik o tej samej nazwie, ale pobierany jest status błędu. Czy masz pojęcie, dlaczego tak się dzieje?
Shardul
Jestem zdezorientowany tym komentarzem, w MDN odradza używanie URL.createObjectURL()dla strumieni multimedialnych. Jednak nie stwierdza, aby NIE używać go do wejścia do pliku, jak stwierdzono w pierwszym pytaniu.
alextrastero
144

Ten błąd jest spowodowany createObjectURLwycofaniem tej funkcji z przeglądarki Google Chrome

Zmieniłem to:

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

do tego:

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

To zadziałało dla mnie.

chrześcijanin
źródło
+1 Zobacz przykład z fallback developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ ...
eddyparkinson
Obiekt createObjectURL nie jest przestarzały, jak pokazano tutaj, ale nie akceptuje już obiektu strumienia multimediów
goodies4uall
To powinna być odpowiedź.
DomingoR
jest jeszcze jeden problem. video.play () wydaje się być ograniczone: DOMException: play () można zainicjować tylko gestem użytkownika.
user889030
@ user889030 oznacza to po prostu, że nie możesz otworzyć strony internetowej i oczekiwać, że rozpocznie się strumień z kamery internetowej. Musisz pozwolić użytkownikowi jawnie rozpocząć transmisję. Wystarczy użyć przycisku, aby rozpocząć transmisję
S.Ramjit
27

Mój kod został uszkodzony, ponieważ używałem przestarzałej techniki. Kiedyś tak było:

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

Potem zastąpiłem to tym:

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

To działało pięknie.

EDYCJA: Ostatnio localMediaStreamzostał wycofany i zastąpiony przez MediaStream. Najnowszy kod wygląda następująco:

video.srcObject = new MediaStream();

Bibliografia:

  1. Przestarzała technika: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
  2. Nowoczesna przestarzała technika: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. Nowoczesna technika: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
Dani Amsalem
źródło
9

Miałem ten sam błąd dla MediaStream. Rozwiązaniem jest ustawienie strumienia na srcObject.

Z dokumentów :

Ważne: Jeśli nadal masz kod, który opiera się na funkcji createObjectURL () w celu dołączania strumieni do elementów multimedialnych, musisz zaktualizować kod, aby po prostu ustawić srcObject bezpośrednio na MediaStream.

max.kovpak
źródło
3

Problem polega na tym, że klucze podane w pętli nie odnoszą się do indeksu pliku.

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

Wynik powyższego kodu to:

0
length
item

Ale oczekiwano:

0
1
2
etc...

Następnie błąd pojawia się, gdy przeglądarka próbuje wykonać, na przykład:

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

Proponuję implementację w oparciu o poniższy kod:

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

Mam nadzieję, że to komuś pomoże.

Pozdrowienia!

Hiago Takaki
źródło
2

Jeśli korzystasz z AJAX, możesz dodać opcje 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
źródło
-6

Naprawiłem to, pobierając najnowszą wersję z adresu URL GgitHub GitHub

AutoCiudad
źródło