1.媒体设备约束
let constraints={
video:true,
audio:true
}
2.定义全局变量
mediaRecorder:null,
recordedChunks=[ ]
3.获取摄像头
navigator.mediaDevices.getUserMedia()
navigator.mediaDevices.getUserMedia(constraints)
.then((stream)=>{
video.srcrObject=stream;
})
4.MediaRecorder类
媒体录制功能主要是基于MediaRecorder这个类来实现的
基本格式
var mediaRecorder=new MediaRedorder(stream,[,option])
参数说明:
参数 | 说明 |
---|---|
stream | 媒体流,可以getUserMedia,,,中获取 |
options | 一些配置项,如录制格式,mimeType,码率等 |
MediaRedorder的options参数说明
选项 | 说明 |
---|---|
mimeType | 录制格式:video/webm、audio/webm、video/webm;codecs=vp8、video/webm;codecs=h264、audio/webm;codecs=opus |
audioBitsPerSecond | 音频码率 |
videoBitsPerSecond | 视频码率 |
bitsPerSecond | 整体码率 |
navigator.mediaDevices.getUserMedia(constraints)
.then((stream)=>{
video.srcObject=stream;
this.mediaRecorder=new MediaRecorder(stream)
//开始录制时,将数据存储在recordedChunks数组中
thismediaRecorder.ondataavailable=(event)=>{
this.recordedChunks.push(event.data);
}
//录制完成,将视频呈现在video元素上(id为video1)
thia.mediaRecorder.onstop=()=>{
const recordedBlob=new Blob(this.recordedChunks,{
type:"video/webm",
})
video1.src=URL.createObjectURL(recordedBlob)
video1.controls=true
}
})
MediaRecorder的一些API
MediaRecorder.start(timeSlice)
开始录制媒体,timeSlice为可选的,如何设置了会按照时间切片存储数据。
MediaRecorder.pause()
暂停录制
MediaRecorder.stop()
结束录制,此时会触发包括最终Blob数据的dataavailable事件
MediaRecorder.resume()
恢复录制
MediaRecorder.isTYpeSupported(string)
判断是否支持该格式
MediaRecorder的一些事件
1.MediaRedorder.ondataavailable
每次记录一定时间的数据时(如果没有指定时间片,则记录整个数据时)会定期触发
2.MediaRecorder.onerror
当有错误时,录制会停止并触发该事件。
//点击开始录制
startbutton(){
this.recordedChunks=[],
this.mediaRecorder.start();
}
//点击停止录制
stopbutton(){
this.mediaRecorder.stop()
}
//完整代码
<template>
<div>
<video id="video" style="width:200px;height:200px"></video>
<button @click="startbutton">开始</button>
<button @click="stopbutton">结束</button>
<video id="video1" style="width:200px;height:200px"></video>
</div>
</template>
<script>
export default{
data(){
return{
mediaRedorder:null,
redordedChunks:[]
}
}
created(){
this.init()
},
methods:{
init(){
//媒体约束
let constraints={
video:true,
audio:true
},
//获取摄像头流
navigator.mediaDevices.getUserMedia(constraints)
.then((stream)=>{
video.srcObject=stream
this.mediaRecorder.ondataavailable=(event)=>{
this.recordedChunks.push(event.data)
}
//录制完成时呈现在video中
this.mediaRecorder.onstop=()=>{
const recorderedBlob=new Blob(this.recorderChunks,{
type:"video/wenm"
})
video1.src=URL.createObjectURL(recordedBlob)
video1.constrols=true
}
}).catch((err)=>{
console.log("摄像头获取流失败",err)
})
},
// 点击开始
startbutt() {
this.recordedChunks = [];
this.mediaRecorder.start();
this.isdisabled = true;
},
// 点击停止
getstopbutt() {
this.isdisabled = false;
this.isshow = true;
this.mediaRecorder.stop();
},
}
}
</script>