<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('view')"/>
</head>
<body class="pear-container">
<div class="layui-card" id="app">
<div class="layui-card-body">
<el-button type="primary" @click="getCompetence()">打开摄像头</el-button>
<el-button type="danger" @click="stopNavigator()">关闭摄像头</el-button>
<el-button type="success" @click="setImage()">拍照</el-button>
<el-select v-model="facingMode" placeholder="请选择摄像头类型">
<el-option label="前置" value="user"></el-option>
<el-option label="后置" value="environment"></el-option>
</el-select>
<video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
<canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
</div>
<div class="layui-card-body">
<div v-if="imgSrc">
<el-avatar shape="square" size="100" fit="fill" :src="imgSrc"></el-avatar>
</div>
</div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script>
new Vue({
el: '#app',
data: {
videoWidth: 1000,
videoHeight: 300,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null,
facingMode: 'environment', // 前置还是后置摄像头 environment/user
},
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)',facingMode: this.facingMode } }
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 => {
this.$message.error('未检测到摄像头');
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
console.log(image,"--->image")
this.$emit('refreshDataList', this.imgSrc)
},
// 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()
}
},
mounted() {
},
});
</script>
</html>
使用vue.js调用摄像头示例
最新推荐文章于 2023-11-18 13:14:51 发布