Skip to content

Commit

Permalink
新增录像文件删除,控制台流媒体管理
Browse files Browse the repository at this point in the history
  • Loading branch information
langmansh committed Nov 29, 2021
1 parent a6214b3 commit 4ac9fb6
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 8 deletions.
4 changes: 4 additions & 0 deletions src/config/apiconfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ module.exports = {
login: `${APIV1}/login`,

// searchChannelConfigs: `${apiAKStream}/MediaServer/GetOnlineStreamInfoList`,
restartMediaServer:`${apiAKStream}/AKStreamKeeper/RestartMediaServer`,
stopMediaServer:`${apiAKStream}/AKStreamKeeper/ShutdownMediaServer`,
startMediaServer:`${apiAKStream}/AKStreamKeeper/StartMediaServer`,
deleteRecordFile:`${apiAKStream}/MediaServer/DeleteRecordFile`,
stopRecord:`${apiAKStream}/MediaServer/StopRecord`,
startRecord:`${apiAKStream}/MediaServer/StartRecord`,
streamStop:`${apiAKStream}/MediaServer/StreamStop`,
Expand Down
18 changes: 17 additions & 1 deletion src/service/channel.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import request from '../util/request';
import apiconfig from '../config/apiconfig'


const { searchChannelConfigs, searchChannelConfig, deleteChannelConfig, updateChannelConfig, createChannelConfig, searchChannelConfigByVas, touchChannelProxyStream, saveChannelConfig, saveChannelConfigs, queryRecordMonthly, queryRecordDaily, getOnlineStreamInfoList, getRecordFileList, getHistroyRecordFileList, getHistroyRecordFileStatus, histroyVideo, getVideoChannelList, modifyVideoChannel, activeVideoChannel, addVideoChannel, getRecordPlanList, createRecordPlan, deleteRecordPlanByName, getMediaServerList,streamLive,streamStop,startRecord,stopRecord} = apiconfig.api;
const { searchChannelConfigs, searchChannelConfig, deleteChannelConfig, updateChannelConfig, createChannelConfig, searchChannelConfigByVas, touchChannelProxyStream, saveChannelConfig, saveChannelConfigs, queryRecordMonthly, queryRecordDaily, getOnlineStreamInfoList, getRecordFileList, getHistroyRecordFileList, getHistroyRecordFileStatus, histroyVideo, getVideoChannelList, modifyVideoChannel, activeVideoChannel, addVideoChannel, getRecordPlanList, createRecordPlan, deleteRecordPlanByName, getMediaServerList,streamLive,streamStop,startRecord,stopRecord,deleteRecordFile,startMediaServer,stopMediaServer,restartMediaServer} = apiconfig.api;


export async function findChannels(params) {
Expand Down Expand Up @@ -116,4 +116,20 @@ export async function StartRecord(mediaServerId,mainId) {

export async function StopRecord(mediaServerId,mainId) {
return request({url: stopRecord+"?mediaServerId="+mediaServerId+"&mainId="+mainId,config:{headers:{"AccessKey":apiconfig.AccessKey}}, method: 'get', data: null,});
}

export async function DeleteRecordFile(dbId) {
return request({url: deleteRecordFile+"?dbId="+dbId,config:{headers:{"AccessKey":apiconfig.AccessKey}}, method: 'get', data: null,});
}

export async function StartMediaServer(mediaServerId) {
return request({url: startMediaServer+"?mediaServerId="+mediaServerId,config:{headers:{"AccessKey":apiconfig.AccessKey}}, method: 'get', data: null,});
}

export async function StopMediaServer(mediaServerId) {
return request({url: stopMediaServer+"?mediaServerId="+mediaServerId,config:{headers:{"AccessKey":apiconfig.AccessKey}}, method: 'get', data: null,});
}

export async function RestartMediaServer(mediaServerId) {
return request({url: restartMediaServer+"?mediaServerId="+mediaServerId,config:{headers:{"AccessKey":apiconfig.AccessKey}}, method: 'get', data: null,});
}
15 changes: 13 additions & 2 deletions src/view/home/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ThreadDelayCharts from "./ThreadDelayCharts";
import ReactTimeout from "react-timeout";
import {findThreadsLoad, restartZlmediaServer} from "../../service/global";
import ServerTcpSessions from "./ServerTcpSessions";
import MediaServer from "./MediaServer";
import ServerConfigParams from "./ServerConfigParams";
import RvDrawer from "../../component/RvDrawer/RvDrawer"

Expand Down Expand Up @@ -74,7 +75,7 @@ export default class Home extends React.Component {
return (
<RvPage className={"home-page"} headerTools={
<div>
<Button icon={"reload"} type="danger" ghost onClick={() => {
{/* <Button icon={"reload"} type="danger" ghost onClick={() => {
const config = {
title: '提示!',
content: "您确定要重启流媒体服务吗",
Expand All @@ -92,7 +93,7 @@ export default class Home extends React.Component {
}
};
return Modal.confirm(config);
}}>重启服务</Button>
}}>重启服务</Button> */}

<Button icon={"setting"} type="primary" ghost onClick={() => {
RvDrawer.open({
Expand All @@ -115,6 +116,16 @@ export default class Home extends React.Component {
</Card>
</Col>

<Col span={24} style={{marginBottom: 10}}>
<Card className={"dashboard-card"} title="流媒体服务" bodyStyle={{padding: "0px"}} extra={
<div>
<Button icon={"reload"} onClick={()=>this.mediaServer.loadMediaServerData()}></Button>
</div>
}>
<MediaServer ref={(comp) => this.mediaServer = comp}/>
</Card>
</Col>

<Col span={24} style={{marginBottom: 10}}>
<Card className={"dashboard-card"} title="会话列表" bodyStyle={{padding: "0px"}} extra={
<div>
Expand Down
127 changes: 127 additions & 0 deletions src/view/home/MediaServer.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import React from 'react';
import {findServerAllSession, kickServerTcpSession} from "../../service/global";
import {GetMediaServerList,StartMediaServer,StopMediaServer,RestartMediaServer} from "../../service/channel";
import {message, Table,Tag,Divider} from "antd";


export default class MediaServer extends React.Component {

constructor(props) {
super(props);
//const that = this;
this.state = {
mediaServer: [],
mediaServerLoading: false,
}
}

componentDidMount() {
this.loadMediaServerData();
}

loadMediaServerData = () => {
this.setState({
mediaServerLoading: true,
}, () => {
GetMediaServerList().then((res) => {
if (res._statusCode == 200) {
this.setState({
mediaServer: res.data,
mediaServerLoading: false
})
}
})
})
}


startMediaServer = (record) => {
StartMediaServer(record.mediaServerId).then(res => {
if (res._statusCode == 200 && res.data.isRunning) {
message.info(`启动 -> ${record.mediaServerId} -> 成功!`);
this.loadMediaServerData();
}
else
{
message.error(`启动 -> ${record.mediaServerId} -> 失败!`);
this.loadMediaServerData();
}
})
}

stopMediaServer = (record) => {
StopMediaServer(record.mediaServerId).then(res => {
if (res._statusCode == 200 && res.data) {
message.info(`停止 -> ${record.mediaServerId} -> 成功!`);
this.loadMediaServerData();
}
else
{
message.error(`停止 -> ${record.mediaServerId} -> 失败!`);
this.loadMediaServerData();
}
})
}

restartMediaServer = (record) => {
RestartMediaServer(record.mediaServerId).then(res => {
if (res._statusCode == 200 && res.data.isRunning) {
message.info(`重启 -> ${record.mediaServerId} -> 成功!`);
this.loadMediaServerData();
}
else
{
message.error(`重启 -> ${record.mediaServerId} -> 失败!`);
this.loadMediaServerData();
}
})
}

render() {
return (
<Table columns={[
{
title: '服务IP',
dataIndex: 'ipV4Address',
},
{
title: '流媒体ID',
dataIndex: 'mediaServerId',
},
{
title: 'AKStreamKeeper服务',
dataIndex: 'isKeeperRunning',
render: (text, record) => {
return text ? <Tag color='geekblue'>运行中</Tag> : <Tag color='volcano'>未运行</Tag>
}
},
{
title: 'ZLMediaKit服务',
dataIndex: 'isMediaServerRunning',
render: (text, record) => {
return text ? <Tag color='geekblue'>运行中</Tag> : <Tag color='volcano'>未运行</Tag>
}
},
{
title: '操作',
key: 'action',
width: 360,
render: (text, record) => (
<span>
<a href="javascript:;" onClick={()=>this.startMediaServer(record)}>启动</a>
<Divider type="vertical" />
<a href="javascript:;" onClick={()=>this.stopMediaServer(record)}>停止</a>
<Divider type="vertical" />
<a href="javascript:;" onClick={()=>this.restartMediaServer(record)}>重启</a>
</span>
)
},
]} dataSource={this.state.mediaServer} size="small"/>
);
}



static propTypes = {}
static defaultProps = {}
}
5 changes: 3 additions & 2 deletions src/view/home/ServerTcpSessions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ export default class ServerTcpSessions extends React.Component {
serverTcpSessionsLoading: true,
}, () => {
findServerAllSession().then((res) => {
if (res.code == 0) {
console.log(res.data.code)
if (res.data.code == 0) {
this.setState({
serverTcpSessions: res.data,
serverTcpSessions: res.data.data,
serverTcpSessionsLoading: false
})
}
Expand Down
25 changes: 22 additions & 3 deletions src/view/player/ZLPlayer.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import "./ZLPlayer.less"
import {findChannelByVas,GetRecordFileList} from "../../service/channel";
import {findChannelByVas,GetRecordFileList,DeleteRecordFile} from "../../service/channel";
import queryString from 'query-string';
import Loader from "../../component/Loader";
import {Icon, Input, Radio, Tabs, Tooltip,Table, Divider,Pagination} from "antd";
import {Icon,message, Input, Radio, Tabs, Tooltip,Table, Divider,Pagination} from "antd";
import ReactPlayer from '../../component/ReactPlayer';
import hlsjs from 'hls.js';
import flvjs from 'flv.js';
Expand Down Expand Up @@ -31,6 +31,7 @@ export default class ZLPlayer extends React.Component {
pageIndex:1,
pageSize:2,
mainId:stream,
deleted:false,
},
dataTotal: 0,
iframe: false,
Expand Down Expand Up @@ -123,7 +124,6 @@ export default class ZLPlayer extends React.Component {
}

loadData = (params) => {
console.log(params)
GetRecordFileList({
pageIndex: params ? params.pageIndex : this.state.recordparams.pageIndex,
pageSize: this.state.pageSize,
Expand All @@ -134,6 +134,7 @@ export default class ZLPlayer extends React.Component {
}
],
mainId:this.state.recordparams.mainId,
deleted:false,
// active: 1,
...params
}).then(res => {
Expand Down Expand Up @@ -162,6 +163,20 @@ export default class ZLPlayer extends React.Component {
})
}

deleteRecordFile = (dbId) => {
DeleteRecordFile(dbId).then(res => {
if(res._success && res._statusCode === 200 && res.data)
{
message.success('删除录像文件成功!');
this.loadData(this.state.recordparams)
}
else
{
message.error('删除录像文件失败!');
}
})
}

changePlay = (type) => {
const {channelData} = this.state;
if (type == "flv") {
Expand Down Expand Up @@ -264,6 +279,10 @@ export default class ZLPlayer extends React.Component {
{
<a href={record.downloadUrl} >下载</a>
}
<Divider type="vertical" />
{
<a href="javascript:;" onClick={()=>this.deleteRecordFile(record.id)}>删除</a>
}
</span>
),
},
Expand Down

0 comments on commit 4ac9fb6

Please sign in to comment.