Skip to content

GitLab

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

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

parent c696cc7d
Show whitespace changes
Inline Side-by-side
src/api/dynamiCamera.js
View file @ 231cbfd2
......@@ -105,3 +105,58 @@ export function stopMultiCameraRecode(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() {
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 @@
<span class="camera-id">相机 {{ camera.id }}</span>
<span class="camera-spec">({{ camera.width }}×{{ camera.height }} @{{ camera.fps }}fps)</span>
</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 class="frame-header" style="padding: 5px; text-align: center;">
<el-select v-model="camera.cameraOrientation" size="mini" style="width: 80px; margin-right: 10px;"
......@@ -324,7 +399,13 @@ import {
closeDynamiCamera,
disconnectDynamiCamera,
startMultiCameraRecode,
stopMultiCameraRecode
stopMultiCameraRecode,
setDynamiCameraBrightness,//设置动态相机亮度
setDynamiCameraContrast,//设置动态相机对比度
setDynamiCameraSaturation,//设置动态相机饱和度
setDynamiCameraHue,//设置动态相机色相
setDynamiCameraGain,//设置动态相机增益
setDynamiCameraExposure,//设置动态相机曝光
} from '@/api/dynamiCamera.js'
import { binocularCameraMixins } from '@/components/binocularCamera'
import Worker from '@/components/workers/dynamiCamera.worker.js'
......@@ -375,6 +456,12 @@ export default {
statusInfo: null,
captureLog: '等待连接',
worker, // 存储worker引用
brightness: 0,//亮度
contrast: 0,//对比度
saturation: 0,//饱和度
hue: 0,//色相
gain: 0,//增益
exposure: 0,//曝光
})
this.workers[item.camera_id] = worker;
})
......@@ -418,6 +505,15 @@ export default {
initDynamiCamera(param).then(res => {
console.log(res)
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.height = parseInt(height)
camera.fps = this.dynamiSettings.fps
......@@ -482,6 +578,74 @@ export default {
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连接
startStream(camera) {
camera.worker.postMessage({
......@@ -540,7 +704,7 @@ export default {
console.log(param)
//低帧率
if(!this.dynamiSettings.lowFpsMode){
if (!this.dynamiSettings.lowFpsMode) {
this.dynamiSettings.lowFpsMode = true
await this.toggleLowFpsMode(this.dynamiSettings.lowFpsMode)
}
......@@ -551,7 +715,7 @@ export default {
this.startRecordingTimer();
this.$message.success(`开始录制`);
})
}else{
} else {
this.$message.warning("请先停止双目相机的获取")
}
......@@ -735,13 +899,53 @@ export default {
background-color: #f0f7ff;
}
.clearfix {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.frame-title {
flex: 1;
display: flex;
align-items: center;
font-size: 14px;
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 {
font-weight: bold;
margin-right: 8px;
......
src/components/stillCamera.vue
View file @ 231cbfd2
......@@ -60,6 +60,79 @@
<span class="camera-id">相机 {{ camera.id }}_{{ camera.name }}</span>
<span class="camera-spec">({{ camera.width }}×{{ camera.height }} @{{ camera.fps }}fps)</span>
</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 class="frame-header">
<el-select v-model="camera.cameraOrientation" style="width: 120px" @change="configCamera(camera)">
......@@ -108,7 +181,22 @@
import {
baseURLConsole2
} 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'
export default {
name: 'StillCamera',
......@@ -150,6 +238,12 @@ export default {
statusInfo: null,
captureLog: '等待连接',
worker, // 存储worker引用
brightness: 0,//亮度
contrast: 0,//对比度
saturation: 0,//饱和度
hue: 0,//色相
gain: 0,//增益
exposure: 0,//曝光
})
this.workers[item.camera_id] = worker;
})
......@@ -190,6 +284,15 @@ export default {
initializeStillCamera(param).then(res => {
console.log(res)
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.height = parseInt(height)
camera.fps = this.globalParams.fps
......@@ -228,6 +331,72 @@ export default {
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
startStream(camera) {
camera.worker.postMessage({
......@@ -537,12 +706,53 @@ export default {
background-color: #f0f7ff;
}
.clearfix {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.frame-title {
flex: 1;
display: flex;
align-items: center;
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 {
font-weight: bold;
margin-right: 8px;
......
src/utils/url.js
View file @ 231cbfd2
export const baseURL = '/api'//预约列表
export const baseURLConsole1 ='192.168.0.102:8000'//双目相机和动态相机
export const baseURLConsole2 ='192.168.0.106:8000'//静态相机和身高体重秤
\ No newline at end of file
export const baseURLConsole1 ='192.168.0.188:8000'//双目相机和动态相机
export const baseURLConsole2 ='192.168.0.188:8000'//静态相机和身高体重秤
\ 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