genrimages
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
video-frame.html
text/html

Download raw (2.2 KB)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<title>GENRIMAGES</title>
<script src="jquery-3.1.1.min.js"></script>

</head>

<body>
<div style="position:absolute;top:10px;left:10px;width:600px;">
<video id="myvideo" controls height="474" width="592">
<source src="sarah.mp4">
	Your browser doesn't support HTML5 video. Try a different browser instead.
</video>
<div style="font-size:0.85em;margin-top:10px;">
    Jouer la video et cliquer sur le lien pour capturer l'image
    <div>
	<a id="pause_lnk" href="#">Capturer l'image</a> &rarr;
	<span style=""><input type="text" id="title" value="" /></span> &rarr;
	<a id="send_lnk" href="#">Sauver l'image</a>
	<div id="log"></div>
    </div>
</div>
<div style="position:absolute;top:10px;left:610px;">
<canvas width="720" height="576" id="mycanvas" style="border:1px solid #CCC;">Sorry, no canvas available</canvas>
</div>

<script>
$( document ).ready(function() {

var v=document.getElementById("myvideo");
var c = document.getElementById("mycanvas");
console.log("Source "+$('source').attr('src'));
var fname='';
function pause_and_capture() {
	v.pause();
     $('#log').html(v.currentTime+' / '+v.duration);
     fname=$('source').attr('src')+'-'+v.currentTime+"-capture.png";

        var ctx = c.getContext("2d");
	ctx.drawImage(v,1,1);	
	//ctx.font = "30px Arial";
        //ctx.fillText("This is a sample text",170,170);
}
function send_to_server(){
  var dataURL = c.toDataURL();
  $.ajax({
    type: "POST",
      url: "/genrimages/plateforme/site/?q=genrimages/create_document_visuel",
    data: { 
     imgBase64: dataURL,
	imgName: fname,
	imgTitle: $('#title').val(),
	vidName:$('source').attr('src')
    }
  }).done(function(o) {
  console.log('saved'); 
  // If you want the file to be visible in the browser 
  // - please modify the callback in javascript. All you
  // need is to return the url to the file, you just saved 
  // and than put the image in your browser.
});
}
pause_lnk.addEventListener('click', pause_and_capture, false);
send_lnk.addEventListener('click',send_to_server,false);

});
</script>
</body> </html>