Skip to content

GitLab

Commit 231cbfd2 authored by 柳 佳乐's avatar 柳 佳乐
Browse files

增加动态相机和静态相机的参数配置

parent c696cc7d
Hide whitespace changes
Inline Side-by-side
src/api/dynamiCamera.js
View file @ 231cbfd2
...@@ -105,3 +105,58 @@ export function stopMultiCameraRecode(data){ ...@@ -105,3 +105,58 @@ export function stopMultiCameraRecode(data){
data data
}) })
} }
//设置相机亮度
export function setDynamiCameraBrightness(data){
return request({
baseURL:`http://${baseURLConsole1}`,
url: `/api/cameras/hd_video/brightness`,
method: 'PUT',
data
})
}
//设置相机对比度
export function setDynamiCameraContrast(data){
return request({
baseURL:`http://${baseURLConsole1}`,
url: `/api/cameras/hd_video/contrast`,
method: 'PUT',
data
})
}
//设置相机饱和度
export function setDynamiCameraSaturation(data){
return request({
baseURL:`http://${baseURLConsole1}`,
url: `/api/cameras/hd_video/saturation`,
method: 'PUT',
data
})
}
//设置相机色调
export function setDynamiCameraHue(data){
return request({
baseURL:`http://${baseURLConsole1}`,
url: `/api/cameras/hd_video/hue`,
method: 'PUT',
data
})
}
//设置相机图像增益
export function setDynamiCameraGain(data){
return request({
baseURL:`http://${baseURLConsole1}`,
url: `/api/cameras/hd_video/gain`,
method: 'PUT',
data
})
}
//设置相机曝光度
export function setDynamiCameraExposure(data){
return request({
baseURL:`http://${baseURLConsole1}`,
url: `/api/cameras/hd_video/exposure`,
method: 'PUT',
data
})
}
src/api/stillCamera.js
View file @ 231cbfd2
...@@ -79,3 +79,58 @@ export function getWebSocketLink() { ...@@ -79,3 +79,58 @@ export function getWebSocketLink() {
method: 'GET', method: 'GET',
}) })
} }
//设置相机亮度
export function setCameraBrightness(data) {
return request({
baseURL:`http://${baseURLConsole2}`,
url: '/api/cameras/hd_static/brightness',
method: 'PUT',
data
})
}
//设置相机对比度
export function setCameraContrast(data) {
return request({
baseURL:`http://${baseURLConsole2}`,
url: '/api/cameras/hd_static/contrast',
method: 'PUT',
data
})
}
//设置相机饱和度
export function setCameraSaturation(data) {
return request({
baseURL:`http://${baseURLConsole2}`,
url: '/api/cameras/hd_static/saturation',
method: 'PUT',
data
})
}
//设置相机色调
export function setCameraHue(data) {
return request({
baseURL:`http://${baseURLConsole2}`,
url: '/api/cameras/hd_static/hue',
method: 'PUT',
data
})
}
//设置相机图像增益
export function setCameraGain(data) {
return request({
baseURL:`http://${baseURLConsole2}`,
url: '/api/cameras/hd_static/gain',
method: 'PUT',
data
})
}
//设置相机曝光度
export function setCameraExposure(data) {
return request({
baseURL:`http://${baseURLConsole2}`,
url: '/api/cameras/hd_static/exposure',
method: 'PUT',
data
})
}
src/components/dynamiCamera.vue
View file @ 231cbfd2
...@@ -202,6 +202,81 @@ ...@@ -202,6 +202,81 @@
<span class="camera-id">相机 {{ camera.id }}</span> <span class="camera-id">相机 {{ camera.id }}</span>
<span class="camera-spec">({{ camera.width }}×{{ camera.height }} @{{ camera.fps }}fps)</span> <span class="camera-spec">({{ camera.width }}×{{ camera.height }} @{{ camera.fps }}fps)</span>
</div> </div>
<div class="frane-config">
<el-popover placement="right" width="400" trigger="click">
<div class="config-content">
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">亮度</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.brightness" :min="-100" :max="100"
@change="handleBrightnessChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.brightness }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">对比度</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.contrast" :min="-100" :max="100" @change="handleContrastChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.contrast }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">饱和度</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.saturation" :min="-100" :max="100"
@change="handleSaturationChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.saturation }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">色调</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.hue" :min="-100" :max="100" @change="handleHueChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.hue }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">增益</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.gain" :min="-100" :max="100" @change="handleGainChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.gain }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">曝光</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.exposure" :min="-100" :max="100" @change="handleExposureChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.exposure }}
</div>
</div>
</div>
<el-button slot="reference" circle icon="el-icon-more-outline" size="mini"></el-button>
</el-popover>
</div>
</div> </div>
<div class="frame-header" style="padding: 5px; text-align: center;"> <div class="frame-header" style="padding: 5px; text-align: center;">
<el-select v-model="camera.cameraOrientation" size="mini" style="width: 80px; margin-right: 10px;" <el-select v-model="camera.cameraOrientation" size="mini" style="width: 80px; margin-right: 10px;"
...@@ -324,7 +399,13 @@ import { ...@@ -324,7 +399,13 @@ import {
closeDynamiCamera, closeDynamiCamera,
disconnectDynamiCamera, disconnectDynamiCamera,
startMultiCameraRecode, startMultiCameraRecode,
stopMultiCameraRecode stopMultiCameraRecode,
setDynamiCameraBrightness,//设置动态相机亮度
setDynamiCameraContrast,//设置动态相机对比度
setDynamiCameraSaturation,//设置动态相机饱和度
setDynamiCameraHue,//设置动态相机色相
setDynamiCameraGain,//设置动态相机增益
setDynamiCameraExposure,//设置动态相机曝光
} from '@/api/dynamiCamera.js' } from '@/api/dynamiCamera.js'
import { binocularCameraMixins } from '@/components/binocularCamera' import { binocularCameraMixins } from '@/components/binocularCamera'
import Worker from '@/components/workers/dynamiCamera.worker.js' import Worker from '@/components/workers/dynamiCamera.worker.js'
...@@ -375,6 +456,12 @@ export default { ...@@ -375,6 +456,12 @@ export default {
statusInfo: null, statusInfo: null,
captureLog: '等待连接', captureLog: '等待连接',
worker, // 存储worker引用 worker, // 存储worker引用
brightness: 0,//亮度
contrast: 0,//对比度
saturation: 0,//饱和度
hue: 0,//色相
gain: 0,//增益
exposure: 0,//曝光
}) })
this.workers[item.camera_id] = worker; this.workers[item.camera_id] = worker;
}) })
...@@ -418,6 +505,15 @@ export default { ...@@ -418,6 +505,15 @@ export default {
initDynamiCamera(param).then(res => { initDynamiCamera(param).then(res => {
console.log(res) console.log(res)
this.dynamiCameras.forEach(camera => { this.dynamiCameras.forEach(camera => {
let cameraConfig = res.data.initialized_cameras.find(item => item.camera_id == camera.id)
if (cameraConfig) {
camera.brightness = cameraConfig.brightness
camera.contrast = cameraConfig.contrast
camera.saturation = cameraConfig.saturation
camera.hue = cameraConfig.hue
camera.gain = cameraConfig.gain
camera.exposure = cameraConfig.exposure
}
camera.width = parseInt(width) camera.width = parseInt(width)
camera.height = parseInt(height) camera.height = parseInt(height)
camera.fps = this.dynamiSettings.fps camera.fps = this.dynamiSettings.fps
...@@ -482,6 +578,74 @@ export default { ...@@ -482,6 +578,74 @@ export default {
this.$message.success(`配置相机成功`) this.$message.success(`配置相机成功`)
}) })
}, },
//处理亮度变化
handleBrightnessChange(camera) {
let param = {
camera_id: camera.id,
brightness: camera.brightness
}
setDynamiCameraBrightness(param).then(res => {
console.log(res)
this.$message.success(`设置亮度成功`)
})
},
//处理对比度变化
handleContrastChange(camera) {
let param = {
camera_id: camera.id,
contrast: camera.contrast
}
setDynamiCameraContrast(param).then(res => {
console.log(res)
this.$message.success(`设置对比度成功`)
})
},
//处理饱和度变化
handleSaturationChange(camera) {
let param = {
camera_id: camera.id,
saturation: camera.saturation
}
setDynamiCameraSaturation(param).then(res => {
console.log(res)
this.$message.success(`设置饱和度成功`)
})
},
//处理色调变化
handleHueChange(camera) {
let param = {
camera_id: camera.id,
hue: camera.hue
}
setDynamiCameraHue(param).then(res => {
console.log(res)
this.$message.success(`设置色相成功`)
})
},
//处理增益变化
handleGainChange(camera) {
let param = {
camera_id: camera.id,
gain: camera.gain
}
setDynamiCameraGain(param).then(res => {
console.log(res)
this.$message.success(`设置增益成功`)
})
},
//处理曝光变化
handleExposureChange(camera) {
let param = {
camera_id: camera.id,
exposure: camera.exposure
}
setDynamiCameraExposure(param).then(res => {
console.log(res)
this.$message.success(`设置曝光成功`)
})
},
//开启WebStock连接 //开启WebStock连接
startStream(camera) { startStream(camera) {
camera.worker.postMessage({ camera.worker.postMessage({
...@@ -540,18 +704,18 @@ export default { ...@@ -540,18 +704,18 @@ export default {
console.log(param) console.log(param)
//低帧率 //低帧率
if(!this.dynamiSettings.lowFpsMode){ if (!this.dynamiSettings.lowFpsMode) {
this.dynamiSettings.lowFpsMode = true this.dynamiSettings.lowFpsMode = true
await this.toggleLowFpsMode(this.dynamiSettings.lowFpsMode) await this.toggleLowFpsMode(this.dynamiSettings.lowFpsMode)
} }
startMultiCameraRecode(param).then(res => { startMultiCameraRecode(param).then(res => {
this.isRecording = true; this.isRecording = true;
this.recordingStartTime = new Date(); this.recordingStartTime = new Date();
this.startRecordingTimer(); this.startRecordingTimer();
this.$message.success(`开始录制`); this.$message.success(`开始录制`);
}) })
}else{ } else {
this.$message.warning("请先停止双目相机的获取") this.$message.warning("请先停止双目相机的获取")
} }
...@@ -735,13 +899,53 @@ export default { ...@@ -735,13 +899,53 @@ export default {
background-color: #f0f7ff; background-color: #f0f7ff;
} }
.clearfix {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.frame-title { .frame-title {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
padding: 2px 0; padding: 2px 0;
} }
.frane-config {
text-align: right;
flex: 1;
}
.config-content {
width: 400px;
}
.config-item {
display: flex;
width: 100%;
justify-content: column-reverse;
align-items: center;
}
.config-item-label {
margin: 5px;
flex: 3;
}
.config-item-slider {
margin: 5px;
flex: 10;
}
.config-item-value {
margin: 5px;
flex: 1;
}
.camera-id { .camera-id {
font-weight: bold; font-weight: bold;
margin-right: 8px; margin-right: 8px;
......
src/components/stillCamera.vue
View file @ 231cbfd2
...@@ -60,6 +60,79 @@ ...@@ -60,6 +60,79 @@
<span class="camera-id">相机 {{ camera.id }}_{{ camera.name }}</span> <span class="camera-id">相机 {{ camera.id }}_{{ camera.name }}</span>
<span class="camera-spec">({{ camera.width }}×{{ camera.height }} @{{ camera.fps }}fps)</span> <span class="camera-spec">({{ camera.width }}×{{ camera.height }} @{{ camera.fps }}fps)</span>
</div> </div>
<div class="frane-config">
<el-popover placement="right" width="400" trigger="click">
<div class="config-content">
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">亮度</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.brightness" :min="-100" :max="100" @change="handleBrightnessChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.brightness }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">对比度</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.contrast" :min="-100" :max="100" @change="handleContrastChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.contrast }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">饱和度</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.saturation" :min="-100" :max="100" @change="handleSaturationChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.saturation }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">色调</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.hue" :min="-100" :max="100" @change="handleHueChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.hue }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">增益</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.gain" :min="-100" :max="100" @change="handleGainChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.gain }}
</div>
</div>
<div class="config-item">
<div class="config-item-label">
<span class="demonstration">曝光</span>
</div>
<div class="config-item-slider">
<el-slider v-model="camera.exposure" :min="-100" :max="100" @change="handleExposureChange(camera)"></el-slider>
</div>
<div class="config-item-value">
{{ camera.exposure }}
</div>
</div>
</div>
<el-button slot="reference" circle icon="el-icon-more-outline" size="mini"></el-button>
</el-popover>
</div>
</div> </div>
<div class="frame-header"> <div class="frame-header">
<el-select v-model="camera.cameraOrientation" style="width: 120px" @change="configCamera(camera)"> <el-select v-model="camera.cameraOrientation" style="width: 120px" @change="configCamera(camera)">
...@@ -108,7 +181,22 @@ ...@@ -108,7 +181,22 @@
import { import {
baseURLConsole2 baseURLConsole2
} from '@/utils/url' } from '@/utils/url'
import { getStillCameraList, initializeStillCamera, setStillCameraOrientation, lowStillCamera, getWebSocketLink, closeStillCamera, captureStillCamera, disconnectStillCamera } from '@/api/stillCamera' import {
getStillCameraList,
initializeStillCamera,
setStillCameraOrientation,
lowStillCamera,
getWebSocketLink,
closeStillCamera,
captureStillCamera,
disconnectStillCamera,
setCameraBrightness,
setCameraContrast,
setCameraSaturation,
setCameraHue,
setCameraGain,
setCameraExposure
} from '@/api/stillCamera'
import Worker from '@/components/workers/stillCamera.worker.js' import Worker from '@/components/workers/stillCamera.worker.js'
export default { export default {
name: 'StillCamera', name: 'StillCamera',
...@@ -150,6 +238,12 @@ export default { ...@@ -150,6 +238,12 @@ export default {
statusInfo: null, statusInfo: null,
captureLog: '等待连接', captureLog: '等待连接',
worker, // 存储worker引用 worker, // 存储worker引用
brightness: 0,//亮度
contrast: 0,//对比度
saturation: 0,//饱和度
hue: 0,//色相
gain: 0,//增益
exposure: 0,//曝光
}) })
this.workers[item.camera_id] = worker; this.workers[item.camera_id] = worker;
}) })
...@@ -190,6 +284,15 @@ export default { ...@@ -190,6 +284,15 @@ export default {
initializeStillCamera(param).then(res => { initializeStillCamera(param).then(res => {
console.log(res) console.log(res)
this.cameraList.forEach(camera => { this.cameraList.forEach(camera => {
let cameraConfig = res.data.initialized_cameras.find(item => item.camera_id == camera.id)
if (cameraConfig) {
camera.brightness = cameraConfig.brightness
camera.contrast = cameraConfig.contrast
camera.saturation = cameraConfig.saturation
camera.hue = cameraConfig.hue
camera.gain = cameraConfig.gain
camera.exposure = cameraConfig.exposure
}
camera.width = parseInt(width) camera.width = parseInt(width)
camera.height = parseInt(height) camera.height = parseInt(height)
camera.fps = this.globalParams.fps camera.fps = this.globalParams.fps
...@@ -228,6 +331,72 @@ export default { ...@@ -228,6 +331,72 @@ export default {
this.$message.success(`配置相机成功`) this.$message.success(`配置相机成功`)
}) })
}, },
//处理亮度变化
handleBrightnessChange(camera) {
let param = {
camera_id: camera.id,
brightness: camera.brightness
}
setCameraBrightness(param).then(res => {
console.log(res)
this.$message.success(`设置亮度成功`)
})
},
//处理对比度变化
handleContrastChange(camera) {
let param = {
camera_id: camera.id,
contrast: camera.contrast
}
setCameraContrast(param).then(res => {
console.log(res)
this.$message.success(`设置对比度成功`)
})
},
//处理饱和度变化
handleSaturationChange(camera) {
let param = {
camera_id: camera.id,
saturation: camera.saturation
}
setCameraSaturation(param).then(res => {
console.log(res)
this.$message.success(`设置饱和度成功`)
})
},
//处理色调变化
handleHueChange(camera) {
let param = {
camera_id: camera.id,
hue: camera.hue
}
setCameraHue(param).then(res => {
console.log(res)
this.$message.success(`设置色相成功`)
})
},
//处理增益变化
handleGainChange(camera) {
let param = {
camera_id: camera.id,
gain: camera.gain
}
setCameraGain(param).then(res => {
console.log(res)
this.$message.success(`设置增益成功`)
})
},
//处理曝光变化
handleExposureChange(camera) {
let param = {
camera_id: camera.id,
exposure: camera.exposure
}
setCameraExposure(param).then(res => {
console.log(res)
this.$message.success(`设置曝光成功`)
})
},
//开始链接webScoke //开始链接webScoke
startStream(camera) { startStream(camera) {
camera.worker.postMessage({ camera.worker.postMessage({
...@@ -537,12 +706,53 @@ export default { ...@@ -537,12 +706,53 @@ export default {
background-color: #f0f7ff; background-color: #f0f7ff;
} }
.clearfix {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.frame-title { .frame-title {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
} }
.frane-config {
text-align: right;
flex: 1;
}
.config-content {
width: 400px;
}
.config-item {
display: flex;
width: 100%;
justify-content: column-reverse;
align-items: center;
}
.config-item-label {
margin: 5px;
flex: 3;
}
.config-item-slider {
margin: 5px;
flex: 10;
}
.config-item-value {
margin: 5px;
flex: 1;
}
.camera-id { .camera-id {
font-weight: bold; font-weight: bold;
margin-right: 8px; margin-right: 8px;
......
src/utils/url.js
View file @ 231cbfd2
export const baseURL = '/api'//预约列表 export const baseURL = '/api'//预约列表
export const baseURLConsole1 ='192.168.0.102:8000'//双目相机和动态相机 export const baseURLConsole1 ='192.168.0.188:8000'//双目相机和动态相机
export const baseURLConsole2 ='192.168.0.106:8000'//静态相机和身高体重秤 export const baseURLConsole2 ='192.168.0.188:8000'//静态相机和身高体重秤
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment