HTML
<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="setImage()">拍照</el-button>
<el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">提交
</el-button>
</div>
Script
export default{
data(){
return{
imgif:false
videoWidth: 250,
videoHeight: 250,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null,
imga: '',
}
},
methods:{
getCompetence() {
var _this = this
this.thisCancas = document.getElementById('canvasCamera')
this.thisContext = this.thisCancas.getContext('2d')
this.thisVideo = document.getElementById('videoCamera')
// 旧版本浏览器可能根本不支持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
if ('srcObject' in _this.thisVideo) {
_this.thisVideo.srcObject = stream
} else {
// 避免在新的浏览器中使用它,因为它正在被弃用。
_this.thisVideo.src = window.URL.createObjectURL(stream)
}
_this.thisVideo.onloadedmetadata = function(e) {
_this.thisVideo.play()
}
}).catch(err => {
console.log(err)
})
},
// 绘制图片(拍照功能)
setImage() {
this.imgif=true
var _this = this
// 点击,canvas画图
_this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250)
console.log(_this.thisContext);
// 获取图片base64链接
var image = this.thisCancas.toDataURL('image/png')
_this.imgSrc = image
window.sessionStorage.setItem("img", _this.imgSrc)
console.log(this.imgSrc);
},
//关闭摄像头并上传数据
openFullScreen1() {
this.thisVideo.srcObject.getTracks()[0].stop(),//关闭摄像头
setTimeout(() => {
// var file = this.imga.substr(22)
this.imga = window.sessionStorage.getItem("img")
var file = this.imga
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);
})
}, 2000);
},
}
}
css就自己写吧。