1 Introduction
1. The principle of media recording
The demand for playback of audio and video resources is very important in many scenarios, such as conferences, live lectures, etc. Expressions in any form of media can be recorded, such as,,, etc. Among them, any 2d and 3d operations of users can be recorded and disseminated.
MediaRecoder is an api that controls media recording. It can be used to record audio and video, so that the web can be separated from the server and record video independently. At the same time, W3C has also formulated corresponding web standards. What is recorded is transcoded standard media stream data.
2. Practice
2.1 Recording object MediaRecoder
var mediarecode=new MediaRecoder(stream,options)
1. stream: the video stream obtained through the getUserMedia method . It can also be obtained directly with the ,, tag, so that local playback video recording, drawing board synchronization, etc. can be realized.
2.options: It is a limit parameter, as follows
3.Common api methods and events of mediaRecoder
2.2 Record audio
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>webrtc recording sound</title>
</head>
<body>
<div class="app">
<h1>Sound recording<h1/>
<audio class="audio" controls autoplay></audio>
<hr/>
<input type="button" title="Open Microphone" value="Open Microphone" v-on:click="openAudio"/>
<input type="button" title="Start Recording" value="Start Recording" v-on:click="startRecode"/>
<input type="button" title="Stop Recording" value="Stop Recording" v-on:click="stopRecode"/>
<input type="button" title="play" value="play" v-on:click="play"/>
{
{/* <input type="button" title="Download" value="Download" v-on:click="download"/>*/}}
<a :href="downloadUrl" download="test1.ogg" v-on:click="download"/>Download</a>
</div>
</body>
<script src="/static/js/Vue.2.5.3.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: ".app",
delimiters: ['{[', ']}'],
data: {
status: "",
stream: null,
mediaRecorder: null,
recordedBlobs: [],
audio: null,
downloadUrl: ""
},
methods: {
// download
download: function () {
const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})
this.downloadUrl = window.URL.createObjectURL(blob)
//setTimeout(() => {
// window.URL.revokeObjectURL(this.downloadUrl)
// }, 100)
// // Must create a tag download
const a = document.createElement("a")
a.style.display = "none"
a.href = this.downloadUrl
a.download = "test.ogg"
document.body.appendChild(a)
a. click()
// remove the a tag
setTimeout(() => {
document.body.removeChild(a)
}, 100)
},
// start recording
startRecode: function () {
let that = this;
if (that.status == "startRecode") {
return
}
if (that.stream == null) {
alert("Please turn on the microphone")
return;
}
that.status = "startRecode"
// start recording
let options = {"mineType": "audio/ogg;"}
try {
that.mediaRecorder = new MediaRecorder(that.stream, options)
console.log(that.mediaRecorder)
// exit callback event
that.mediaRecorder.onstop = (event) => {
console.log("Recording has stopped")
console.log(event)
console.log(that.recordedBlobs)
}
// record data callback time
that.mediaRecorder.ondataavailable = that.ondataavailable
// record 10s
that.mediaRecorder.start(10)
} catch (e) {
alert("Recording failed", e)
}
},
// play
play: function () {
const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})
this.audio = document.querySelector('audio');
this.audio.src = window.URL.createObjectURL(blob)
this. audio. play()
},
stopRecode: function () {
this.mediaRecorder.stop()
alert("stop recording")
},
ondataavailable: function (event) {
let that = this;
if (event.data && event.data.size > 0) {
console.log("recode data", event.data)
// After receiving the data, import the recording cache of this capital
that.recordedBlobs.push(event.data)
}
},
openAudio: function () {
if (navigator.getUserMedia) {
window.audioContext = new AudioContext()
navigator.getUserMedia({
'audio': true
}, this.onVoice, this.errorFunc); //success is the callback function for success
} else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
},
errorFunc: function (e) {
alert("tive device media streaming (getUserMedia) not supported in this browser")
},
onVoice: function (stream) {
let that = this;
console.log(stream)
that.status = "start"
that.stream = stream
}
},
})
</script>
</html>
The audio recording process is as follows
1. Turn on the microphone: also use the getUserMedia() method constraint 'audio': true to request the microphone. Get the audio stream stream
2. Recording: Use the MediaRecorder interface to start recording. During the recording process, the ondataavailable callback method stores the recorded audio data in the cache
3. Play: Create a Blob object from the audio cache data, and then use the audio tag to play
4. Download: Create a Blob object from the audio cache data, then create a download address with window.URL.createObjectURL, and use the a tag to download
2.3 Record video
The method and process of recording video are the same as the process of recording audio, the only difference is the format of the media stream
1. getUserMedia constraint item constraints={video:{width:400,height:300}}
2. Use Blob to create video object options = {"mineType": "video/webm"}
The rest of the process is the same, and the video recording code is not displayed this time
3. Summary
This chapter introduces the recording of media resources including audio, video, etc. The process is actually very simple, and there are not many APIs used. It can be operated directly by looking at the code. The following points should be noted
1. Regarding the support and compatibility of media devices, different browser versions may have different API support
2. Pay attention to the parameters used in the recording process. Different application scenarios may have different parameters used
3. To record canvas, you need to check how to obtain the streaming media of the canvas. You can check the canvas.captureStream api. This method can obtain the streaming media of the canvas, and then you can perform some functions such as synchronous playback or recording, which are the same as audio and video operations.
4. Thanks
Thanks to the author, Mr. Kang Shaojun, for the guidance on media recording in Chapter 7 of the textbook "WebRTC Audio and Video Development"
Original link: Webrtc Getting Started Chapter 2 Audio and Video Recording
★The business card at the end of the article can receive audio and video development learning materials for free, including (FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, srs) and audio and video learning roadmaps, etc.
see below!