<template>
<div>
<div class="videodome">
<div>
<video id="videoCamera" width="250" height="250" autoplay style="border-radius:180px;box-shadow: darkgrey 0 0 30px 5px ;"></video>
</div>
<canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
</div>
<div class="img_bg_camera">
<p style="color: #000000;">图片显示</p>
<img :src="imgSrc" alt="" class="tx_img" style="border-radius:360px;box-shadow: darkgrey 0 0 30px 5px ;" v-if="imgif">
</div>
<div class="bommen">
<el-button type="success" @click="getCompetence()">打开摄像头</el-button>
<el-button type="success" @click="closeCarama()">关闭摄像头</el-button>
<el-button type="success" @click="setImage()">拍照</el-button>
<el-button type="primary" @click="uploadImage()">提交</el-button>
</div>
</div>
</template>
<script>
import Util from "@/api/util.js";
export default {
data() {
return {
imgif: false,
videoWidth: 250,
videoHeight: 250,
imgSrc: '', //图片src
canvasCamera: null,
contextCamera: null,
videoCamera: null,
}
},
mounted() {
},
methods: {
// 打开摄像头
getCompetence() {
this.canvasCamera = document.getElementById('canvasCamera')
this.contextCamera = this.canvasCamera.getContext('2d')
this.videoCamera = document.getElementById('videoCamera')
var _this = this
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
// 使用getUserMedia，因为它会覆盖现有的属性。
// 这里，如果缺少getUserMedia属性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
// 有些浏览器不支持，会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
}
// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}
var constraints = {
audio: false,
video: {
width: this.videoWidth,
height: this.videoHeight,
transform: 'scaleX(-1)'
}
}
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
// 新的浏览器使用srcObject。旧的浏览器可能没有srcObject
if ('srcObject' in _this.videoCamera) {
_this.videoCamera.srcObject = stream
} else {
// 避免在新的浏览器中使用它，因为它正在被弃用。
_this.videoCamera.src = window.URL.createObjectURL(stream)
}
_this.videoCamera.onloadedmetadata = function (e) {
_this.videoCamera.play()
}
}).catch(err => {
console.log(err)
Util.showMsg('warning', '没有开启摄像头权限或浏览器版本不兼容')
})
},
closeCarama() {
this.videoCamera.srcObject.getTracks()[0].stop()
},
// 绘制图片（拍照功能）
setImage() {
this.imgif = true
// 点击，canvas画图
this.contextCamera.drawImage(this.videoCamera, 0, 0, 250, 250)
// 获取图片base64链接
var image = this.canvasCamera.toDataURL('image/png')
this.imgSrc = image
// console.log(this.imgSrc);
},
//上传数据
uploadImage() {
var file = this.imgSrc
console.log(file);
//base64数据放formData里面
var formData = new FormData(); //*
formData.append("multipartFile", file); //*
formData.append("password", this.ruleForm.password); //*
formData.append("username", this.ruleForm.name); //*
//自己配置axios。
this.$http.post('url接口', formData).then(res => {
console.log(res);
})
},
}
}
</script>
<style scoped lang="scss">
.face {
width: 400px;
height: 450px;
position: relative;
.face-img {
width: 400px;
height: 450px;
position: absolute;
left: 0px;
top: 0px;
}
.face-content {
width: 310px;
height: 322px;
position: absolute;
top: 64px;
left: 45px;
#video {
object-fit: fill;
}
}
}
.step {
text-align: center;
margin-top: 30px;
.step-ul {
.step-li {
.step-title {
font-size: 16px;
color: #65dffe;
padding-bottom: 10px;
.step-titleimg {
height: 26px;
width: 26px;
margin-left: 20px;
cursor: pointer;
}
}
.step-img {
height: 150px;
width: 150px;
border: 3px solid #eecfa1;
border-radius: 50%;
img {
height: 100%;
width: auto;
}
}
}
}
}
</style>
网友评论