Error al ejecutar 'createObjectURL' en 'URL':

132

Mostrar error a continuación en Safari.

Error al ejecutar 'createObjectURL' en 'URL': no ​​se encontró ninguna función que coincidiera con la firma proporcionada.

Mi código es:

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

Este es mi código para la imagen:

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
fuente
66
Hola Hardik, ¿qué estás pasando a tu createObjectURL(...)función cuando recibes ese error?
Arthur Weborg
2
el objeto debe ser un objeto File o Blob para crear una URL de objeto. ver devdocs.io/dom/window.url.createobjecturl
yxf
1
Este es mi código para la imagen: function myUploadOnChangeFunction () {if (this.files.length) {for (var i in this.files) {if (this.files.hasOwnProperty (i)) {var src = createObjectURL (this. archivos [i]); var image = nueva imagen (); image.src = src; imagSRC = src; $ ('# img'). attr ('src', src); }}}}
Hardik Mandankaa
@HardikMansaraa Continúa y edítalo en tu pregunta.
soktinpk
window.URL.createObjectURL('broken')arroja un error:Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
Juan Mendes

Respuestas:

150

ACTUALIZAR

Considere evitar el createObjectURL()método, mientras que los navegadores deshabilitan la compatibilidad con este. Simplemente adjunte el MediaStreamobjeto directamente a la srcObjectpropiedad de, HTMLMediaElementpor ejemplo, <video>elemento.

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

Sin embargo, si necesita trabajar con MediaSource, Blobo Filedebe crear una URL URL.createObjectURL()y asignarla HTMLMediaElement.src.

Lea más detalles aquí: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject


Respuesta anterior

Experimenté el mismo error cuando pasé a createObjectURLdatos sin procesar:

window.URL.createObjectURL(data)

Tiene que ser Blob, Fileu MediaSourceobjeto, no datos en sí. Esto funcionó para mí:

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

Consulte también el MDN para obtener más información: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

mimo
fuente
2
Hola ... ¿Qué hacer si estoy tratando con "application / pdf"? Recibo el mismo error en la consola cuando estoy tratando con un archivo PDF
N Sharma
@mimo Estoy usando el mismo código para descargar el archivo. Pero se están descargando dos archivos. Uno es el archivo correcto y un archivo adicional con el mismo nombre pero se está descargando el estado fallido. ¿Tienes alguna idea de por qué está sucediendo?
Shardul
Estoy confundido con este comentario, en MDN desalienta el uso de URL.createObjectURL()transmisiones de medios. Sin embargo, no indica NO usarlo para una entrada de archivo como se indica en la pregunta inicial.
alextrastero
140

Este error se debe a que la función createObjectURLestá en desuso para Google Chrome

Cambié esto:

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

a esto:

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

Esto funcionó para mí.

cristiano
fuente
+1 Ver ejemplo con
fallback
createObjectURL no está en desuso como se muestra aquí, pero ya no acepta objetos de flujo de medios
goodies4uall
Esta debería ser la respuesta.
DomingoR
hay otro problema video.play () parece estar restringido: DOMException: play () solo puede iniciarse por un gesto del usuario.
user889030
@ user889030 eso solo significa que no puede abrir una página web y esperar que comience la transmisión de la cámara web. Debe dejar que el usuario inicie explícitamente la transmisión. Simplemente use un botón para iniciar la transmisión
S.Ramjit
26

Mi código estaba roto porque estaba usando una técnica obsoleta. Solía ​​ser esto:

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

Luego lo reemplacé con esto:

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

Eso funcionó muy bien.

EDITAR: recientemente localMediaStreamha quedado en desuso y reemplazado por MediaStream. El último código se ve así:

video.srcObject = MediaStream;

Referencias

  1. Técnica obsoleta: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
  2. Técnica moderna desaprobada: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. Técnica moderna: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
Dani Amsalem
fuente
9

Tuve el mismo error para MediaStream. La solución es establecer una secuencia para el srcObject.

De los documentos :

Importante: Si todavía tiene código que se basa en createObjectURL () para adjuntar transmisiones a elementos multimedia, debe actualizar su código para simplemente configurar srcObject directamente en MediaStream.

max.kovpak
fuente
3

El problema es que las claves proporcionadas en el bucle no hacen referencia al índice del archivo.

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

La salida del código anterior es:

0
length
item

Pero lo que se esperaba era:

0
1
2
etc...

Luego, el error ocurre cuando el navegador intenta ejecutar, por ejemplo:

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

Sugiero implementación basada en el siguiente código:

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

Espero que esto pueda ayudar a alguien.

¡Saludos!

Hiago Takaki
fuente
1

Si está utilizando ajax, es posible agregar las opciones 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
fuente
-6

Lo arreglé descargando la última versión de la URL de GgitHub GitHub

AutoCiudad
fuente