Take a snapshot from a data-uri video

Question

I'm trying to get a snapshot from a video data-uri

var video = document.createElement('video');
video.src = uri;

canvas = document.createElement('canvas');
canvas.style.visibility = 'hidden';
document.body.appendChild(canvas);

var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var snapshot = canvas.toDataURL();

But this doesn't work. Why?

Answer 1

Although it's a Data URI and you might expect the video to load instantly, you do need to listen for the video's canPlay event ( see MDN ).

 function onFile(ev) { var file = ev.target.files[0]; console.log(); var reader = new FileReader(); reader.addEventListener('load', function() { taksVideoSnapshot(reader.result); }, false); reader.readAsDataURL(file); } function taksVideoSnapshot(videoUri) { var video = document.createElement('video'); video.addEventListener('canplay', function() { canvas = document.createElement('canvas'); canvas.style.visibility = 'hidden'; document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height); var snapshot = canvas.toDataURL(); console.log('Snapshot', snapshot.length); showThumb(snapshot); }, false); video.src = videoUri; document.body.appendChild(video); } function showThumb(snapshot) { var thumb = document.createElement('img'); thumb.src = snapshot; document.body.appendChild(thumb); } 

 <input type="file" onchange="onFile(event)"> 

Also see on JSBin .