CODEWITHSUNDEEP
javascriptwebrtcblobvideo.jscreateobjecturl
gertschi
gertschi

Reputation: 13

createObjectURL: Type Error in Safari when using Blob

In HTML <video> object, I cannot play a video recorded by the video.js-record library. I checked the Blob returned in the player.recordedData variable and wanted to assign it to the object like mentioned in the example from the Documentation:

recordedVideo.src = createObjURL(this.player.recordedData);

It fails with an error on this specific line:

Unhandled Promise Rejection: TypeError: Type error

--

(I am already checking the use of URL vs webkitURL using this function:

function createObjURL ( file ) {
    if ( window.webkitURL ) {
        return window.webkitURL.createObjectURL( file );
    } else if ( window.URL && window.URL.createObjectURL ) {
        return window.URL.createObjectURL( file );
    } else {
        return null;
    }
}

and it seems to use the right version.)

Upvotes: 1

Views: 2947

Answers (1)

dontcallmedom
dontcallmedom

Reputation: 2470

Looking at the document of video.js-record, player.recordedData is not a Blob (what you would need to pass to createObjectUrl) but an array of blob segments - this would match the TypeError.

The following change should help:

function createObjURL ( blobPieces ) {
    var blob = new Blob(blobPieces, { type: 'video/webm' });
    if ( window.webkitURL ) {
        return window.webkitURL.createObjectURL( blob );
    } else if ( window.URL && window.URL.createObjectURL ) {
        return window.URL.createObjectURL( blob );
    } else {
        return null;
    }
}

Upvotes: 1

Related Questions