Heim > Artikel > Web-Frontend > Wie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?
Wie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?
- WBOYnach vorne
- 2023-09-13 23:57:021298Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit der JavaScript MediaRecorder API Audio- und Videorecorder erstellen. Dies kann also mit WebRTC erfolgen.
Was ist WebRTC?
WebRTC ist die Abkürzung für Echtzeitkommunikation. Wir können auf die auf dem Gerät des Benutzers verfügbaren Webcam- und Mikrofongeräte zugreifen und diese erfassen.
Wir können mithilfe von ECMAScript-Objekten auf die Webcam und das Mikrofon des Benutzergeräts zugreifen
navigator.mediaDevices.getUserMedia(constraints).
Daher fragt die Funktion getUserMedia standardmäßig nach der Benutzererlaubnis zur Verwendung Ihrer Webcam. Diese Funktion gibt ein Versprechen zurück und sobald Sie auf OK klicken und zustimmen, wird die Funktion ausgelöst und aktiviert die Webcam in Ihrem System. Andernfalls, wenn Sie dies nicht zulassen, verfügt sie auch über eine Fangmethode dafür. Die Webcam wird aktiviert ausgeschaltet.
Wir können der Funktion getUserMedia() auch einen Parameter übergeben. Dies könnte beispielsweise sein, wenn wir ein Bild mit einer bestimmten Breite oder Höhe wünschen.
Frontend-Design
Unser Frontend-Bereich enthält Elemente wie -
Für den Videoaufnahmebildschirm gibt es einige Elemente wie -
- Das Videoelement des Videomedienbildschirms wird angezeigt
- Start-Taste startet die Videoaufnahme
- Stopp-Taste stoppt den Videoaufzeichnungsstream.
Audioaufnahmegibt es zwei Tasten
- Start-Taste startet die Aufnahme
- Stopp-Taste stoppt den Audioaufnahme-Stream.
HTML-Code
Beispiel
<!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>
Wenn Sie auf die Schaltfläche „Video starten“ klicken, wird die Funktion start_video_Recording() aufgerufen, und die Schaltfläche „Stopp“ ruft stop_Recording () auf. Ähnlich verhält es sich bei Audio: Wenn Sie auf die Schaltfläche „Start“ klicken, wird die Funktion ausgelöst start_audio_Recording (), für die Stopptaste wird die Funktion stop_Recording() aufgerufen.
start_video_Recording()-FunktionLassen Sie uns eine Funktion definieren, um das Video zu starten und aufzuzeichnen.
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;
});
}
Wenn die Starttaste gedrückt wird, wird die obige Funktion aufgerufen, die die WebRTC-Kamera- und Mikrofonmethoden auslöst, um die Aufnahmeberechtigung zu erhalten, und die Schaltfläche zum Beenden der Aufnahme aktiviert und die Schaltfläche zum Starten der Aufnahme deaktiviert. Wenn die Stopp-Taste gedrückt wird, wird die Funktion stop() aufgerufen und alle Medien-Streaming-Titel gestoppt.
Um dann den Medienstream aufzuzeichnen, erstellen wir eine Medienrecorder-Instanz und nehmen den Medienstream sowie die Medienneuordnung global vor. Durch Stoppen des Videos wird das Medien-Streaming gestoppt und durch Erstellen des Videoelements wird ein neues Videoelement erstellt und die aufgezeichneten Mediendaten gespeichert.
In ähnlicher Weise ähnelt die Funktion
start_audio_Recording() auch der Funktion start_video_Recording(), erfordert jedoch einige Änderungen.
stop_Recording()-FunktionJetzt definieren wir eine Funktion zum Stoppen der Aufnahme.
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;
}
Diese Funktion stoppt alle im Medienstream gespeicherten Medientitel. Beispiel
Fügen wir die oben genannten Funktionen zum HTML-Code hinzu, um die Video- und Audioaufzeichnungsfunktion zu implementieren.
<!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>
Wie Sie der Ausgabe entnehmen können, wird beim Klicken auf die Videostartschaltfläche die Funktion start_video_Recording() aufgerufen. In dieser Funktion wird die Methode navigator.mediaDevices.getUserMedia() aufgerufen und ein Berechtigungsmenü zum Suchen der Video- und Mikrofonberechtigungen geöffnet . Es gibt ein Versprechen zurück, den Medienstream zu analysieren. Nach dem Empfang des Audio- oder Video-Medienstreams erstellt es eine Instanz des Medienrekorders und startet die Aufnahme durch Aufrufen der Funktion medRec.start() im obigen Code. Somit verstehen Sie den gesamten Prozess der Erstellung von Video- und Audioaufnahmen mit WebRTC.
Das obige ist der detaillierte Inhalt vonWie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So erstellen Sie dynamisch ein Formular mit JavaScriptNächster Artikel：So erstellen Sie dynamisch ein Formular mit JavaScript