Search code examples
javascriptcompressionprogressclip

Receiving "notify" progress update events before the onVideoCreated callback during clipChamp compression


We are using the clipChamp API to compress our user's videos. We use the 'direct input' and 'blob output' options so that our users only interact with our UI and not clipChamp's.

Since we are not using clipChamp's UI we don't have a determinate progress bar. The documentation talks about using a third parameter notify callback on the onVideoCreated callback, but this does not seem to do anything at all.

Anyone have any experience with this?

onVideoCreated: function(blob: Blob, done: () => void, fail: () => void, notify: (percent: number) => void): any {

        notify(10);

        notify(30);

        notify(50);

        notify(90);

        notify(100);

        done();

}.bind(this)

// load options into the clipchamp inititalizer
this.clipChampProcess = clipchamp(clipChampOptions);

// inititalize clipchamp compression
this.clipChampProcess.open(clipChampOptions);


Solution

  • When calling notify with different percentage values, the progress bar inside the Clipchamp widget should reflect that. Alternatively to using the done/fail/notify callbacks, you can also return a promise from "onVideoCreated", such as jQuery's Deferred. The equivalent of your code snippet would be:

    onVideoCreated: function(blob) {
       var deferred = $.Deferred();
    
       deferred.notify(10);
       deferred.notify(30);
       deferred.notify(50);
       deferred.notify(90);
       deferred.notify(100);
    
       deferred.resolve();
    
       return deferred.promise();
    }
    

    In real life, the notify and resolve (or reject) calls would normally happen asynchronously, such as to reflect the progress, success or failure of uploading the video blob that is passed to "onVideoCreated".