Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better canvas calculations ,snaphot and download facility #2

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Better canvas calculations ,snaphot and download facility #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f7d9760
Capture support that revealed a problem in canvas calculations
Oct 19, 2019
ac9b370
Delete commanFunction.js
Oct 19, 2019
8415337
Canvas height calculation more accurate in otherPlayer
Oct 19, 2019
9f96dbb
Update README.md
Oct 19, 2019
1036dab
Improved snaphot with download support
Oct 20, 2019
66040f1
Download and better capture settings
Oct 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Video analysis tool using canvas drawing
## Video analysis tool using canvas drawing with capture and download support (of video plus drawing when no zoom or video rotation)

Video analysis tool is used for compare videos, suppose we have subscribed to an online learning any sports from videos. From instructor’s videos we are learning and practicing. Now if we want to compare my practice shorts with instructor’s video we can use this tool.

Expand Down
171 changes: 169 additions & 2 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link href="plugins/videojs/css/video-js.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

<title>Video Analysis tool using canvas drawing</title>
<title>Video Analysis tool using canvas drawing, with capture support</title>
</head>
<body>
<div class="container mt-5">
Expand Down Expand Up @@ -130,6 +130,14 @@
<button class="btn-slow-motion" data-motion="8" data-playername='otherPlayer'>8x</button>
</div>
</div>
<div class="slowmotion">
<h4>Snapshot</h4>
<div class="slowmotionblock">
<button class="btn-slow-motion" type="button" onclick="shoot()">Capture</button><br/>
<button class="btn-slow-motion" type="button" id="download_button">Download</button><br/>
<div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;"></div>
</div>
</div>
</div>

</div>
Expand All @@ -150,6 +158,165 @@

<script src="plugins/fabric/fabric.min.js"></script>
<script src="js/commanFunction.js"></script>

<script>

//Capture support , does not work with zoom or rotate, drawing is saved with a little shift on X-Axis
//by sos-productions.com

var videoId = 'sidebyside-video_2';
var scaleFactor = 1; //0.25;
var snapshots = [];
var snapshotsMax=4;
var snapshotMime='image/jpeg';
var snapshotFile='bunny%d.jpg';
var snapshotQuality=0.8;
var snapshotWidth=300;
var snapshotHeight=240;


/**
* Captures a image frame from the provided video element.
*
* @param {Video} video HTML5 video element from where the image frame will be captured.
* @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
*
* @return {Canvas}
*/
function capture(video, scaleFactor) {
if(scaleFactor == null){
scaleFactor = 1;
}

//see https://github.com/videojs/video.js/issues/2282
var videoWidth=parseInt(getComputedStyle(otherPlayer.el()).width); // true video.videoWidth
var videoHeight=parseInt(getComputedStyle(otherPlayer.el()).height);// true video.videoHeight

var w = videoWidth * scaleFactor;
var h = 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);
return canvas;
}

function getMergedDrawAndVideoCanvas() {
var video = document.getElementById(videoId+'_html5_api');

var canvas = capture(video, scaleFactor);
canvas.onclick = function(){
window.open(this.toDataURL());
};
//Merge canvas_draw with canvas
var canvas_draw=document.getElementById('video-canvas1');

//grab the context from your destination canvas "canvas"
var destinationCanvas=canvas;
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
var sourceCanvas=canvas_draw;
var w = canvas.width;
var h = canvas.height;
destCtx.drawImage(sourceCanvas, 0, 0, w,h);

return canvas;
}

var donwnloadMode=false;


/**
* Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
*/
function shoot(){

var canvas = getMergedDrawAndVideoCanvas()
donwnloadMode=false;
resizeImageCanvas(canvas,snapshotWidth,snapshotHeight);

}

//Resize and Download support using Blob technique

var links=[];


document.getElementById("download_button").onclick = function() {

var canvas = getMergedDrawAndVideoCanvas();
donwnloadMode=true;
resizeImageCanvas(canvas,snapshotWidth,snapshotHeight);
}

async function getImage({
canvas,
width,
height,
mime = snapshotMime,
quality = snapshotQuality,
}) {
return new Promise(resolve => {
const tmpCanvas = document.createElement('canvas');
tmpCanvas.width = width;
tmpCanvas.height = height;

const ctx = tmpCanvas.getContext('2d');
ctx.drawImage(
canvas,
0,
0,
canvas.width,
canvas.height,
0,
0,
width,
height,
);

tmpCanvas.toBlob(function(blob){
var href = URL.createObjectURL(blob);
console.log(href); // this line should be here

var link = document.createElement("a");
link.download = snapshotFile.replace(/%d/, links.length);
link.href=href;

var img = document.createElement("img");
img.src=href;
img.width=width;
img.height=height;
link.appendChild(img);

var output = document.getElementById('output');

snapshots.unshift(link);
output.innerHTML = '';

var iMax=snapshots.length;
if(iMax > snapshotsMax) {
iMax=snapshotsMax;
}

for(var i=0; i<iMax; i++){
output.appendChild(snapshots[i]);
}

if(donwnloadMode) {
link.click();
}

}, mime, quality);

});
}

async function resizeImageCanvas(canvas,width,height) {
const photo = await getImage({ canvas, width: width, height: height });
}
</script>

</body>
</html>
</html>
28 changes: 20 additions & 8 deletions js/commanFunction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -572,6 +572,9 @@ function deleteObjects() {
}
}


var otherPlayer;

jQuery(document).ready(function($) {

var player = videojs("sidebyside-video_1").ready(function() {
Expand All @@ -595,21 +598,30 @@ var player = videojs("sidebyside-video_1").ready(function() {
window.onresize = resizeVideoJS;
});

var otherPlayer = videojs("sidebyside-video_2").ready(function() {
otherPlayer = videojs("sidebyside-video_2").ready(function() {
var myPlayer = this, id = myPlayer.id();
var aspectRatio = 300/640;

function resizeVideoJS(){
var controlsHeight = 30;
var width = document.getElementById(id).parentElement.offsetWidth;
var height = document.getElementById(id).parentElement.offsetHeight;
aspectRatio = height/width;
//var controlsHeight = 30;
/*var width = document.getElementById(id).parentElement.offsetWidth;
var height = document.getElementById(id).parentElement.offsetHeight;*/
var width=parseInt(getComputedStyle(myPlayer.el()).width); // true video.videoWidth
var height=parseInt(getComputedStyle(myPlayer.el()).height);// true video.videoHeight

// aspectRatio = height/width;
// alert("height : "+height+"width : "+width);
// alert(width/height)
// myPlayer.width(width).height( width * aspectRatio );
$("#video-canvas1").width(width).height( width * aspectRatio -controlsHeight);
$("#video-canvas1").next(".upper-canvas").width(width).height( width * aspectRatio -controlsHeight);
$("#video-canvas1").next(".canvas-container").width(width).height( width * aspectRatio - controlsHeight );
/* $("#video-canvas1").width(width).height( width * aspectRatio);// -controlsHeight);
$("#video-canvas1").next(".upper-canvas").width(width).height( width * aspectRatio);// -controlsHeight);
$("#video-canvas1").next(".canvas-container").width(width).height( width * aspectRatio);// - controlsHeight );*/
//
$("#video-canvas1").width(width).height(height);// -controlsHeight);
$("#video-canvas1").next(".upper-canvas").width(width).height(height);// -controlsHeight);
$("#video-canvas1").next(".canvas-container").width(width).height(height);


//myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS();
Expand Down