javascriptwebpvp8

Render VP8 Frame from webP or webM

Basically webM and webP are encoded with VP8 data. But I need only VP8 data at this moment. I tried to render VP8 data from whammy and MediaRecorder, but all ends in vain.

So, Is there anyway to render VP8 frame from webP image in javascript ?

Solution 
  • //VP8 data from webP in Javascript

var url = canvas.toDataURL('image/webp');
url = url.slice("data:image/webp;base64,".length); 
var str = atob(url); //decode the base64 encoded string
var array = new Uint8Array(str.length);
for(var i=0;i<array.length;i++)
    array[i] = str.charCodeAt(i);
var VP8_array = array.slice(20);  //Remove the header part[see ref]

    Reference : https://en.wikipedia.org/wiki/WebP