1.由于http協(xié)議的問(wèn)題立叛，調(diào)用設(shè)備的攝像頭功能只能在本地運(yùn)行使用，上線使用需要配置https認(rèn)證的域名才可使用秘蛇，http不可用。
2.vue中實(shí)測(cè)可用妖泄，工作需求放在tomcat下也可用艘策。
3.希望可以幫助到大家。
<template>
<div class="camera_outer">
<video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
<canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>
<div v-if="imgSrc" class="img_bg_camera">
<img :src="imgSrc" alt="" class="tx_img">
</div>
<button @click="getCompetence()">打開(kāi)攝像頭</button>
<button @click="stopNavigator()">關(guān)閉攝像頭</button>
<button @click="setImage()">拍照</button>
</div>
</template>
<script>
export default {
data () {
return {
videoWidth: 3000,
videoHeight: 300,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null,
}
},
methods: {
// 調(diào)用權(quán)限（打開(kāi)攝像頭功能）
getCompetence () {
var _this = this
this.thisCancas = document.getElementById('canvasCamera')
this.thisContext = this.thisCancas.getContext('2d')
this.thisVideo = document.getElementById('videoCamera')
// 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設(shè)置一個(gè)空對(duì)象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
// 一些瀏覽器實(shí)現(xiàn)了部分mediaDevices斑举，我們不能只分配一個(gè)對(duì)象
// 使用getUserMedia富玷，因?yàn)樗鼤?huì)覆蓋現(xiàn)有的屬性。
// 這里赎懦，如果缺少getUserMedia屬性励两，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先獲取現(xiàn)存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
// 有些瀏覽器不支持当悔，會(huì)返回錯(cuò)誤信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
}
// 否則，使用Promise將調(diào)用包裝到舊的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) {
// 舊的瀏覽器可能沒(méi)有srcObject
if ('srcObject' in _this.thisVideo) {
_this.thisVideo.srcObject = stream
} else {
// 避免在新的瀏覽器中使用它胳挎，因?yàn)樗诒粭売谩? _this.thisVideo.src = window.URL.createObjectURL(stream)
}
_this.thisVideo.onloadedmetadata = function (e) {
_this.thisVideo.play()
}
}).catch(err => {
console.log(err)
})
},
// 繪制圖片（拍照功能）
setImage () {
var _this = this
// 點(diǎn)擊溺森，canvas畫(huà)圖
_this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
// 獲取圖片base64鏈接
var image = this.thisCancas.toDataURL('image/png')
_this.imgSrc = image
this.$emit('refreshDataList', this.imgSrc)
},
// base64轉(zhuǎn)文件
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 })
},
// 關(guān)閉攝像頭
stopNavigator () {
this.thisVideo.srcObject.getTracks()[0].stop()
}
},
}
</script>
<style lang="scss" scoped>
.camera_outer{
position: relative;
overflow: hidden;
background: url("../../assets/img/user_0608_04.png") no-repeat center;
background-size: 100%;
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;
bottom: 0;
left: 0;
right: 0;
top: 0;
img{
width: 100%;
height: 100%;
}
.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>
