1、介绍
1、媒体录制原理
在很多场景中回放音视频资源的需求是非常重要的例如会议，直播授课等。任何媒体形式的表情都可进行录制，如 ,,等。其中内容更加自由用户的任何2d,3d操作都可以进行录制和传播。
MediaRecoder 是控制媒体录制的api，使用它可以进行录制音视频，使得web可以脱离服务器，独立进行视频录制。同时W3C也制定了相应的web标准。录制出来的是经过转码的标准媒体流数据。
2、实践
2.1录制对象 MediaRecoder
var mediarecode=new MediaRecoder(stream,options)
1.stream：为通过getUserMedia方法获取到的视频流。同样可已直接用 ,, 标签直接获取，这样可以实现本地播放视频录制，绘画板同步等。
2.options:为限制参数，具体如下
3.mediaRecoder的常用api方法和事件
2.2录制音频
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>webrtc录制声音</title>
</head>
<body>
<div class="app">
<h1>声音录制<h1/>
<audio class="audio" controls autoplay></audio>
<hr/>
<input type="button" title="打开麦克风" value="打开麦克风" v-on:click="openAudio"/>
<input type="button" title="开始录制" value="开始录制" v-on:click="startRecode"/>
<input type="button" title="停止录制" value="停止录制" v-on:click="stopRecode"/>
<input type="button" title="播放" value="播放" v-on:click="play"/>
{
{/* <input type="button" title="下载" value="下载" v-on:click="download"/>*/}}
<a :href="downloadUrl" download="test1.ogg" v-on:click="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: function () {
const blob = new Blob(this.recordedBlobs, {"type": "audio/ogg"})
this.downloadUrl = window.URL.createObjectURL(blob)
//setTimeout(() => {
// window.URL.revokeObjectURL(this.downloadUrl)
// }, 100)
// // 必须创建一个a标签下载
const a = document.createElement("a")
a.style.display = "none"
a.href = this.downloadUrl
a.download = "test.ogg"
document.body.appendChild(a)
a.click()
// 移除a标签
setTimeout(() => {
document.body.removeChild(a)
}, 100)
},
// 开始录制
startRecode: function () {
let that = this;
if (that.status == "startRecode") {
return
}
if (that.stream == null) {
alert("请打开麦克风")
return;
}
that.status = "startRecode"
// 开始录制
let options = {"mineType": "audio/ogg;"}
try {
that.mediaRecorder = new MediaRecorder(that.stream, options)
console.log(that.mediaRecorder)
// 退出回调事件
that.mediaRecorder.onstop = (event) => {
console.log("录制已停止")
console.log(event)
console.log(that.recordedBlobs)
}
// 录制数据回调时间
that.mediaRecorder.ondataavailable = that.ondataavailable
// 录制10s
that.mediaRecorder.start(10)
} catch (e) {
alert("录制失败", e)
}
},
// 播放
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("停止录制")
},
ondataavailable: function (event) {
let that = this;
if (event.data && event.data.size > 0) {
console.log("recode data", event.data)
// 收到数据后，导入本都录制缓存
that.recordedBlobs.push(event.data)
}
},
openAudio: function () {
if (navigator.getUserMedia) {
window.audioContext = new AudioContext()
navigator.getUserMedia({
'audio': true
}, this.onVoice, this.errorFunc); //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>
音频录制的流程如下
1.打开麦克风：同样使用getUserMedia()方法 约束条件’audio’: true ， 即可请求麦克风。获取到音频流stream
2.录制：使用MediaRecorder 接口开始录制。在录制过程中ondataavailable 回调方法将录制到的音频数据存入缓存中
3.播放：将音频缓存的数据创建Blob 对象，然后使用audio标签播放
4.下载：将音频缓存的数据创建Blob 对象，然后window.URL.createObjectURL创建下载地址，使用a标签进行下载
2.3录制视频
录制视频的方式及流程和录制音频的过程时一样的，唯一的区别就是在媒体流的格式
1.getUserMedia 约束项 constraints={video:{width:400,height:300}}
2.使用Blob创建视频对象 options = {“mineType”: “video/webm”}
其余流程都一样，本次不展示视频录制代码
3、总结
本章介绍了关于包括音频，视频等媒体资源录制，其流程其实很简单，使用到的api也不多，直接看代码都就可以操作，需要注意的如下
1.关于媒体设备的支持性和兼容性，不同浏览器版本对api的支持上可能不同
2.需要注意在录制过程中的使用参数，不同的应用场景对使用的参数可能会有差别
3.录制canvas 需要查看如何获取canvas的流媒体可以查看 canvas.captureStream api，该方法可以获得canvas的流媒体，然后可以做一些同步播放或者录制等功能，和音视频操作一样。
4、感谢
感谢作者 亢少军老师的 《WebRTC音视频开发 》 课本 第七章 媒体录制 的指导
原文链接：webrtc 入门第二章 音视频录制
★文末名片可以免费领取音视频开发学习资料，内容包括（FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）以及音视频学习路线图等等。
见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓