subject-two/entry/src/main/ets/pages/VideoConfig.ets
“wangzhongjie” 848282fe04 新代码
2024-03-05 15:44:53 +08:00

657 lines
28 KiB
Plaintext

import TopLogo from './compontents/topLogo'
import FileUtil from '../common/utils/File'
import { VideoConfig } from './interfaces'
import common from '@ohos.app.ability.common';
import promptAction from '@ohos.promptAction'
import { startRecordVideo, endRecordVideo,takePhoto } from '../common/service/videoService'
import configAddress from '../common/utils/FileConfig'
import util from '@ohos.util';
@Entry
@Component
struct Index {
@State ratio: number = 850 / 960
@State videoSrc: string = 'rtsp://admin:12345qwe@192.168.36.94:554/h264/ch3/main/av_stream'
@State previewUri: Resource = $r('app.media.2_nor')
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State inputFontSize: number = 10 //12
@State rocordHandleObj:any = {
rocord_handle1:0,
rocord_handle2:0,
rocord_handle3:0,
rocord_handle4:0
}
@State isAutoPlay: boolean = true
@State showFlag: boolean = false
private vocObj = null;
@State showControls: boolean = false
private fileUtil: FileUtil
@State @Watch('outClick') outFlag: boolean = false;
@State oldParam: VideoConfig = {
videoNum:'1',
spls: '1',
wz: '0,0',
faceFlag: false,
shuiying: true,
pztd: '2',
ljlx: '',
ip: '192.168.36.94',
port: '554',
userName: 'admin',
pwd: '12345qwe',
td1: '1',
td2: '2',
td3: '3',
td4: '4',
videoRecord1: false,
videoRecord2: true,
videoRecord3: false,
videoRecord4: false,
text1: '',
text2: '',
text3: '',
dolt: '',
fontSize: '',
rlls: '1'
}
@State param: VideoConfig = {
videoNum:'1',
spls: '1',
wz: '0,0',
faceFlag: false,
shuiying: true,
pztd: '2',
ljlx: '',
ip: '192.168.36.94',
port: '554',
userName: 'admin',
pwd: '12345qwe',
td1: '1',
td2: '2',
td3: '3',
td4: '4',
videoRecord1: false,
videoRecord2: true,
videoRecord3: false,
videoRecord4: false,
text1: '',
text2: '',
text3: '',
dolt: '',
fontSize: '',
rlls: '1'
}
@State openFlag: boolean = true
@State lsArr: Array<any> = [
{key:'第一路'},
{key:'第二路'},
{key:'第三路'},
{key:'第四路'},
]
private context = getContext(this) as common.UIAbilityContext;
private controller1: VideoController = new VideoController()
private controller2: VideoController = new VideoController()
private controller3: VideoController = new VideoController()
private controller4: VideoController = new VideoController()
@State videoArr: Array<any> = [
{td:'td1',controller:this.controller1},
{td:'td2',controller:this.controller2},
{td:'td3',controller:this.controller3},
{td:'td4',controller:this.controller4},
]
private inputController: TextInputController = new TextInputController()
build() {
Column() {
TopLogo({ outFlag: $outFlag })
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Flex({wrap:FlexWrap.Wrap,direction:FlexDirection.Row}) {
ForEach(this.videoArr,(item,index)=>{
Video({
src: this.openFlag ? `rtsp://${this.param.userName}:${this.param.pwd}@${this.param.ip}:${this.param.port}/h264/ch${this.param[item.td]}/main/av_stream` : '',
currentProgressRate: this.curRate,
controller: item.controller
})
.width(270 * this.ratio)
.height(230 * this.ratio)
.autoPlay(this.isAutoPlay)
.controls(this.showControls)
.margin(10 * this.ratio)
})
}.margin({ top: 37 * this.ratio, left: 30 * this.ratio }).width(600*this.ratio).height(600*this.ratio)
Column() {
Image($r('app.media.shezhi'))
.width(215 * this.ratio)
.height(64 * this.ratio)
.margin({ bottom: 10 * this.ratio })
.onClick(() => {
this.showFlag = true
})
Image($r('app.media.luxiang'))
.width(215 * this.ratio)
.height(64 * this.ratio)
.margin({ bottom: 10 * this.ratio })
.onClick(async () => {
if (!this.param.videoRecord4 && !this.param.videoRecord3
&& !this.param.videoRecord2 && !this.param.videoRecord1) {
promptAction.showToast({
message: '请选择录像通道',
duration: 3000
})
return
}
if (this.rocordHandleObj.rocord_handle1
|| this.rocordHandleObj.rocord_handle2
|| this.rocordHandleObj.rocord_handle3
|| this.rocordHandleObj.rocord_handle4) {
return
}
for (let i = 1; i <= 4; i++) {
if (this.param['videoRecord'+i]) {
// setTimeout(()=>{
this.getfilehandleCode(i)
// },500)
}
}
promptAction.showToast({
message: '录像开始',
duration: 3000
})
})
Image($r('app.media.tingzhi'))
.width(215 * this.ratio)
.height(64 * this.ratio)
.margin({ bottom: 10 * this.ratio })
.onClick(() => {
for (let i = 1; i <= 4; i++) {
console.log('rocord_handle',JSON.stringify(this.rocordHandleObj))
if (this.rocordHandleObj['rocord_handle'+i]) {
endRecordVideo(this.rocordHandleObj['rocord_handle'+i])
this.rocordHandleObj['rocord_handle'+i] = -1
}
}
promptAction.showToast({
message: '录像结束',
duration: 3000
})
})
Image($r('app.media.zhuatu'))
.width(215 * this.ratio)
.height(64 * this.ratio)
.onClick(async () => {
const arr=['1','2','3','4']
if(!arr.includes(this.param.pztd)){
promptAction.showToast({
message: '请填写正确的拍照通道',
duration: 3000
})
return
}
try{
const buffer =await takePhoto(this.param,this.context,1,'pz/')
// let view: Uint8Array = new Uint8Array(buffer); // 使用Uint8Array读取arrayBuffer的数据
// let textDecoder: util.TextDecoder = util.TextDecoder.create(); // 调用util模块的TextDecoder类
// const str = textDecoder.decodeWithStream(view).trim(); // 对view解码
// console.log("daihai base64 str = " + str);
// console.log("daihai base64 length = " + str.length);
promptAction.showToast({
message: '抓图完成',
duration: 3000
})
// takePhoto(this.param,this.context,1,'pz/').then((data) => {
// console.log('daihai suc')
promptAction.showToast({
message: '抓图完成',
duration: 3000
})
// }).catch((err) => {
// console.log('daihai err: ' + err)
// })
}catch (error){
console.log('daihai',error)
}
})
.margin({ bottom: 10 * this.ratio })
}.margin({ right: 38 * this.ratio, top: 110 * this.ratio })
}.backgroundColor('#1A1A1A')
// Column() {
// Text('提示信息:')
// .fontSize(18 * this.ratio)
// .fontColor('#fff')
// .margin({ left: 29 * this.ratio, top: 13 * this.ratio })
// .align(Alignment.Start)
// .width('100%')
// }.width('100%').height(70 * this.ratio).backgroundColor('#333230').position({ x: 0, y: 470 * this.ratio })
if (this.showFlag) {
Column() {
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
Text('视频参数设置')
.width('100%')
.align(Alignment.Start)
.fontSize(24 * this.ratio)
.fontColor('#333333')
.margin({ left: 20 * this.ratio, top: 22 * this.ratio })
Row() {
Image($r('app.media.fh')).width(117 * this.ratio).height(50 * this.ratio).onClick(() => {
// this.oldParam = JSON.parse(JSON.stringify(this.param))
this.param = JSON.parse(JSON.stringify(this.oldParam))
this.showFlag = false
})
Image($r('app.media.bc'))
.width(117 * this.ratio)
.height(50 * this.ratio)
.margin({ left: 15 * this.ratio })
.onClick(() => {
console.log('111111')
this.writeConfig()
})
}.margin({ right: 135 * this.ratio, top: 10 * this.ratio })
}
Column() {
Row() {
Text('视频路数').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 13 * this.ratio })
TextInput({ text: this.param.videoNum, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(34 * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ left: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
.onChange((value) => {
this.param.spls = value
})
Column() {
Image($r('app.media.shang')).width(15 * this.ratio).height(15 * this.ratio).onClick(() => {
this.param.videoNum = (parseInt(this.param.videoNum) + 1).toString()
})
Image($r('app.media.xia')).width(15 * this.ratio).height(15 * this.ratio).onClick(() => {
this.param.videoNum = (parseInt(this.param.videoNum) - 1).toString()
})
}.margin({ left: 5 * this.ratio, right: 10 * this.ratio })
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(this.param.faceFlag)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
this.param.faceFlag = value
console.info('Checkbox1 change is' + value)
})
Text('启用过程人脸比对').fontColor('#333333').fontSize(16 * this.ratio)
TextInput({ text: this.param.rlls, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(34 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ left: 10 * this.ratio, right: 15 * this.ratio })
.onChange((value) => {
this.param.rlls = value
})
Text('拍照通道').fontColor('#333333').fontSize(16 * this.ratio)
TextInput({ text: this.param.pztd, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.padding({ top: 0, bottom: 0 })
.width(34 * this.ratio)
.height(26 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.margin({ left: 10 * this.ratio, right: 15 * this.ratio })
.onChange((value: string) => {
this.param.pztd = value
})
Text('设备类型').fontColor('#333333').fontSize(16 * this.ratio)
TextInput({ text: '海康', controller: this.inputController })
.borderRadius(0)
.padding({ bottom: 0, top: 0 })
.width(67 * this.ratio)
.height(26 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.margin({ left: 10 * this.ratio, right: 15 * this.ratio })
Text('信号大小').fontColor('#333333').fontSize(16 * this.ratio)
TextInput({ text: this.param.spls, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.padding({ top: 0, bottom: 0 })
.width(34 * this.ratio)
.height(26 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.margin({ left: 10 * this.ratio, right: 15 * this.ratio })
Text('k').fontColor('#333333').fontSize(16 * this.ratio)
Text('链接类型').fontColor('#333333').fontSize(16 * this.ratio)
TextInput({ text: this.param.ljlx, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.padding({ top: 0, bottom: 0 })
.width(34 * this.ratio)
.height(26 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.margin({ left: 10 * this.ratio, right: 5 * this.ratio })
}.width('100%').align(Alignment.Start).backgroundColor('#E5E3DF')
Row() {
Column() {
Row() {
Row() {
}.width(70 * this.ratio)
Text('IP地址')
.width(158 * this.ratio)
.fontSize(16 * this.ratio)
.fontColor('#666666')
.margin({ right: 10 * this.ratio })
.textAlign(TextAlign.Center)
Text('通道号')
.width(96 * this.ratio)
.fontSize(16 * this.ratio)
.fontColor('#666666')
.margin({ right: 10 * this.ratio })
.textAlign(TextAlign.Center)
Text('用户名')
.width(120 * this.ratio)
.fontSize(16 * this.ratio)
.fontColor('#666666')
.margin({ right: 10 * this.ratio })
.textAlign(TextAlign.Center)
Text('密码')
.width(120 * this.ratio)
.fontSize(16 * this.ratio)
.fontColor('#666666')
.margin({ right: 10 * this.ratio })
.textAlign(TextAlign.Center)
Text('端口号')
.width(60 * this.ratio)
.fontSize(16 * this.ratio)
.fontColor('#666666')
.margin({ right: 10 * this.ratio })
.textAlign(TextAlign.Center)
}
ForEach(this.lsArr,(item,index)=>{
Row() {
Text(item.key)
.width(70 * this.ratio)
.fontColor('#333333')
.fontSize(16 * this.ratio)
.textAlign(TextAlign.Center)
TextInput({ text: this.param.ip, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(2)
.width(158 * this.ratio)
.height(26 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ right: 10 * this.ratio })
.onChange((value: string) => {
this.param.ip = value
})
TextInput({ text: this.param['td'+(Number(index)+1)], controller: this.inputController })
.type(InputType.Normal)
.borderRadius(2)
.width(96 * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ right: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
.onChange((value: string) => {
this.param['td'+(Number(index)+1)] = value
})
TextInput({ text: this.param.userName, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(2)
.width(120 * this.ratio)
.height(26 * this.ratio)
.margin({ right: 10 * this.ratio })
.padding({ top: 0, bottom: 0 })
.fontSize(this.inputFontSize * this.ratio)
.onChange((value: string) => {
this.param.userName = value
})
TextInput({ text: this.param.pwd, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(2)
.width(120 * this.ratio)
.height(26 * this.ratio)
.fontSize(this.inputFontSize * this.ratio)
.margin({ right: 10 * this.ratio })
.padding({ top: 0, bottom: 0 })
.onChange((value: string) => {
this.param.pwd = value
})
TextInput({ text: this.param.port, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(2)
.width(60 * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ right: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
.onChange((value: string) => {
this.param.port = value
})
}.margin({ top: 10 * this.ratio })
})
}.width(672 * this.ratio).height(174 * this.ratio).backgroundColor('#EDEBE8')
Column() {
Row() {
Text('录像范围').fontSize(16 * this.ratio).fontColor('#333333').margin({ top: 10 * this.ratio })
Row() {
Column() {
Row() {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(this.param.videoRecord1)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
this.param.videoRecord1 = value
console.info('Checkbox1 change is' + value)
})
Text('一路').fontSize(16 * this.ratio).fontColor('#333333')
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
.select(this.param.videoRecord2)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
this.param.videoRecord2 = value
console.info('Checkbox1 change is' + value)
})
Text('二路').fontSize(16 * this.ratio).fontColor('#333333')
}
Row() {
Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
.select(this.param.videoRecord3)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
this.param.videoRecord3 = value
console.info('Checkbox1 change is' + value)
})
Text('三路').fontSize(16 * this.ratio).fontColor('#333333')
Checkbox({ name: 'checkbox4', group: 'checkboxGroup' })
.select(this.param.videoRecord4)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
this.param.videoRecord4 = value
console.info('Checkbox1 change is' + value)
})
Text('四路').fontSize(16 * this.ratio).fontColor('#333333')
}
}
}
}.alignItems(VerticalAlign.Top).justifyContent(FlexAlign.Start)
Row() {
Text('视频遮挡').fontSize(16 * this.ratio).fontColor('#333333').margin({ top: 10 * this.ratio })
Row() {
Column() {
Row() {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(true)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
console.info('Checkbox1 change is' + value)
})
Text('一路').fontSize(16 * this.ratio).fontColor('#333333')
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(true)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
console.info('Checkbox1 change is' + value)
})
Text('二路').fontSize(16 * this.ratio).fontColor('#333333')
}
Row() {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(true)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
console.info('Checkbox1 change is' + value)
})
Text('三路').fontSize(16 * this.ratio).fontColor('#333333')
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(true)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
console.info('Checkbox1 change is' + value)
})
Text('四路').fontSize(16 * this.ratio).fontColor('#333333')
}
}
}
}.alignItems(VerticalAlign.Top).justifyContent(FlexAlign.Start)
}.width(267 * this.ratio).height(174 * this.ratio).margin({ left: 7 * this.ratio, top: 10 * this.ratio })
}.width('100%')
Row() {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(this.param.shuiying)
.width(22 * this.ratio)
.height(22 * this.ratio)
.onChange((value: boolean) => {
console.info('Checkbox1 change is' + value)
})
Text('照片叠加文字').fontColor('#333333').fontSize(16 * this.ratio)
Text('位置').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 24 * this.ratio })
TextInput({ text: this.param.wz, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(79 * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.fontSize(this.inputFontSize * this.ratio)
.margin({ left: 10 * this.ratio })
Text('叠加内容').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 24 * this.ratio })
TextInput({ text: this.param.text1, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(79 * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ left: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
Text('+').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 5 * this.ratio })
TextInput({ text: this.param.text2, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(79 * this.ratio)
.height(26 * this.ratio)
.padding({ top: 0, bottom: 0 })
.margin({ left: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
Text('+').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 5 * this.ratio })
TextInput({ text: this.param.text3, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(79 * this.ratio)
.padding({ top: 0, bottom: 0 })
.height(26 * this.ratio)
.margin({ left: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
Text('分隔符').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 24 * this.ratio })
TextInput({ text: this.param.dolt, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(67 * this.ratio)
.height(26 * this.ratio)
.margin({ left: 10 * this.ratio })
.padding({ top: 0, bottom: 0 })
.fontSize(this.inputFontSize * this.ratio)
Text('文字大小').fontColor('#333333').fontSize(16 * this.ratio).margin({ left: 24 * this.ratio })
TextInput({ text: this.param.fontSize, controller: this.inputController })
.type(InputType.Normal)
.borderRadius(0)
.width(34 * this.ratio)
.height(26 * this.ratio)
.margin({ left: 10 * this.ratio })
.fontSize(this.inputFontSize * this.ratio)
.padding({ top: 0, bottom: 0 })
}.width('100%').align(Alignment.Start).backgroundColor('#E5E3DF')
}.width(946 * this.ratio).height(336 * this.ratio).backgroundColor('#E5E3DF').margin({ top: 13 * this.ratio })
}
.width('100%')
.height(395 * this.ratio)
.backgroundColor('#CCC4B8')
.position({ x: 0, y: 260 * this.ratio })
.border({ radius: { topLeft: 24 * this.ratio, topRight: 24 * this.ratio } })
}
}.backgroundColor('#1A1A1A').width('100%').height('100%')
}
aboutToAppear() {
this.openFlag = true
const fileUtil = new FileUtil(this.context)
this.fileUtil = fileUtil
this.getVideoConfig()
}
async getfilehandleCode(td){
const record_handle = await startRecordVideo(this.param,td,this.context,'lp')
this.rocordHandleObj['rocord_handle'+td]=record_handle
}
outClick() {
this.openFlag = false
}
async onPageShow() {
}
async getVideoConfig() {
const data = await this.fileUtil.readFile(configAddress.comoonfileWriteAddress+'/config/config3.txt');
this.oldParam = JSON.parse(data)
this.param = JSON.parse(data)
}
async writeConfig() {
this.oldParam = JSON.parse(JSON.stringify(this.param))
this.videoArr=JSON.parse(JSON.stringify(this.videoArr))
console.log('videoArr',JSON.stringify(this.videoArr))
console.log('videoArr2',JSON.stringify(this.param))
const folderPath = await this.fileUtil.initFolder(`/config`);
this.fileUtil.addFile(`${folderPath}/config3.txt`, JSON.stringify(this.param), 'overWrite')
this.showFlag = false
}
}