javascript - Failed to execute 'createObjectURL' on 'URL': - Stack Overflow

admin管理员组

文章数量:1128329

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); 
            }
       }           
   } 
} 

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); 
            }
       }           
   } 
} 

• javascript
• createobject

Share Improve this question Follow edited Aug 30, 2019 at 20:10 georgeawg 48.9k1313 gold badges7676 silver badges9898 bronze badges asked Nov 25, 2014 at 7:14 Hardik MandankaaHardik Mandankaa 3,36844 gold badges2525 silver badges3232 bronze badges 8

• 7 Hi Hardik, what are you passing to your createObjectURL(...) function when you get that error? – Arthur Weborg Commented Nov 25, 2014 at 7:38
• 4 object must be a File object or a Blob object to create a object URL for.see devdocs.io/dom/window.url.createobjecturl – yxf Commented Nov 25, 2014 at 7:38
• 1 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); } } } } – Hardik Mandankaa Commented Nov 25, 2014 at 7:46
• @HardikMansaraa Go ahead and edit that in to your question. – soktinpk Commented Dec 5, 2014 at 3:16
• window.URL.createObjectURL('broken') throws an error: Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided. – Ruan Mendes Commented Nov 17, 2015 at 14:36

 |  Show 3 more comments

14 Answers 14

Sorted by: Reset to default 307

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

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.

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

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

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.

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!

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);
  }
});

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;

//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);
        });

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.

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

video.srcObject=stream;

In jQuery - I had to add:

    xhrFields: {
        responseType: 'blob'
    }

to data: of my request

In case you're using Axios and noticed my comment, just add this line: responseType: 'blob'

the full code would be:

const response = await axios.get(`/example/image`, {
      responseType: 'blob' // This ensures the response is treated as binary data (Blob)
});

This tells Axios to handle the response as a Blob, which is useful when dealing with binary data such as images or file downloads.

GLHF :)

I fixed it bydownloading the latest version from GitHub

本文标签： javascriptFailed to execute 39createObjectURL39 on 39URL39Stack Overflow