|
|
@ -32,9 +32,9 @@
|
|
|
|
</split>
|
|
|
|
</split>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="margin-top: 18px;text-align:center">
|
|
|
|
<div style="margin-top: 18px;text-align:center">
|
|
|
|
<!-- <upload action="/car/distinguish/upload">-->
|
|
|
|
<!-- <upload action="/car/distinguish/upload">-->
|
|
|
|
<!-- <i-button icon="ios-cloud-upload-outline">上传车牌</i-button>-->
|
|
|
|
<!-- <i-button icon="ios-cloud-upload-outline">上传车牌</i-button>-->
|
|
|
|
<!-- </upload>-->
|
|
|
|
<!-- </upload>-->
|
|
|
|
<Upload
|
|
|
|
<Upload
|
|
|
|
multiple
|
|
|
|
multiple
|
|
|
|
type="drag"
|
|
|
|
type="drag"
|
|
|
@ -54,133 +54,124 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div th:replace="common/foot :: foot(script)"></div>
|
|
|
|
<div th:replace="common/foot :: foot(script)"></div>
|
|
|
|
<script th:inline="none">
|
|
|
|
<script th:inline="none">
|
|
|
|
layui.use(["okUtils", "okLayer"], function () {
|
|
|
|
layui.use(["okUtils", "okLayer"], function () {
|
|
|
|
var okUtils = layui.okUtils;
|
|
|
|
var okUtils = layui.okUtils;
|
|
|
|
var okLayer = layui.okLayer;
|
|
|
|
var okLayer = layui.okLayer;
|
|
|
|
var vm = new Vue({
|
|
|
|
var vm = new Vue({
|
|
|
|
el: '#app',
|
|
|
|
el: '#app',
|
|
|
|
data: function(){
|
|
|
|
data: function(){
|
|
|
|
var that = this;
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
entity:{},
|
|
|
|
|
|
|
|
parkManageList:[],
|
|
|
|
|
|
|
|
split1: 0.5,
|
|
|
|
|
|
|
|
licensePlate:'',
|
|
|
|
|
|
|
|
uploadData:{}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
listParkManage : function() {
|
|
|
|
|
|
|
|
var that = this;
|
|
|
|
var that = this;
|
|
|
|
okUtils.ajaxCloud({
|
|
|
|
return {
|
|
|
|
url:"/car/parkManage/select",
|
|
|
|
entity:{},
|
|
|
|
success : function(result) {
|
|
|
|
parkManageList:[],
|
|
|
|
that.parkManageList = result.msg;
|
|
|
|
split1: 0.5,
|
|
|
|
}
|
|
|
|
licensePlate:'',
|
|
|
|
});
|
|
|
|
uploadData:{}
|
|
|
|
},
|
|
|
|
|
|
|
|
handleSuccess:function(response, file, fileList){
|
|
|
|
|
|
|
|
if(response.code==0){
|
|
|
|
|
|
|
|
vm.licensePlate = "/"+response.imagePath;
|
|
|
|
|
|
|
|
okLayer.msg.greenTick(response.msg);
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
okLayer.msg.redCross(response.msg);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleUpload (file) {
|
|
|
|
methods: {
|
|
|
|
if(vm.entity.parkManageId==undefined){
|
|
|
|
listParkManage : function() {
|
|
|
|
okLayer.msg.redCross("请选择停车场");
|
|
|
|
var that = this;
|
|
|
|
return false;
|
|
|
|
okUtils.ajaxCloud({
|
|
|
|
|
|
|
|
url:"/car/parkManage/select",
|
|
|
|
|
|
|
|
success : function(result) {
|
|
|
|
|
|
|
|
that.parkManageList = result.msg;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
handleSuccess:function(response, file, fileList){
|
|
|
|
|
|
|
|
if(response.code==0){
|
|
|
|
|
|
|
|
vm.licensePlate = "/"+response.imagePath;
|
|
|
|
|
|
|
|
okLayer.msg.greenTick(response.msg);
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
okLayer.msg.redCross(response.msg);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
handleUpload (file) {
|
|
|
|
|
|
|
|
if(vm.entity.parkManageId==undefined){
|
|
|
|
|
|
|
|
okLayer.msg.redCross("请选择停车场");
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
vm.uploadData.id = vm.entity.parkManageId;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
vm.uploadData.id = vm.entity.parkManageId;
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted: function() {
|
|
|
|
|
|
|
|
this.listParkManage();
|
|
|
|
|
|
|
|
init();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
mounted: function() {
|
|
|
|
});
|
|
|
|
this.listParkManage();
|
|
|
|
|
|
|
|
init();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
<script type="text/javascript">
|
|
|
|
var canvas,context;
|
|
|
|
var canvas,context;
|
|
|
|
function init(){
|
|
|
|
function init(){
|
|
|
|
var video = document.querySelector('video');
|
|
|
|
var video = document.querySelector('video');
|
|
|
|
canvas = document.getElementById('qr-canvas');
|
|
|
|
canvas = document.getElementById('qr-canvas');
|
|
|
|
context = canvas.getContext('2d');
|
|
|
|
context = canvas.getContext('2d');
|
|
|
|
var mediaStreamTrack;
|
|
|
|
var mediaStreamTrack;
|
|
|
|
|
|
|
|
|
|
|
|
// 一堆兼容代码
|
|
|
|
|
|
|
|
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
|
|
|
|
|
|
|
|
if (navigator.mediaDevices === undefined) {
|
|
|
|
|
|
|
|
navigator.mediaDevices = {};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (navigator.mediaDevices.getUserMedia === undefined) {
|
|
|
|
|
|
|
|
navigator.mediaDevices.getUserMedia = function(constraints) {
|
|
|
|
|
|
|
|
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
|
|
|
|
|
|
if (!getUserMedia) {
|
|
|
|
|
|
|
|
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return new Promise(function(resolve, reject) {
|
|
|
|
|
|
|
|
getUserMedia.call(navigator, constraints, resolve, reject);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
openMedia();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//摄像头调用配置
|
|
|
|
// 一堆兼容代码
|
|
|
|
var mediaOpts = {
|
|
|
|
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
|
|
|
|
audio: false,
|
|
|
|
if (navigator.mediaDevices === undefined) {
|
|
|
|
video: true,
|
|
|
|
navigator.mediaDevices = {};
|
|
|
|
video: { facingMode: "environment"} // 或者 "user"
|
|
|
|
}
|
|
|
|
//video: { width: 50%, height: 350 }
|
|
|
|
if (navigator.mediaDevices.getUserMedia === undefined) {
|
|
|
|
// video: { facingMode: { exact: "environment" } }// 或者 "user"
|
|
|
|
navigator.mediaDevices.getUserMedia = function(constraints) {
|
|
|
|
}
|
|
|
|
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
|
|
|
|
|
|
|
if (!getUserMedia) {
|
|
|
|
// 回调
|
|
|
|
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
|
|
|
|
function successFunc(stream) {
|
|
|
|
}
|
|
|
|
mediaStreamTrack = stream;
|
|
|
|
return new Promise(function(resolve, reject) {
|
|
|
|
video = document.querySelector('video');
|
|
|
|
getUserMedia.call(navigator, constraints, resolve, reject);
|
|
|
|
if ("srcObject" in video) {
|
|
|
|
});
|
|
|
|
video.srcObject = stream
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
}
|
|
|
|
video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
|
|
|
openMedia();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
video.play();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function errorFunc(err) {
|
|
|
|
|
|
|
|
alert(err.name);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 正式启动摄像头
|
|
|
|
//摄像头调用配置
|
|
|
|
function openMedia(){
|
|
|
|
var mediaOpts = {
|
|
|
|
navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
|
|
|
|
audio: false,
|
|
|
|
// 截屏间隔时间(单位:毫秒)
|
|
|
|
video: true,
|
|
|
|
var interval = 5000;
|
|
|
|
video: { facingMode: "environment"} // 或者 "user"
|
|
|
|
|
|
|
|
//video: { width: 50%, height: 350 }
|
|
|
|
|
|
|
|
// video: { facingMode: { exact: "environment" } }// 或者 "user"
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 开始定时截屏
|
|
|
|
// 回调
|
|
|
|
setInterval(function() {
|
|
|
|
function successFunc(stream) {
|
|
|
|
drawMedia();
|
|
|
|
mediaStreamTrack = stream;
|
|
|
|
}, interval);
|
|
|
|
video = document.querySelector('video');
|
|
|
|
|
|
|
|
if ("srcObject" in video) {
|
|
|
|
|
|
|
|
video.srcObject = stream
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
video.src = window.URL && window.URL.createObjectURL(stream) || stream
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
video.play();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function errorFunc(err) {
|
|
|
|
|
|
|
|
alert(err.name);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
// 正式启动摄像头
|
|
|
|
|
|
|
|
function openMedia(){
|
|
|
|
|
|
|
|
navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//关闭摄像头
|
|
|
|
//关闭摄像头
|
|
|
|
function closeMedia(){
|
|
|
|
function closeMedia(){
|
|
|
|
mediaStreamTrack.getVideoTracks().forEach(function (track) {
|
|
|
|
mediaStreamTrack.getVideoTracks().forEach(function (track) {
|
|
|
|
track.stop();
|
|
|
|
track.stop();
|
|
|
|
context.clearRect(0, 0,context.width, context.height);//清除画布
|
|
|
|
context.clearRect(0, 0,context.width, context.height);//清除画布
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//截取视频
|
|
|
|
//截取视频
|
|
|
|
function drawMedia(){
|
|
|
|
function drawMedia(){
|
|
|
|
canvas.setAttribute("width", video.videoWidth);
|
|
|
|
canvas.setAttribute("width", video.videoWidth);
|
|
|
|
canvas.setAttribute("height", video.videoHeight);
|
|
|
|
canvas.setAttribute("height", video.videoHeight);
|
|
|
|
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
|
|
|
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|