Maison > Article > interface Web > Comment créer des enregistreurs vidéo et audio à l'aide de l'API JavaScript MediaRecorder ?
Dans ce tutoriel, vous apprendrez à créer des enregistreurs audio et vidéo à l'aide de l'API JavaScript MediaRecorder. Cela peut donc être fait en utilisant WebRTC.
WebRTC est l'abréviation de communication en temps réel. Nous pouvons accéder et capturer les appareils webcam et microphone disponibles sur l'appareil de l'utilisateur.
Nous pouvons accéder à la webcam et au microphone de l'appareil utilisateur à l'aide d'objets ECMAScript
navigator.mediaDevices.getUserMedia(constraints).
Par conséquent, la fonction getUserMedia demandera par défaut l'autorisation de l'utilisateur pour utiliser votre webcam. Cette fonction renvoie une promesse et une fois que vous aurez cliqué sur OK et accepté, la fonction sera déclenchée et activera la webcam dans votre système, sinon si vous ne l'autorisez pas, elle dispose également d'une méthode de capture pour cela. La webcam sera éteint.
Nous pouvons également passer un paramètre à la fonction getUserMedia(), cela pourrait être comme si nous voulions une image d'une certaine largeur ou hauteur.
Notre section frontend contiendra des éléments comme -
Pour l'écran d'enregistrement vidéo, il y aura quelques éléments comme -
L'élément vidéo de l'écran multimédia vidéo sera affiché
Le bouton Démarrer lancera l'enregistrement vidéo
Le bouton Stop arrêtera le flux d’enregistrement vidéo.
Pour l'enregistrement audio, il aura deux boutons
Le bouton Démarrer commencera l'enregistrement
Le bouton Stop arrêtera le flux d’enregistrement audio.
Nous ajouterons la police Awesome CDN pour ajouter des icônes de boutons de démarrage et d'arrêt et pour rendre la page plus attrayante, nous ajouterons des styles CSS sur les éléments.
<!DOCTYPE html> <html> <head> <title>Video & Audio Recorder</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; color: red; font-size: 1.2em; } /* styling of start and stop buttons */ #video_st, #video_en, #aud_st, #aud_en{ margin-top: 10px; padding: 10px; border-radius: 4px; cursor: pointer; } #vidBox{ background-color: grey; } /*video box styling*/ video { background-color: gray; display: block; margin: 6px auto; width: 520px; height: 240px; } /*audio box styling*/ audio { display: block; margin: 6px auto; } a { color: green; } </style> </head> <body> <h1 style="color:blue"> Video-Audio recorder</h1> <div class="display-none" id="vid-recorder"> <h3>Record Video </h3> <video autoplay id="vidBox"> </video> <!-- click this button to start video recording --> <button type="button" id="video_st" onclick="start_video_Recording()"> <i class="fa fa-play"></i></button> <!-- click this button to stop video recording --> <button type="button" id="video_en" disabled onclick="stop_Recording(this, document.getElementById('video_st'))"> <i class="fa fa-stop"></i> </button> </div> <!-- ------------ --> <br> <hr> <!-- ------------ --> <div class="display-none" id="audio_rec"> <h3> Record Audio</h3> <!-- click this button to start audio recording --> <button type="button" id="aud_st" onclick="start_audio_Recording()"><i class="fa fa-play"></i> </button> <!-- click this button to stop video recording --> <button type="button" id="aud_en"disabled onclick="stop_Recording(this, document.getElementById('aud_st'))"> <i class="fa fa-stop"></i></button> </div> </body> </html>
Lorsque vous cliquez sur le bouton "Démarrer la vidéo", cela appellera la fonction start_video_Recording() et le bouton "Stop" appellera stop_Recording() De même pour l'audio, cliquer sur le bouton démarrer déclenchera la fonction start_audio_Recording(), pour le bouton d'arrêt, la fonction stop_Recording() sera appelée.
Définissons une fonction pour démarrer la vidéo et l'enregistrer.
function start_video_Recording() { // stores the recorded media let chunksArr= []; const startBtn=document.getElementById("video_st"); const endBtn=document.getElementById("video_en"); // permission to access camera and microphone navigator.mediaDevices.getUserMedia({audio: true, video: true}) .then((mediaStreamObj) => { // Create a new MediaRecorder instance const medRec =new MediaRecorder(mediaStreamObj); window.mediaStream = mediaStreamObj; window.mediaRecorder = medRec; medRec.start(); //when recorded data is available then push into chunkArr array medRec.ondataavailable = (e) => {chunksArr.push(e.data);}; //stop the video recording medRec.onstop = () => { const blobFile = new Blob(chunksArr, { type:"video/mp4" }); chunksArr= []; // create video element and store the media which is recorded const recMediaFile = document.createElement("video"); recMediaFile.controls = true; const RecUrl = URL.createObjectURL(blobFile); //keep the recorded url as source recMediaFile.src = RecUrl; document.getElementById(`vid-recorder`).append(recMediaFile); }; document.getElementById("vidBox").srcObject = mediaStreamObj; //disable the start button and enable the stop button startBtn.disabled = true; endBtn.disabled = false; }); }
Lorsque le bouton de démarrage est enfoncé, il appellera la fonction ci-dessus, qui déclenchera les méthodes de caméra et de microphone WebRTC pour obtenir l'autorisation d'enregistrement et activera le bouton d'arrêt de l'enregistrement et désactivera le bouton de démarrage de l'enregistrement.
Lorsque le bouton d'arrêt est enfoncé, il appellera la fonction stop() et arrêtera toutes les pistes de streaming multimédia.
Ensuite, afin d'enregistrer le flux multimédia, nous créerons une instance d'enregistreur multimédia et réorganiserons le flux multimédia ainsi que la réorganisation globale des médias. L'arrêt de la vidéo arrêtera alors la diffusion multimédia et la création de l'élément vidéo créera un nouvel élément vidéo et stockera les données multimédias enregistrées.
De même, la fonction start_audio_Recording() est également similaire à la fonction start_video_Recording(), mais nécessite quelques modifications.
Définissons maintenant une fonction pour arrêter l'enregistrement.
function stop_Recording(end, start) { window.mediaRecorder.stop(); // stop all tracks window.mediaStream.getTracks() .forEach((track) => {track.stop();}); //disable the stop button and enable the start button end.disabled = true; start.disabled = false; }
Cette fonction arrêtera toutes les pistes multimédias stockées dans le flux multimédia.
Ajoutons les fonctions ci-dessus au code HTML pour implémenter la fonctionnalité d'enregistrement vidéo et audio.
<!DOCTYPE html> <html> <head> <title>Video & Audio Recorder</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; color: red; font-size: 1.2em; } //video start & end, Audio start & end button styling #video_st, #video_en, #aud_st, #aud_en{ margin-top: 10px; padding: 10px; border-radius: 4px; cursor: pointer; } #vidBox{ background-color: grey; } video { background-color: gray; display: block; margin: 6px auto; width: 420px; height: 240px; } audio { display: block; margin: 6px auto; } a { color: green; } </style> </head> <body> <h1 style="color:blue"> Video-Audio recorder</h1> <div class="display-none" id="vid-recorder"> <h3>Record Video </h3> <video autoplay id="vidBox"> </video> <button type="button" id="video_st" onclick="start_video_Recording()"> <i class="fa fa-play"></i></button> <button type="button" id="video_en" disabled onclick="stop_Recording(this, document.getElementById('video_st'))"> <i class="fa fa-stop"></i> </button> </div> <!-- ------------ --> <br> <hr> <!-- ------------ --> <div class="display-none" id="audio_rec"> <h3> Record Audio</h3> <button type="button" id="aud_st" onclick="start_audio_Recording()"><i class="fa fa-play"></i> </button> <button type="button" id="aud_en" disabled onclick="stop_Recording(this, document.getElementById('aud_st'))"> <i class="fa fa-stop"></i></button> </div> <script> //----------------------Video------------------------------------- function start_video_Recording() { //To stores the recorded media let chunks = []; const startBtn=document.getElementById("video_st"); const endBtn=document.getElementById("video_en"); // Access the camera and microphone navigator.mediaDevices.getUserMedia({audio: true, video: true}) .then((mediaStreamObj) => { // Create a new MediaRecorder instance const medRec =new MediaRecorder(mediaStreamObj); window.mediaStream = mediaStreamObj; window.mediaRecorder = medRec; medRec.start(); //when recorded data is available then push into chunkArr array medRec.ondataavailable = (e) => { chunks.push(e.data); }; //stop the video recording medRec.onstop = () => { const blobFile = new Blob(chunks, { type:"video/mp4" });chunks = []; // create video element and store the media which is recorded const recMediaFile = document.createElement("video"); recMediaFile.controls = true; const RecUrl = URL.createObjectURL(blobFile); //keep the recorded url as source recMediaFile.src = RecUrl; document.getElementById(`vid-recorder`).append(recMediaFile); }; document.getElementById("vidBox").srcObject = mediaStreamObj; startBtn.disabled = true; endBtn.disabled = false; }); } //--------------------audio--------------------------------------- function start_audio_Recording() { //To stores the recorded media let chunksArr = []; const startBtn=document.getElementById("aud_st"); const endBtn=document.getElementById("aud_en"); // Access the camera and microphone navigator.mediaDevices.getUserMedia({audio: true, video: false}) .then((mediaStream) => { const medRec = new MediaRecorder(mediaStream); window.mediaStream = mediaStream; window.mediaRecorder = medRec; medRec.start(); //when recorded data is available then push into chunkArr array medRec.ondataavailable = (e) => { chunksArr.push(e.data); }; //stop the audio recording medRec.onstop = () => { const blob = new Blob(chunksArr, {type: "audio/mpeg"}); chunksArr = []; // create audio element and store the media which is recorded const recMediaFile = document.createElement("audio"); recMediaFile.controls = true; const RecUrl = URL.createObjectURL(blob); recMediaFile.src = RecUrl; document.getElementById(`audio_rec`).append( recMediaFile); }; startBtn.disabled = true; endBtn.disabled = false; }); } function stop_Recording(end, start) { //stop all tracks window.mediaRecorder.stop(); window.mediaStream.getTracks() .forEach((track) => {track.stop();}); //disable the stop button and enable the start button end.disabled = true; start.disabled = false; } </script> </body> </html>
Comme vous pouvez le voir sur la sortie, lorsque vous cliquez sur le bouton de démarrage de la vidéo, il appelle la fonction start_video_Recording() et dans cette fonction appelle la méthode navigator.mediaDevices.getUserMedia() et ouvre un menu d'autorisations pour trouver les autorisations vidéo et microphone. . Il renvoie une promesse d'analyser le flux multimédia. Après avoir reçu le flux multimédia audio ou vidéo, il crée une instance de l'enregistreur multimédia et commence l'enregistrement en appelant la fonction medRec.start() dans le code ci-dessus.
Ainsi, vous comprendrez le processus complet de création d'enregistrements vidéo et audio à l'aide de WebRTC.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!