Gagal menjalankan 'createObjectURL' di 'URL':

132

Tampilkan kesalahan di bawah di Safari.

Gagal menjalankan 'createObjectURL' di 'URL': Tidak ada fungsi yang cocok dengan tanda tangan yang disediakan.

Kode saya adalah:

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

Ini adalah Kode saya untuk gambar:

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
sumber
6
Hai Hardik, apa yang Anda sampaikan ke createObjectURL(...)fungsi Anda ketika Anda mendapatkan kesalahan itu?
Arthur Weborg
2
objek harus menjadi objek File atau objek Blob untuk membuat objek URL for.see devdocs.io/dom/window.url.createobjecturl
yxf
1
Ini adalah Kode saya untuk gambar: function myUploadOnChangeFunction () {if (this.files.length) {for (var i in this.files) {if (this.files.hasOwnProperty (i)) {var src = createObjectURL (this. file [i]); var image = Gambar baru (); image.src = src; imagSRC = src; $ ('# img'). attr ('src', src); }}}}
Hardik Mandankaa
@HardikMansaraa Silakan edit itu untuk pertanyaan Anda.
soktinpk
window.URL.createObjectURL('broken')melempar kesalahan:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
Juan Mendes

Jawaban:

150

MEMPERBARUI

Pertimbangkan untuk menghindari createObjectURL()metode, sementara browser menonaktifkan dukungan untuknya. Cukup lampirkan MediaStreamobjek langsung ke srcObjectproperti HTMLMediaElementmisalnya <video>elemen.

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

Namun, jika Anda perlu bekerja dengan MediaSource, Blobatau File, Anda harus membuat URL dengan URL.createObjectURL()dan menugaskannya HTMLMediaElement.src.

Baca lebih detail di sini: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject


Jawaban Lama

Saya mengalami kesalahan yang sama, ketika saya meneruskan ke createObjectURLdata mentah:

window.URL.createObjectURL(data)

Itu harus Blob, Fileatau MediaSourceobjek, bukan data itu sendiri. Ini bekerja untuk saya:

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

Periksa juga MDN untuk info lebih lanjut: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

mimo
sumber
2
Hai .. Apa yang harus saya lakukan jika saya berurusan dengan "application / pdf"? Saya mendapatkan kesalahan yang sama pada konsol ketika saya berurusan dengan file PDF
N Sharma
@ mimo Saya menggunakan kode yang sama untuk mengunduh file. Tetapi dua file sedang diunduh. Satu file yang benar dan satu file tambahan dengan nama yang sama tetapi status gagal sedang diunduh. Apakah Anda tahu mengapa itu terjadi?
Shardul
Saya bingung dengan komentar ini, di MDN tidak mendukung penggunaan URL.createObjectURL()untuk aliran media. Namun itu tidak menyatakan TIDAK untuk menggunakannya untuk input file seperti yang dinyatakan dalam pertanyaan awal.
alextrastero
140

Kesalahan ini disebabkan karena fungsinya createObjectURLtidak digunakan lagi untuk Google Chrome

Saya mengubah ini:

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

untuk ini:

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

Ini berhasil untuk saya.

Kristen
sumber
+1 Lihat contoh dengan fallback developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…
eddyparkinson
createObjectURL tidak ditinggalkan seperti yang ditunjukkan di sini tetapi tidak lagi menerima objek aliran media
goodies4uall
Ini seharusnya jawabannya.
DomingoR
ada satu masalah lain video.play () tampaknya terbatas: DOMException: play () hanya dapat dimulai oleh gerakan pengguna.
user889030
@ user889030 itu berarti Anda tidak dapat membuka halaman web dan mengharapkan aliran webcam untuk memulai. Anda harus membiarkan pengguna memulai aliran secara eksplisit. Cukup gunakan tombol untuk memulai streaming
S.Ramjit
26

Kode saya rusak karena saya menggunakan teknik usang. Dulu ini:

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

Lalu saya menggantinya dengan ini:

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

Itu bekerja dengan indah.

EDIT: Baru-baru localMediaStreamini telah ditinggalkan dan diganti dengan MediaStream. Kode terbaru terlihat seperti ini:

video.srcObject = MediaStream;

Referensi:

  1. Teknik usang: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
  2. Teknik usang modern: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. Teknik modern: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
Dani Amsalem
sumber
9

Saya memiliki kesalahan yang sama untuk MediaStream. Solusinya adalah mengatur aliran ke srcObject.

Dari dokumen :

Penting: Jika Anda masih memiliki kode yang bergantung pada createObjectURL () untuk melampirkan stream ke elemen media, Anda perlu memperbarui kode Anda untuk hanya mengatur srcObject ke MediaStream secara langsung.

maks.kovpak
sumber
3

Masalahnya adalah bahwa kunci yang disediakan dalam loop tidak merujuk ke indeks file.

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

Output dari kode di atas adalah:

0
length
item

Tapi yang diharapkan adalah:

0
1
2
etc...

Kemudian kesalahan terjadi ketika browser mencoba mengeksekusi, misalnya:

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

Saya menyarankan implementasi berdasarkan kode berikut:

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

Saya harap ini bisa membantu seseorang.

Salam pembuka!

Hiago Takaki
sumber
2

Jika Anda menggunakan ajax, dimungkinkan untuk menambahkan opsi 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
sumber
-6

Saya memperbaikinya mengunduh versi terbaru dari GgitHub GitHub url

AutoCiudad
sumber