18 changed files with 590 additions and 162 deletions
@ -0,0 +1,90 @@ |
|||||
|
import React, { useState, useEffect, useRef } from "react"; |
||||
|
import { connect } from "react-redux"; |
||||
|
import moment from 'moment' |
||||
|
import './videoPlay.less'; |
||||
|
|
||||
|
const timeFormat = 'MM-DD HH:mm:ss' |
||||
|
|
||||
|
const videoOperationHistroyProcess = ({ processDisX, setProcessDisX, histroyTime, isAdjustProcess, setIsAdjustProcess, }) => { |
||||
|
|
||||
|
const [timeRangeS, setTimeRangeS] = useState(0) |
||||
|
const [processDisXRatio, setProcessDisXRatio] = useState(0) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (histroyTime.length) { |
||||
|
setTimeRangeS(Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds'))) |
||||
|
} |
||||
|
}, [histroyTime]) |
||||
|
|
||||
|
return ( |
||||
|
<div > |
||||
|
<div style={{ height: 2, backgroundColor: '#ffffff7F' }}> |
||||
|
<div style={{ height: 2, backgroundColor: '#2F53EA', width: processDisX }}></div> |
||||
|
<div |
||||
|
style={{ |
||||
|
height: 9, width: 9, borderRadius: '100%', backgroundColor: '#fff', |
||||
|
position: 'relative', top: -6.5, cursor: 'pointer', |
||||
|
}} |
||||
|
id='process_point' |
||||
|
className="video_process_but" |
||||
|
onMouseDown={(ev) => { |
||||
|
setIsAdjustProcess(true) |
||||
|
ev.stopPropagation(); |
||||
|
ev.preventDefault(); |
||||
|
document.onmouseup = function () { |
||||
|
setIsAdjustProcess(false) |
||||
|
document.onmousemove = null; |
||||
|
document.onmouseup = null; |
||||
|
}; |
||||
|
|
||||
|
let oevent = ev; |
||||
|
let distanceX = oevent.clientX |
||||
|
let prev = Date.now(); |
||||
|
const point = document.getElementById('process_point') |
||||
|
const parentWidth = point.parentElement.offsetWidth |
||||
|
document.onmousemove = function (ev) { |
||||
|
ev.stopPropagation(); |
||||
|
ev.preventDefault(); |
||||
|
|
||||
|
// 节流 |
||||
|
let now = Date.now(); |
||||
|
if (now - prev >= 6) { |
||||
|
let oevent = ev; |
||||
|
let x = processDisX + oevent.clientX - distanceX |
||||
|
if (x < 0) { |
||||
|
x = 0 |
||||
|
} else if (x > parentWidth) { |
||||
|
x = parentWidth |
||||
|
} |
||||
|
console.log(parentWidth, x); |
||||
|
|
||||
|
setProcessDisX(x) |
||||
|
setProcessDisXRatio(x / parentWidth) |
||||
|
point.style.left = x + 'px'; |
||||
|
prev = Date.now(); |
||||
|
} |
||||
|
}; |
||||
|
}} |
||||
|
> |
||||
|
{/* <div |
||||
|
className={"video_process_time"} |
||||
|
style={{ |
||||
|
backgroundColor: '#0000007F', position: 'absolute', |
||||
|
top: -32, height: 24, lineHeight: '24px', textAlign: 'center', width: 94, left: -38 |
||||
|
}}> |
||||
|
{moment(histroyTime[0]).add(timeRangeS * processDisXRatio, 'seconds').format(timeFormat)} |
||||
|
</div> */} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth } = state; |
||||
|
return { |
||||
|
user: auth.user, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(videoOperationHistroyProcess); |
||||
@ -0,0 +1,54 @@ |
|||||
|
'use strict'; |
||||
|
import superagent from "superagent" |
||||
|
|
||||
|
// 操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
|
||||
|
export const YS_PTZ_DIRECTION = { |
||||
|
up: 0, |
||||
|
down: 1, |
||||
|
left: 2, |
||||
|
right: 3, |
||||
|
up_left: 4, |
||||
|
down_left: 5, |
||||
|
up_right: 6, |
||||
|
down_right: 7, |
||||
|
zoom_in: 9, |
||||
|
zoom_out: 8, |
||||
|
focus_in: 10, |
||||
|
focus_out: 11 |
||||
|
} |
||||
|
|
||||
|
export function ysptz (ac, { serialNo, yingshiToken, channelNo }) { |
||||
|
let params = { |
||||
|
accessToken: yingshiToken, |
||||
|
deviceSerial: serialNo, |
||||
|
channelNo: channelNo || 1, |
||||
|
direction: YS_PTZ_DIRECTION[ac], |
||||
|
speed: 2 |
||||
|
} |
||||
|
let startReqBody = Object.assign({}, params, { speed: 1 }) |
||||
|
let stopReqBody = params |
||||
|
let requestUrl = `https://open.ys7.com/api/lapp/device/ptz/` |
||||
|
superagent |
||||
|
.post(requestUrl + 'start') |
||||
|
.send(startReqBody) |
||||
|
.set('Content-Type', 'application/x-www-form-urlencoded') |
||||
|
.then((res) => { |
||||
|
let resBody = res.body |
||||
|
if (resBody.code != '200') { |
||||
|
// message.error(resBody.msg)
|
||||
|
} else { |
||||
|
setTimeout(_ => { |
||||
|
superagent |
||||
|
.post(requestUrl + 'stop') |
||||
|
.send(stopReqBody) |
||||
|
.set('Content-Type', 'application/x-www-form-urlencoded') |
||||
|
.then((tRes) => { |
||||
|
let resBody2 = tRes.body |
||||
|
if (resBody2.code != '200') { |
||||
|
// message.error('操作失败！')
|
||||
|
} |
||||
|
}) |
||||
|
}, 500) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
Loading…
Reference in new issue