<template>
|
<div class="pages">
|
<video ref="video" width="480" height="320" style="display:none"></video>
|
<canvas ref="canvas" width="480" height="320"></canvas>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
video: '',
|
mediaRecorder: '',
|
img: '',
|
canvas: '',
|
context: '',
|
}
|
},
|
methods: {
|
//访问用户媒体设备的兼容方法
|
getUserMedia(constraints, success, error) {
|
if (navigator.mediaDevices.getUserMedia) {
|
//最新的标准API
|
navigator.mediaDevices.getUserMedia(constraints).then(success)
|
.catch(error);
|
} else if (navigator.webkitGetUserMedia) {
|
//webkit核心浏览器
|
navigator.webkitGetUserMedia(constraints,success, error)
|
} else if (navigator.mozGetUserMedia) {
|
//firfox浏览器
|
navigator.mozGetUserMedia(constraints, success, error);
|
} else if (navigator.getUserMedia) {
|
//旧版API
|
navigator.getUserMedia(constraints, success, error);
|
}
|
},
|
success(stream) {
|
var self = this;
|
|
this.mediaRecorder = new MediaRecorder(stream);
|
if(this.mediaRecorder.state != "recording") {
|
this.mediaRecorder.start(10);
|
}
|
//将视频流设置为video元素的源
|
this.video.srcObject = stream;
|
this.video.play();
|
|
this.mediaRecorder.ondataavailable = function() {
|
self.context.drawImage(self.video, 0, 0, 480, 320);
|
self.img = self.canvas.toDataURL('image/png');
|
}
|
this.mediaRecorder.onstart = function() {
|
self.context.drawImage(self.video, 0, 0, 480, 320);
|
self.img = self.canvas.toDataURL('image/png');
|
};
|
},
|
error(error) {
|
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
},
|
stopRecorder(){
|
this.timer.stop();
|
if(this.mediaRecorder.state == "recording") {
|
this.mediaRecorder.stop();
|
}else {
|
console.log(this.mediaRecorder.state);
|
}
|
},
|
|
},
|
mounted() {
|
this.video = this.$refs['video'];
|
this.canvas = this.$refs['canvas'];
|
this.context = this.canvas.getContext('2d');
|
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia ||
|
navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
|
//调用用户媒体设备, 访问摄像头
|
this.getUserMedia({video : {width: 480, height: 320}}, this.success,
|
this.error);
|
} else {
|
alert('不支持访问用户媒体');
|
}
|
},
|
destroyed() {
|
// 关闭记录
|
this.stopRecorder();
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
