How to fix "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.."

Question

I am getting that error message when I try to retrieve and play a video file(blob),stored in indexedDB.I basically open a transaction to the db,get the file and then assign the source object to the HTML video element.

Basically I managed to store the videos in indexedDB,all i want to do now is retrieve and play the video files in the browser. I get that error message.I did some reading and found out it could be due to the deprecation of "createObjectURL" but I am not sure as to how to incooperate the new approach into my code.

 <script type="text/javascript"> 

      (function () {

        if (!('indexedDB' in window)) {
  console.log('This browser doesn\'t support IndexedDB');
  return;
}
    // IndexedDB
    window.indexedDB = window.indexedDB || window.webkitIndexedDB || 
                       window.mozIndexedDB || window.OIndexedDB || 
                       window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || 
                     window.webkitIDBTransaction ||
                     window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1.0;
 
    var indexedDB = window.indexedDB;
 
    // Create/open database
    var request = indexedDB.open("Syafunda_Videos");
     
    request.onerror = function (event) {
        // Failed to Open the indexedDB database
    };
 
    request.onsuccess = function (event) {
        db = request.result;
         
        // Open a transaction to the database
        var transaction = db.transaction(["Videos"], "readwrite");
 
        //Retrieve the video file
        transaction.objectStore("Videos").get("1").onsuccess = function (event) {        
        var videoFile = event.target.result;
        var URL = window.URL || window.webkitURL;
        var videoURL = URL.createObjectURL(videoFile) ;
                       
         // Set video src to ObjectURL        
        var videoElement = document.getElementById("video");
            videoElement.setAttribute("src", videoURL);
 
        var mimeDisplayElement = document.getElementById("vidMimeDisplay");
            mimeDisplayElement.innerHTML = videoFile.type;
        };
    }
})();

</script>

Possible duplicate of [Failed to execute 'createObjectURL' on 'URL':](https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url) — Jack Bashford, Feb 05 '19 at 07:46

score 0 · Answer 1 · answered Feb 05 '19 at 16:25

0

The problem most likely has to do with what videoFile is.

URL.createObjectURL needs a Blob object to generate a URL for you, but most likely videoFile is a regular JavaScript object, where the video in question is a property on that object.

Probably you've got something like

videoFile = {
    [primaryKey]: "1",
    yourVideo: Blob(...)
};

How is your document stored? You might need to further pull your video file off the event.target.result object.

answered Feb 05 '19 at 16:25

Ryan Dabler

381
3
8

i think this has something to do with browsers,its working perfectly in Mozilla for Developers and only showing that error in chrome – BLESSING Feb 07 '19 at 12:27
Interesting. I've never developed using FF. I'll have to check out how FF uses indexeddb, because it's weird they would be so different for something that's a web API. What does a typical document look like in your IDB that holds the blob file you want to pull out? – Ryan Dabler Feb 07 '19 at 18:07
I figured it out.It was something really stupid.When I was passing the key to the get method,I was wrapping the key with double quotes whereas its a number not a string.So i just removed the double quotes now its working.Lol. thanks for your pointers and everything – BLESSING Feb 08 '19 at 08:56

How to fix "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.."

1 Answers1