<template>
<div class="camera_outer">
<el-button type="primary" @click="getCompetence()">打開攝像頭</el-button>
<el-button type="primary" @click="stopNavigator()">關閉攝像頭</el-button>
<el-button type="primary" @click="setImage()">拍照</el-button>
<video
id="videoCamera"
style="margin:16px 0"
:width="videoWidth"
:height="videoHeight"
autoplay
/>
<canvas
id="canvasCamera"
style="display: none"
:width="videoWidth"
:height="videoHeight"
/>
</div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default{
data(){
return{
videoWidth: 300,
videoHeight: 300,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null，
headers: {
'Authorization': getToken()
}
}
},
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() {
var _this = this
// 點擊，canvas畫圖
_this.thisContext.drawImage(_this.thisVideo,0,0,_this.videoWidth,_this.videoHeight)
// 獲取圖片base64鏈接
var image = this.thisCancas.toDataURL('image/png')
_this.imgSrc = image
this.onUpload()
// _this.fileList = [{ name: 'food.jpg', url: image }]
// this.$refs.upload.submit()
this.$emit('refreshDataList', this.imgSrc)
},
onUpload() {
if (this.imgSrc) {
const file = this.imgSrc // 把整個base64給file
const time = (new Date()).valueOf()// 生成時間戳
const name = time + '.png' // 定義文件名字（例如：abc.png ， cover.png）
const conversions = this.dataURLtoFile(file, name) // 調用base64轉圖片方法
const data = new FormData()
data.append('file', conversions)
const options = {
method: 'POST', // 請求方法
body: data, // 請求體
headers: this.headers
}
this.loading = true
fetch('http://47.99.204.99:8000/api/workerEntryExit/uploadAvatar', options)
.then((response) => {
return response.json()
})
.then((responseText) => {
this.fileList = [{ name: '人臉采集', url: responseText.avatar }]
this.form.issueCardPic = responseText.avatar
})
.catch((error) => {
this.loading = false
this.$notify.error({
title: '上傳失敗',
message: error.msg
})
})
} else {
this.$notify({
title: '警告',
message: '請點擊拍照',
type: 'warning'
})
}
},
// base64轉文件
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
// 關閉攝像頭
stopNavigator() {
this.thisVideo.srcObject.getTracks()[0].stop()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped> .camera_outer { position: relative; overflow: hidden; background-size: 100%; margin-left: 12px; video, canvas, .tx_img { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .btn_camera { position: absolute; bottom: 4px; left: 0; right: 0; height: 50px; background-color: rgba(0, 0, 0, 0.3); line-height: 50px; text-align: center; color: #ffffff; } .bg_r_img { position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .img_bg_camera { position: absolute; right: 0; top: 0; img { width: 300px; height: 300px; } .img_btn_camera { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; line-height: 50px; text-align: center; background-color: rgba(0, 0, 0, 0.3); color: #ffffff; .loding_img { width: 50px; height: 50px; } } } } </style>