Failed to execute 'createObjectURL' on 'URL':

Question

Display Below error in Safari.

Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

My Code is:

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

This is my Code for 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); 
            }
       }           
   } 
} 

Manns

Hi Hardik, what are you passing to your createObjectURL(...) function when you get that error? – Haroun

object must be a File object or a Blob object to create a object URL for.see devdocs.io/dom/window.url.createobjecturl – Peewee

This is my Code for 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); } } } } – Manns

@HardikMansaraa Go ahead and edit that in to your question. – Satinwood

window.URL.createObjectURL('broken') throws an error: Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. – Funnel

I had the same problem because I was importing JSZip.js twice. – Hymnal

@Peewee is right, I was getting this error because I was passing an ArrayBuffer instead of a Blob – Catfish

using Vue.js, when I change fetch(...).then((response) => response.blob()).then(function(blob){var url = window.URL.createObjectURL(blob)}) to fetch(...).then((response) => { response.blob()} ).then(function(blob){var url = window.URL.createObjectURL(blob)}), this error occurs. it should be then((response) => { return response.blob()} ) or just then((response) => response.blob() ). – Uncouth

Answer 1

I experienced the same error, when I passed raw data to createObjectURL:

window.URL.createObjectURL(data)

It has to be a Blob, File or MediaSource object, not data itself. This worked for me:

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

Check also the MDN for more info: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

---

UPDATE

Back in the day we could also use createObjectURL() method with MediaStream objects. This use has been dropped by the specs and by browsers.
If you need to set a MediaStream as the source of an HTMLMediaElement just attach the MediaStream object directly to the srcObject property of the HTMLMediaElement e.g. <video> element.

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

However, if you need to work with MediaSource, Blob or File, you still have to create a blob:// URL with URL.createObjectURL() and assign it to HTMLMediaElement.src.

Read more details here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

Soneson

Hi.. What to do if I am dealing with "application/pdf" ? I am getting the same error on console when I am dealing with PDF file – Wingate

@Soneson I am using same code to download file. But two files are getting downloaded. One is correct file and one extra file with same name but failed status is getting downloaded. Do you have any idea why it is happening? – Ambroid

I'm confused with this comment, in MDN it discourages the use of URL.createObjectURL() for media streams. However it doesn't state NOT to use it for a file input as stated in the initial question. – Susiesuslik

Answer 2

This error is caused because the function createObjectURL no longer accepts media stream object for Google Chrome

I changed this:

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

to this:

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

This worked for me.

Roper

+1 See example with fallback developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/… – Krug

createObjectURL is not deprecated as shown here but no longer accepts media stream object – Unprofitable

This should be the answer. – Lettielettish

there is one another problem video.play() seems to be restricted : DOMException: play() can only be initiated by a user gesture. – Bancroft

@Bancroft that just means you can't open a webpage and expect the webcam stream to start. You have to let the user explicitly start the stream. Just use a button to start the stream – Photogrammetry

Sorry to downvote, but while this answer is correct, it does not answer the OP's question which was about files, not media streams. – Increasing

Answer 3

My code was broken because I was using a deprecated technique. It used to be this:

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

Then I replaced that with this:

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

That worked beautifully.

EDIT: Recently localMediaStream has been deprecated and replaced with MediaStream. The latest code looks like this:

video.srcObject = new MediaStream();

References:

1. Deprecated technique: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
2. Modern deprecated technique: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
3. Modern technique: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

Balsaminaceous

Answer 4

Video with fall back:

try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}
video.play();

From: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

Krug

Answer 5

I had the same error for the MediaStream. The solution is set a stream to the srcObject.

From the docs:

Important: If you still have code that relies on createObjectURL() to attach streams to media elements, you need to update your code to simply set srcObject to the MediaStream directly.

Temporary

Answer 6

The problem is that the keys provided in the loop do not refer to the index of the file.

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

The output of the above code is:

0
length
item

But what was expected was:

0
1
2
etc...

Then the error occurs when the browser tries to execute, for example:

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

I suggest implementation based on the following code:

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

I hope this can help someone.

Greetings!

Grouch

Answer 7

If you are using ajax, it is possible to add the 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);
  }
});

Haymes

Answer 8

If you are using angular this tutorial will be helpful: link. However you will need to replace this line:

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

with this, since createObjectURL() is deprecated on chrome for MediaStream.

this.video.srcObject = stream;

Bander

Answer 9

//my code was:

this._videoEl = videoEl;
        navigator.mediaDevices.getUserMedia({
            video : true
        }).then(stream => {
            this._videoEl.src = URL.createObjectURL(stream);
            this._videoEl.play();
        }).catch(err => {
            console.log(err);
        });

//and replace to this worked for me :

this._videoEl = videoEl;
        navigator.mediaDevices.getUserMedia({
            video : true
        }).then(stream => {
            this._videoEl.srcObject = stream;
            this._videoEl.play();
        }).catch(err => {
            console.log(err);
        });

Camouflage

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Whiffen

This answer aligns with more recent MDN examples at developer.mozilla.org/en-US/docs/Web/API/MediaDevices/… which show video.srcObject = mediaStream; without using URL.createObjectURL(). – Maeda

Answer 10

I was able to fix this by checking if the object is null. {object ? URL.createObjectURL(object) : "default.png"}

This made me to conclude that the error occur when object is null.

Disillusion

Answer 11

I tried few things, but for me simply assigning stream to src worked.

video.srcObject=stream;

Toinette

Answer 12

In jQuery - I had to add:

    xhrFields: {
        responseType: 'blob'
    }

to data: of my request

Veliz

Answer 13

I fixed it bydownloading the latest version from GitHub

Severus