|
|
@@ -0,0 +1,298 @@
|
|
|
+<template>
|
|
|
+ <!-- 高拍仪视频预览区 -->
|
|
|
+ <div id="view">
|
|
|
+ <img id="view1" src="http://127.0.0.1:38088/video=stream&camidx=0" alt="主摄像头">
|
|
|
+ </div>
|
|
|
+ <!-- 缩略图 -->
|
|
|
+ <div id="suoluetu"></div>
|
|
|
+ <!-- 功能按钮 -->
|
|
|
+ <div id="myactive">
|
|
|
+ 主摄像头视频模式：<select id="view1_mode" v-model="view1_mode_selected" @change="view1_mode_change(view1_mode_selected)"><option v-for="item in view1_mode_list" :key="item.key" :value="item.key">{{item.value}}</option></select>
|
|
|
+ 主摄像头分辨率：<select id="view1_resolution_power" v-model="view1_resolution_selected"><option v-for="(item, index) in view1_resolution_list" :key="index" :value="item">{{item}}</option></select>
|
|
|
+ <br>
|
|
|
+ <button @click="open_view1">打开主摄像头视频</button>
|
|
|
+ <button @click="close_view1">关闭主摄像头视频</button>
|
|
|
+ <br>
|
|
|
+ <button @click="view1_scan">主摄像头拍照</button>
|
|
|
+ <button @click="open_auto_scan">开启自动拍照</button>
|
|
|
+ <button @click="close_auto_scan">关闭自动拍照</button>
|
|
|
+ <br>
|
|
|
+ <button @click="add_pdf">拍照并加入PDF队列</button>
|
|
|
+ <button @click="save_pdf">生成PDF文件</button>
|
|
|
+ <!-- <br> -->
|
|
|
+ <!-- <button @click="ocr">OCR</button> -->
|
|
|
+ <br>
|
|
|
+ <button @click="get_state">获取设备状态</button>
|
|
|
+ <button @click="is_con">判断设备是否连接</button>
|
|
|
+ </div>
|
|
|
+ <!-- 操作日志 -->
|
|
|
+ <div id="mylog">首次打开页面，没有显示出分辨率信息？不要急，刷新下页面就可以了<br>我是操做日志，如果我出现问题，请看控制台信息......</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import {defineComponent, ref} from 'vue'
|
|
|
+ import axios from 'axios'
|
|
|
+ export default defineComponent({
|
|
|
+ name: 'App',
|
|
|
+ created(){
|
|
|
+ // 加载主摄像头视频模式
|
|
|
+ let view1_mode_data1 = { "camidx": "0", "mode": "0" };
|
|
|
+ let view1_mode_data2 = { "camidx": "0", "mode": "1" };
|
|
|
+ axios.post("http://127.0.0.1:38088/device=getresolution", JSON.stringify(view1_mode_data2)).then((res)=>{
|
|
|
+ if(res.data.data.split("|").length > 1){
|
|
|
+ let data = new Object()
|
|
|
+ data.key = '1'
|
|
|
+ data.value = 'MJPG'
|
|
|
+ this.view1_mode_list.push(data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ axios.post("http://127.0.0.1:38088/device=getresolution", JSON.stringify(view1_mode_data1)).then((res)=>{
|
|
|
+ if(res.data.data.split("|").length > 1){
|
|
|
+ let data = new Object()
|
|
|
+ data.key = '0'
|
|
|
+ data.value = 'YUY2'
|
|
|
+ this.view1_mode_list.push(data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 加载主摄像头分辨率
|
|
|
+ let view1_resolution_power_data = {"camidx": "0", "mode": this.view1_mode_selected}
|
|
|
+ axios.post("http://127.0.0.1:38088/device=getresolution", JSON.stringify(view1_resolution_power_data)).then((res)=>{
|
|
|
+ let resolution_list = res.data.data.split("|");
|
|
|
+ this.view1_resolution_selected = resolution_list[0]
|
|
|
+ for(var i=0; i<resolution_list.length; i++){
|
|
|
+ this.view1_resolution_list.push(resolution_list[i])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setup(){
|
|
|
+ // 打印日志
|
|
|
+ let mylog = (val)=>{
|
|
|
+ let element = document.getElementById('mylog')
|
|
|
+ let old_val = element.innerHTML
|
|
|
+ let date = new Date().toString().slice(16, 24)
|
|
|
+ element.innerHTML = date + ' ' + val + '<br>' + old_val;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加缩略图
|
|
|
+ let add_image = (img_base64)=>{
|
|
|
+ let img = document.createElement('img');
|
|
|
+ img.src = "data:image/jpg;base64," + img_base64;
|
|
|
+ img.style.width = '80px';
|
|
|
+ img.style.height = '80px';
|
|
|
+ document.getElementById('suoluetu').appendChild(img)
|
|
|
+ }
|
|
|
+
|
|
|
+ let view1_mode_list = ref([]) // 主摄像头视频模式
|
|
|
+ let view1_mode_selected = ref('1') // 主摄像头视频模式当前选项
|
|
|
+ let view1_resolution_list = ref([]) // 主摄像头分辨率
|
|
|
+ let view1_resolution_selected = ref('') // 主摄像头分辨率当前选项
|
|
|
+
|
|
|
+ // 切换主摄像头视频模式，重新加载主摄像头分辨率
|
|
|
+ let view1_mode_change = (val)=>{
|
|
|
+ let data = {"camidx": '0', "mode": val}
|
|
|
+ axios.post("http://127.0.0.1:38088/device=getresolution", JSON.stringify(data)).then((res)=>{
|
|
|
+ let resolution_list = res.data.data.split("|");
|
|
|
+ view1_resolution_selected = resolution_list[0]
|
|
|
+ view1_resolution_list = []
|
|
|
+ for(var i=0; i<resolution_list.length; i++){
|
|
|
+ view1_resolution_list.push(resolution_list[i])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开主摄像头
|
|
|
+ let open_view1 = ()=>{
|
|
|
+ document.getElementById('view1').src = 'http://127.0.0.1:38088/video=stream&camidx=0?1'
|
|
|
+ mylog('打开主摄像头成功')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关闭主摄像头
|
|
|
+ let close_view1 = ()=>{
|
|
|
+ let data = {"camidx": "0"}
|
|
|
+ axios.post("http://127.0.0.1:38088/video=close", JSON.stringify(data)).then(()=>{
|
|
|
+ document.getElementById('view1').src = ''
|
|
|
+ mylog('关闭主摄像头成功')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 主头拍照
|
|
|
+ let view1_scan = ()=>{
|
|
|
+ let data = {
|
|
|
+ "filepath": "base64",
|
|
|
+ "rotate": "0",
|
|
|
+ "cutpage": "0",
|
|
|
+ "camidx": "0",
|
|
|
+ "ColorMode": "0",
|
|
|
+ "quality": "3"
|
|
|
+ }
|
|
|
+ axios.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data)).then((res)=>{
|
|
|
+ add_image(res.data.photoBase64)
|
|
|
+ mylog("主头拍照成功")
|
|
|
+ mylog('图片base64： ' + res.data.photoBase64)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 开启自动拍照
|
|
|
+ let open_auto_scan = ()=>{
|
|
|
+ let data = {
|
|
|
+ "movedetecflag": "1",
|
|
|
+ "listpath": "D://a",
|
|
|
+ "filepath": "hy"
|
|
|
+ }
|
|
|
+ axios.post("http://127.0.0.1:38088/video=movedetec", JSON.stringify(data)).then((res)=>{
|
|
|
+ console.log('open_auto_scan',res);
|
|
|
+ add_image(res.data.data)
|
|
|
+ mylog("这是自动拍摄的图片")
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关闭自动拍照
|
|
|
+ let close_auto_scan = ()=>{
|
|
|
+ let data = {"movedetecflag": "0"}
|
|
|
+ axios.post("http://127.0.0.1:38088/video=movedetec", JSON.stringify(data)).then(()=>{
|
|
|
+ mylog('关闭自动拍照成功')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //---------------------------------------------pdf-----------------------------------------
|
|
|
+ // 拍照并加入PDF队列
|
|
|
+ let add_pdf = ()=>{
|
|
|
+ let data1 = {
|
|
|
+ "filepath": "base64",
|
|
|
+ "rotate": "0",
|
|
|
+ "cutpage": "0",
|
|
|
+ "camidx": "0",
|
|
|
+ "quality": "5"
|
|
|
+ }
|
|
|
+ axios.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data1)).then((res1)=>{
|
|
|
+ if(res1.data.code == '0'){
|
|
|
+ add_image(res1.data.photoBase64)
|
|
|
+
|
|
|
+ let data2 = {
|
|
|
+ "ImagePath": "",
|
|
|
+ "ImageBase64": res1.data.photoBase64
|
|
|
+ }
|
|
|
+ axios.post("http://127.0.0.1:38088/pdf=addimage", JSON.stringify(data2)).then((res2)=>{
|
|
|
+ if(res2.data.code == '0'){
|
|
|
+ mylog("拍照成功，并加入到PDF队列中")
|
|
|
+ }else{
|
|
|
+ mylog("加入PDF队列失败")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ mylog("拍照失败，请重新拍摄")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成PDF文件
|
|
|
+ let save_pdf = ()=>{
|
|
|
+ let data = {"PdfPath": "D://pdf.pdf"}
|
|
|
+ axios.post("http://127.0.0.1:38088/pdf=save", JSON.stringify(data)).then((res)=>{
|
|
|
+ if(res.data.code == '0'){
|
|
|
+ mylog("PDF保存成功")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // ocr
|
|
|
+ let ocr = ()=>{
|
|
|
+ // ocr 是从图片中识别的，所以需要先拍一张图片保存本地，然后在做ocr识别
|
|
|
+ let data1 = {
|
|
|
+ "filepath": "",
|
|
|
+ "rotate": "0",
|
|
|
+ "cutpage": "0",
|
|
|
+ "camidx": "0"
|
|
|
+ }
|
|
|
+ axios.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data1)).then((res1)=>{
|
|
|
+ add_image(res1.data.photoBase64)
|
|
|
+ mylog("识别中。。。")
|
|
|
+ let data2 = {
|
|
|
+ "ocrflag": "1",
|
|
|
+ "picfilepath": res1.data.filepath,
|
|
|
+ "savefilepath": "D://ocr.pdf"
|
|
|
+ }
|
|
|
+ axios.post("http://127.0.0.1:38088/video=ocr", JSON.stringify(data2)).then((res2)=>{
|
|
|
+ if(res2.data.code == '0'){
|
|
|
+ mylog("识别成功")
|
|
|
+ }else{
|
|
|
+ mylog("识别失败")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //---------------------------------------------设备-----------------------------------------
|
|
|
+
|
|
|
+ // 获取设备状态
|
|
|
+ let get_state = ()=>{
|
|
|
+ axios.post("http://127.0.0.1:38088/video=status").then((res)=>{
|
|
|
+ mylog("提示：no:未连接；ok:已连接；run:已连接且运行")
|
|
|
+ mylog("主摄像头：" + res.data.video0)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断设备是否连接
|
|
|
+ let is_con = ()=>{
|
|
|
+ axios.post("http://127.0.0.1:38088/device=isconnect").then((res)=>{
|
|
|
+ mylog("设备连接数：" + res.data.data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ mylog, add_image,
|
|
|
+ view1_mode_list, view1_mode_selected, view1_resolution_list, view1_resolution_selected,
|
|
|
+ view1_mode_change,
|
|
|
+ open_view1, close_view1,
|
|
|
+ view1_scan, open_auto_scan, close_auto_scan,
|
|
|
+ add_pdf, save_pdf, ocr,
|
|
|
+ get_state, is_con,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ /* 全局 */
|
|
|
+ #app {
|
|
|
+ font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+ color: #2c3e50;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ /* 视频预览 */
|
|
|
+ #view1{
|
|
|
+ width: 400px;
|
|
|
+ height: 300px;
|
|
|
+ border: 1px solid red;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ /* 缩略图 */
|
|
|
+ #suoluetu{
|
|
|
+ width: 100%;
|
|
|
+ height: 85px;
|
|
|
+ border: 1px solid blue;
|
|
|
+ }
|
|
|
+ #suoluetu img{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ /* 操作按钮 */
|
|
|
+ #myactive{
|
|
|
+ border: 1px solid yellowgreen;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px 5px;
|
|
|
+ }
|
|
|
+ /* 操作日志 */
|
|
|
+ #mylog{
|
|
|
+ border: 1px solid black;
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
liuqiang
