<video
class="videoClass"
style="width: 100%; height: 100%"
id="video_id"
autoplay="autoplay"
></video>
<canvas
ref="myCanvas"
id="canvas_id"
class="canvas-vi"
style="display: none"
></canvas>
mounted() {
this.initCanvas();
},
initCanvas() {
//视频截图得到一个照片;
this.canvas = this.$refs.myCanvas;
this.ctx = this.canvas.getContext("2d");
this.getMedia();
},
getMedia() {
let constraints = {
video: { width: 600, height: 600 },
audio: true,
};
//获得video摄像头区域
let video = document.getElementById("video_id");
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
},
takePhoto() {//拍照
//获得Canvas对象
let video = document.getElementById("video_id");
this.ctx = this.canvas.getContext("2d");
this.ctx.drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
},
//获取base64图像数据
this.takePhoto();
let base64Data = this.canvas.toDataURL("image/jpeg", 1.0);
let data = { dataImage: base64Data };