vue2调用摄像头录制视频

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>