Hi, thanks!
I wrote this code 'cause I had the same issue with a cordova app (android 6.4) and it's working. Maybe you have some error, have you checked the logcat or console in web inspector?
Thanks for your response. I am also developing a digital signage system and using vidoe.js (videojs.com/) as the video player framework along with html2canvas javascript for capture. In the CMS preview (in desktop web browser) your code implementation works like a charm.
I am using the same set of code in cordova player app where the code fails. i.e. it gives black screen in place of video element. I checked the console in web inspector in visual studio cordova project and it doesn't produce any error. The code doesn't work in android emulator as well as on my tablet having android 4.4. could android 4.4 be the problem? does this code work only android 6.4 or higher only?
By the way I am also using Electron framework to build windows desktop player app with same code and in there, your code works absolutely fine.
I have this code working in Android 4.2 onward. But I've tested this on android devices that are not phones or tablets and they have full HD resolution. Maybe you can set a breakpoint and verify that the video background image is being generated before calling html2canvas. And also you should try the last release of html2canvas.
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";
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";
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
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi, thanks!
I wrote this code 'cause I had the same issue with a cordova app (android 6.4) and it's working. Maybe you have some error, have you checked the logcat or console in web inspector?
Hi Brian,
Thanks for your response. I am also developing a digital signage system and using vidoe.js (videojs.com/) as the video player framework along with html2canvas javascript for capture. In the CMS preview (in desktop web browser) your code implementation works like a charm.
I am using the same set of code in cordova player app where the code fails. i.e. it gives black screen in place of video element. I checked the console in web inspector in visual studio cordova project and it doesn't produce any error. The code doesn't work in android emulator as well as on my tablet having android 4.4. could android 4.4 be the problem? does this code work only android 6.4 or higher only?
By the way I am also using Electron framework to build windows desktop player app with same code and in there, your code works absolutely fine.
so is the android version a problem???
thanks
rex
Hi! I meant the cordova android version 6.4.
I have this code working in Android 4.2 onward. But I've tested this on android devices that are not phones or tablets and they have full HD resolution. Maybe you can set a breakpoint and verify that the video background image is being generated before calling html2canvas. And also you should try the last release of html2canvas.
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";
+++++++++++++++++++++++++++
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";
so yes you are right, the above code not generating image from video element using drawImage function...
any pointer???
thanks
rex
Hi Rex. I had no idea but there are many factors to check:
I hope you find what's is going on an we can update this post.
Regards
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