Discussion on: Javascript: html2canvas with videos

[rexn8r]

hi brian,

thanks for your response.

I am running cordova 6.3.1 with android 5.2.1 in visual studio 2017.

the video background image is being generated but its black. below is the code before calling html2canvas;

+++++++++++++++++++++
//take screenshot
var canvas = document.getElementById("canvas"); // declare a canvas element in your html
var ctx = canvas.getContext("2d");
var videos = document.querySelectorAll("video");
var w, h;
for (var i = 0, len = videos.length; i < len; i++) {
var v = videos[i];
if (!v.src) continue; // no video here
try {
w = v.videoWidth;
h = v.videoHeight;
canvas.width = w;
canvas.height = h;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(v, 0, 0, w, h);
var a = canvas.toDataURL();
//document.getElementById("img1").src = a; -->> generates black image
v.style.backgroundImage = 'url(' + a + ')';
v.style.backgroundSize = "cover";

                ctx.clearRect(0, 0, w, h); // clean the canvas
            } catch (e) {
                console.log(e);
                continue;
            }
        }

+++++++++++++++++++++++++++

i thought the video.js framework could be a problem so i tried following code to get the actual HTMLVideoElement from it but it even generates transparent image;

---

//$('.video-js').each(function () {
// videojs(this.id).ready(function () {
// var myPlayer = this.tech({ IWillNotUseThisInPlugins: true }).el();
// var w, h;
// try {
// w = myPlayer.videoWidth;
// h = myPlayer.videoHeight;
// canvas.width = w;
// canvas.height = h;
// ctx.fillRect(0, 0, w, h);
// ctx.drawImage(myPlayer, 0, 0, w, h);
// var a = canvas.toDataURL();
// document.getElementById("img1").src = a;
// myPlayer.style.backgroundImage = 'url(' + a + ')';
// myPlayer.style.backgroundSize = "cover";

        //            ctx.clearRect(0, 0, w, h); // clean the canvas
        //        } catch (e) {
        //            console.log(e);
        //            continue;
        //        }
        //    });
        //});

---

so yes you are right, the above code not generating image from video element using drawImage function...

any pointer???

thanks
rex

[protium]

Hi Rex. I had no idea but there are many factors to check:

• video encoding
• the video is loaded locally?
• trying with another video
• trying without videoJS
• check if video metadata is loaded correctly (height, width)

I hope you find what's is going on an we can update this post.

Regards

[rexn8r]

Tried different video files, video files are stored in local sdcard and rendered from there. metadata are loaded, can see correct width and height of the video. can see HTMLVideoElement in the web console, tried without videoJS (i have been using videoJS cause it allows to play video without touch interaction). No luck whatsoever.

are you using plain video element in your code? if so how do u auto play the element? or you play the video with control and then capture it?

thanks
rex