CODEWITHSUNDEEP
htmlvideovideo-thumbnails
AzharTheGreat
AzharTheGreat

Reputation: 57

i want capture and upload thumbnail from html5 video tag

I want capture and upload thumbnail from html5 video tag,

here is my code

    var w = 135;//video.videoWidth * scaleFactor;
    var h = 101;//video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');

    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(_video, 0, 0, w, h);
    canvas.toDataURL("image/jpg"); 
    var blob =  canvas.msToBlob();

I got this exception "Object # has no method 'msToBlob'" in chrome browser . can anyone help, what's wrong here ?

Upvotes: 0

Views: 765

Answers (2)

1j01
1j01

Reputation: 4199

The ms stands for Microsoft, so msToBlob would only be available in IE. Other browsers (once supported) would probably prefix it as well (webkitToBlob) and eventually switch to an unprefixed version (toBlob)

Even if you checked for support with various prefixes, support is still currently limited. Instead, you can use toDataURL which returns a base64 encoded URI which you can use as the src attribute of an img element:

var b64 = canvas.toDataURL("image/jpg");
//later... 
thumbnailImg.src = b64;

Upvotes: 0

Dominic Green
Dominic Green

Reputation: 10258

This is because the toBlob method is not supported by chrome yet. I checked the nightly builds and cannot see it.

It was discussed here for a while but nothing came off it, and firefox are still waiting for the case to be better defined.

So in short chrome doesn't support this yet, and I think its only really supported in ie9 and up so prob best not to use it on production sites yet.

Other suggestions if you are trying to store a screen grab off a canvas is to maby explore using canvas.toDataURL(); and then storing it as base64.

Sorry it wasn't a better result for you

To see updates in Chrome check:

http://code.google.com/p/chromium/issues/detail?id=67587

Upvotes: 0

Related Questions