Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Issue with rendering video on canvas - reg

7 views
Skip to first unread message

Satyanarayana N

unread,
Jul 4, 2016, 1:15:51 AM7/4/16
to web...@lists.mozilla.org
Hi,

I want to achieve the following task.

(1) Load a video file (mp4) from local file system, preview it on canvas element
and upload the file on to remote server.

The code that i have written for this purpose which fires on onchange event
while selecting the file from local file system is as follows.

var files = evt.target.files;
var reader = new FileReader();
if (files[0].type.match('video.*')) {
figure = 'video';
vcanvas = document.getElementById('vcanvas');
vcanvas.onplay = function(event) {
draw(vcanvas,whiteboardContext);
displayUploadButton(); //For displaying a button to upload the file
after successful preview on canvas
}
reader.onloadend = function() {
console.log('reader.readyState ' + reader.readyState);
vcanvas.src = reader.result;
progressbar.value = 0;
progressbar.style.display = 'none';
progressbar.style.zIndex = '0';
vcanvas.play();
}
reader.readAsDataURL(files[0]);
}

the draw method is written as follows.

function draw(v, c) {
if (v.ended || v.paused) {
vcanvas = undefined;
clearTimeout(vctimer_id);
return true;
}
c.drawImage(v, 0, 0, whiteboard.width, whiteboard.height);
console.log(v.currentTime);
vctimer_id = setTimeout(draw, 20, v, c);
}

Issue:

When I choose a small video of size (375KB) it is working fine but when I choose
large file (size: 38.2 MB) it is failing to load.

Can you tell me what is going wrong here, i am unable to resolve the issue.

Regards,
Satya
-------------------------------------------------------------------------------------------------------------------------------
[ C-DAC is on Social-Media too. Kindly follow us at:
Facebook: https://www.facebook.com/CDACINDIA & Twitter: @cdacindia ]

This e-mail is for the sole use of the intended recipient(s) and may
contain confidential and privileged information. If you are not the
intended recipient, please contact the sender by reply e-mail and destroy
all copies and the original message. Any unauthorized review, use,
disclosure, dissemination, forwarding, printing or copying of this email
is strictly prohibited and appropriate legal action will be taken.
-------------------------------------------------------------------------------------------------------------------------------

0 new messages