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