Enregistrer une capture vidéo de l'écran

Télécharger le projet
Commenter

Description

enregistrer une capture vidéo de l'écran ou une fenetre a partir du navigateur c'ette source est la suite de ma precedente source qui elle faisait une capture simple

on peut aussi faire une capture d'un partie de jeu en utilisant la capture de tout l'ecran. 

<!DOCTYPE html> 
<html lang="fr">
<head>
    <title>canvas rec</title> 
    <meta charset="utf-8">
    
<script type="text/javascript"> 


var k_capture={

 media_rec:'',

 stream_ecran:"",

 chunks : [],

 video_url:"",

 blob:"",


 ouvrir_capture:function (){
 
  var audio_check = document.getElementById('audio').checked;

  var config_video = {};
  
  
  var frameRate = document.getElementById('frameRate');
  var resolutions = document.getElementById('resolutions');
  var curseur = document.getElementById('curseur');
  
  
  if(frameRate.value !== 'defaut') {
   config_video.frameRate = frameRate.value;
  }

  if(curseur.value !== 'default') {
   config_video.cursor = curseur.value;
  }

  if(resolutions.value !== 'defaut') {
   if (resolutions.value === 'resolution-courante') {
    config_video.width = screen.width;
    config_video.height = screen.height;
   }

   if (resolutions.value === '4K') {
    config_video.width = 3840;
    config_video.height = 2160;
   }

   if (resolutions.value === '1080p') {
    config_video.width = 1920;
    config_video.height = 1080;
   }

   if (resolutions.value === '720p') {
    config_video.width = 1280;
    config_video.height = 720;
   }

   if (resolutions.value === '480p') {
    config_video.width = 853;
    config_video.height = 480;
   }

   if (resolutions.value === '600p') {
    config_video.width = 800;
    config_video.height = 600;
   }
  }
  console.log(audio_check)
  
  navigator.mediaDevices.getDisplayMedia({ audio: audio_check,video: config_video })

   .then(function(stream) {
    
    k_capture.stream_ecran=stream
     
    document.getElementById('direct').srcObject=stream;
    document.getElementById('direct').play();
     
    document.getElementById('direct').oncanplay=function(){

     navigator.mediaDevices.getUserMedia({audio:true,video:false})

      .then(function(stream_audio) {
         
       var all_track_audio=stream_audio.getTracks()

       for(var i=0; i<all_track_audio.length;i++){

        if(all_track_audio[i].kind=="audio"){

         

         k_capture.stream_ecran.addTrack(all_track_audio[i]);

         
        }
       }

       k_capture.init_rec()

      })

      .catch(function(err) {
       console.log('pas de micro branche ?: ' + err);
       k_capture.init_rec()
      })

     }
    })

   .catch(function(err) {
    console.log('erreur detecté: ' + err);
  })
 },


 init_rec:function() {

  k_capture.media_rec = new MediaRecorder(k_capture.stream_ecran);

   k_capture.media_rec.onstop = function(e) {

    k_capture.blob = new Blob(k_capture.chunks, { 'type' : 'video/webm; codecs=opus' });
    k_capture.chunks = [];
    k_capture.video_url = window.URL.createObjectURL(k_capture.blob);

    document.getElementById('resultat').src = k_capture.video_url;

    console.log("arret de l'enregistrement");
    }

  k_capture.media_rec.ondataavailable = function(e) {
   k_capture.chunks.push(e.data);
  }.bind(k_capture)
 },

 rec:function() {

  window.URL.revokeObjectURL(k_capture.video_url);
  k_capture.chunks = [];
  k_capture.media_rec.start();
  console.log(k_capture.media_rec.state);
  console.log("demarage enregistrement");
  document.getElementById('marche').style.color = "red";
 },

 arret_rec:function(){

  k_capture.media_rec.stop();
  console.log(k_capture.media_rec.state);
  document.getElementById('marche').style.color = "black";
 },


 fermer_camera:function(){

  var mediaStream=k_capture.stream_ecran;
  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.stream_ecran = null;
 },


 telecharger:function(){

  if(navigator.msSaveOrOpenBlob){

   var blobObject=k_capture.blob

   window.navigator.msSaveOrOpenBlob(blobObject, "video.webm");
  }

  else{

   var elem = document.createElement('a');
   elem.href = k_capture.video_url;
   elem.download = "video.webm";
   var evt = new MouseEvent("click", { bubbles: true,cancelable: true,view: window,});
   elem.dispatchEvent(evt);
      }
     },


 envoi:function(){

  console.log(k_capture.blob.type);

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

  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");
 }
}

</script>
 
</head> 

<body>

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

<video id='direct'  height=250 style='background:gray'  controls></video>

<video id='resultat'  height=250 style='background:gray'  controls></video>
</div>

<br><br>

frameRate: <select id="frameRate">
    <option value="defaut">Default</option>
    <option>30</option>
    <option>25</option>
    <option>15</option>
    <option>5</option>
</select>

resolutions: <select id="resolutions">
    <option value="defaut">Default</option>
    <option value="resolution-courante">resolution courante</option>
    <option>4K</option>
    <option>1080p</option>
    <option>720p</option>
 <option>600p</option>
</select>

curseur: <select id="curseur">
    <option value="defaut">Default</option>
    <option value="always">oui</option>
    <option value="never">non</option>
    <option value="motion">video</option>
</select>

audio: <input id="audio" type="checkbox">
    
</input>

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

<button id='fermer' style='height:50px;width:100px;margin:auto' onclick='k_capture.fermer_camera()'>stopper capture</button> 
<br><br>
 
<button id='marche' onclick="k_capture.rec()" style='height:50px;width:100px;margin:auto'>enregistrer</button>

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

<br><br>


<button id='envoi' onclick="k_capture.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)