Capture d'ecran

Télécharger le projet
Commenter

Description

tout comme l'indique l'intitule la source sert a faire une capture d' l'ecran ou d'une des fenetre

la source fait suite a un Tutoriels sur la capture de video sauf que la il s'agit d'utiliser getDisplayMedia 

<!DOCTYPE html> 
<html lang="fr">
<head>
    <title>capture ecran</title> 
    <meta charset="utf-8">
 
<script type="text/javascript">
 
var k_capture={

 strm:"",
 canvas2:"",

 ouvrir_ecran:function (){

  navigator.mediaDevices.getDisplayMedia({ audio: false,video: { width: screen.width, height: screen.height }})

   .then(function(stream) {

   k_capture.strm=stream;

   document.getElementById('direct').srcObject=stream;
   document.getElementById('direct').play();
   })
 
   .catch(function(err) {
   console.log('erreur detecté: ' + err);
  })
 },


 capture:function(){

  var delai=Number(document.getElementById('delai').value)*1000;
  
  setTimeout(function(){var vivi = document.getElementById('direct');

  var canvas1 = document.getElementById('capture');
  var ctx =canvas1.getContext('2d');
  ctx.clearRect(0, 0, canvas1.width, canvas1.height);
  
  var a=canvas1.width/vivi.videoWidth
  
  
  var b=canvas1.height/vivi.videoHeight
  
  if(a<b){
  
  var taille_w=a*vivi.videoWidth
  var taille_h=a*vivi.videoHeight
  
  var gauche=0
  var haut=((canvas1.height-taille_h)/2)
  
  }
  
  else{
  
  var taille_w=b*vivi.videoWidth
  var taille_h=b*vivi.videoHeight
  
  var gauche=((canvas1.width-taille_w)/2)
  var haut=0
  
  }

  
  
  ctx.drawImage(vivi, gauche,haut, taille_w, taille_h);
  
  
  k_capture.canvas2 = document.createElement('canvas');
  k_capture.canvas2.height=vivi.videoHeight;
  k_capture.canvas2.width=vivi.videoWidth;
  
  var ctx2 =k_capture.canvas2.getContext('2d');
  ctx2.drawImage(vivi, 0,0, vivi.videoWidth, vivi.videoHeight);
  }
  ,delai)

 },


 fermer_ecran:function(){

  var mediaStream=k_capture.strm;
  console.log('etat >>> '+mediaStream);
  var tracks = mediaStream.getTracks();

  for(var i=0; i<tracks.length;i++){
   tracks[i].stop();
   console.log("message: "+tracks[i].label+" déconnecté");
  }

  k_capture.strm = null;
 },


 telecharger:function(){

  if(navigator.msSaveOrOpenBlob){

   var blobObject=k_capture.canvas2.msToBlob();

   window.navigator.msSaveOrOpenBlob(blobObject, "image.png");
  }

  else{

   var canvas = k_capture.canvas2;
   var elem = document.createElement('a');
   elem.href = canvas.toDataURL("image/png");
   elem.download = "nom.png";
   var evt = new MouseEvent("click", { bubbles: true,cancelable: true,view: window,});
   elem.dispatchEvent(evt);
  }
 },

 prepare_envoi:function(){

  var canvas = document.getElementById('capture');
  canvas.toBlob(function(blob){k_capture.envoi(blob)}, 'image/png');
 },

 envoi:function(blob){

  console.log(blob.type);

  var formImage = new FormData();
  formImage.append('image_a', blob, 'image_a.png');

  var ajax = new XMLHttpRequest();

  ajax.open("POST","http://scriptevol.free.fr/contenu/reception/upload_camera.php",true);

  ajax.onreadystatechange=function(){

   if (ajax.readyState == 4 && ajax.status==200){

    console.log(ajax.responseText+" _envoie terminé");
    document.getElementById("jaxa").innerHTML+=(ajax.responseText);
   }
  }

  ajax.onerror=function(){

   alert("la requette a échoué");
  }

  ajax.send(formImage);
  console.log("envoie en cours");
 }
}

function init(){

var largeur=(document.getElementById('direct').parentNode.offsetWidth/2)-20;

document.getElementById('direct').width=largeur
document.getElementById('capture').width=largeur

document.getElementById('direct').height=(largeur/16)*9
document.getElementById('capture').height=(largeur/16)*9
}

onload=init
 
</script>
 
</head> 

<body>

<div style="padding:0px;width:100%; margin:auto">

<video id='direct'  height=360 controls></video>

<canvas id='capture' height=360 style='background:gray'></canvas>

</div>

<br>
<button onclick="k_capture.ouvrir_ecran()" style='height:50px;width:100px;margin:auto'>choisir zone

<button id='fermer' style='height:50px;width:100px;margin:auto' onclick="k_capture.fermer_ecran()">stopper zone</button>

<div style='height:22px;margin:auto;display:inline-block;background:#e1e1e1;border:1px solid #aaaaaa;padding:12px;color:#444444' >
<label for="delai">retardateur:</label>
<input type="text" id="delai" size="1" value="3" />
</div>

<button onclick="k_capture.capture()" style='height:50px;width:auto;margin:auto'>capturer</button>

<button id='envoi' onclick="k_capture.prepare_envoi()" style='height:50px;width:100px;margin:auto'>envoyer</button>

<button onclick="k_capture.telecharger()" style='height:50px;width:100px;margin:auto'>telecharger</button>
<br>

<br>

<div id="jaxa"></div>

</body>
</html>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)