Comment enregistrer l'écran de son PC avec un navigateur internet ?
Réponses rédigées par Antoine
Dernière mise à jour : 2022-04-04 16:51:56
Question
Est-il possible d'enregistrer l'écran de son PC avec un navigateur internet, sans devoir utiliser de logiciel tier ?
Réponse
Vous pouvez utiliser JavaScript pour enregistrer une vidéo de l'écran d'un PC avec un navigateur internet.
Pour cela vous devez utiliser la méthode getDisplayMedia qui a récemment été implémenté à JavaScript. Cette nouvelle fonction est utilisée pour capturer l'affichage de l'utilisateur. Lorsqu'elle est utilisée, vous êtes invité à sélectionner la partie de votre écran à enregistrer.
Remarque : Au moment où je publie cette réponse, tous les navigateurs internet ne sont pas compatibles avec la méthode getDisplayMedia ; Google Chrome et Edge le sont à 100%.
Si vous désirez tester cette méthode, et ainsi enregistrer l'écran de votre PC avec un navigateur internet, vous pouvez soit :
- Accéder à cette démonstration en ligne.
- Télécharger la page HTML pour une utilisation locale.
Remarque : Une fois la page HTML téléchargée, ouvrez là avec Google Chrome ou bien Edge.
Voici par ailleurs le code source pour enregistrer une vidéo de l'écran d'un PC via un navigateur internet avec JavaScript :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Enregistrer l'écran de son PC avec JavaScript">
<meta name="author" content="Antoine | 1FORMATIK.com">
<meta name="robots" content="noindex">
<title>Enregistrer l'écran de son PC avec JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" type="image/png" sizes="16x16" href="https://www.collaborativejob.com/images/favicon/favicon-16x16.png">
<style>
body {
background-color:#141414;
}
.orange {
color: orange;
text-decoration: none;
}
.justifier {
text-align: justify;
text-justify: inter-word;
}
.encart {
background-color:#3D4145;
padding : 15px;
}
</style>
</head>
<body>
<div class="container bg-dark text-light rounded">
<div class="row">
<div class="col-md-12 mt-3">
<a href="https://www.collaborativejob.com" target="_self"><img src="https://www.collaborativejob.com/logo.png" class="img-fluid"></a>
<h4 class="d-flex justify-content-center">Enregistrer l'écran de son PC avec JavaScript</h4>
<p class="justifier encart"><i class="fa-solid fa-circle-info"></i> Cette page conceptualise la possibilité d'enregistrer une vidéo de l'écran d'un PC avec JavaScript. JavaScript est une technologie standard utilisée pour maintenir l'interactivité d'une page Web. JavaScript est intégré par défaut à tous les navigateurs Internet. Cet outil en ligne pour enregistrer une vidéo de l'écran d'un PC utilise une méthode récemment implémenté à JavaScript: <a class="orange" href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia" target="_blank">getDisplayMedia</a>. Cette nouvelle fonction est utilisée pour capturer l'affichage de l'utilisateur. Lorsqu'elle est utilisée, vous êtes invité à sélectionner la partie de votre écran à enregistrer. Plus d'information via <a class="orange" href="https://www.collaborativejob.com/7613/comment-enregistrer-lecran-de-son-avec-navigateur-internet">cette page</a> du site 1FORMATIK.com.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 mt-3">
<video class="recording" autoplay muted width="100%" height="500px"></video>
</div>
<div class="col-md-6 mt-3">
<video class="rendu" autoplay controls width="100%" height="500px"></video>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3 d-flex justify-content-center">
<button class="btn btn-primary start-btn m-3"><i class="fa-solid fa-video"></i> Commencer l'enregistrement</button>
<button class="stop-btn btn btn-danger m-3"><i class="fa-solid fa-video-slash"></i> Arrêter l'enregistrement</button>
<a href="#" download="enregistrement_ecran.mp4" class="btn btn-success m-3 download-encode"><i class="fa-solid fa-download"></i> Télécharger la vidéo</a>
</div>
</div>
<footer class="bg-dark text-white m-3">
<div class="float-end mb-3">
©<?php echo date('Y');?> Copyright <a class="text-white" href="https://www.collaborativejob.com">1FORMATIK.com</a>
</div>
</footer>
</div>
<script>
var video = document.querySelector('.recording');
var rendu = document.querySelector('.rendu');
var start = document.querySelector('.start-btn');
var stop = document.querySelector('.stop-btn');
var encode = document.querySelector(".download-encode")
var data = [];
var recording = navigator.mediaDevices.getDisplayMedia({
video: {
mediaSource: 'screen',
},
audio: true,
})
.then(async (e) => {
let audio = await navigator.mediaDevices.getUserMedia({
audio: true, video: false })
video.srcObject = e;
let fusion = new MediaStream(
[...e.getTracks(), ...audio.getTracks()])
let enregistreur = new MediaRecorder(fusion);
start.addEventListener('click', (e) => {
enregistreur.start();
alert("enregistrement commencé")
data = []
});
stop.addEventListener('click', (e) => {
enregistreur.stop();
alert("enregistrement terminé")
});
enregistreur.ondataavailable = (e) => {
data.push(e.data);
};
enregistreur.onstop = () => {
let blobData = new Blob(data, { type: 'video/mp4' });
let url = URL.createObjectURL(blobData)
rendu.src = url
encode.href = url
};
});
</script>
</body>
</html>