fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' into master

pull/1/head
648540858 5 years ago
committed by GitHub
parent
00fdc6281c 6e8cc24e64
commit
2fe9e519b4
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 649 additions and 445 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java
  2. 25
      src/main/java/com/genersoft/iot/vmp/gb28181/bean/RecordItem.java
  3. 2
      src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/ISIPCommander.java
  4. 10
      src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java
  5. 11
      src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java
  6. 28
      src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
  7. 5
      src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMUtils.java
  8. 8
      src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
  9. 21
      src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
  10. 46
      src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
  11. 2
      src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java
  12. 68
      src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java
  13. 2
      web_src/index.html
  14. 5
      web_src/package-lock.json
  15. 1
      web_src/package.json
  16. 98
      web_src/src/components/Loading.vue
  17. 10
      web_src/src/components/Login.vue
  18. 24
      web_src/src/components/channelList.vue
  19. 720
      web_src/src/components/gb28181/devicePlayer.vue
  20. 2
      web_src/src/main.js

2
src/main/java/com/genersoft/iot/vmp/common/VideoManagerConstants.java
View File

@ -18,6 +18,8 @@ public class VideoManagerConstants {
public static final String PLAYER_PREFIX = "VMP_player_"; public static final String PLAYER_PREFIX = "VMP_player_";
public static final String PLAY_BLACK_PREFIX = "VMP_playback_";
public static final String EVENT_ONLINE_REGISTER = "1"; public static final String EVENT_ONLINE_REGISTER = "1";
public static final String EVENT_ONLINE_KEEPLIVE = "2"; public static final String EVENT_ONLINE_KEEPLIVE = "2";

25
src/main/java/com/genersoft/iot/vmp/gb28181/bean/RecordItem.java
View File

@ -1,12 +1,18 @@
package com.genersoft.iot.vmp.gb28181.bean; package com.genersoft.iot.vmp.gb28181.bean;
import org.jetbrains.annotations.NotNull;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
/** /**
* @Description:设备录像bean * @Description:设备录像bean
* @author: swwheihei * @author: swwheihei
* @date: 2020年5月8日 下午2:06:54 * @date: 2020年5月8日 下午2:06:54
*/ */
public class RecordItem { public class RecordItem implements Comparable<RecordItem>{
private String deviceId; private String deviceId;
@ -97,4 +103,21 @@ public class RecordItem {
public void setRecorderId(String recorderId) { public void setRecorderId(String recorderId) {
this.recorderId = recorderId; this.recorderId = recorderId;
} }
@Override
public int compareTo(@NotNull RecordItem recordItem) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
try {
Date startTime_now = sdf.parse(startTime);
Date startTime_param = sdf.parse(recordItem.getStartTime());
if (startTime_param.compareTo(startTime_now) > 0) {
return -1;
}else {
return 1;
}
} catch (ParseException e) {
e.printStackTrace();
}
return 0;
}
} }

2
src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/ISIPCommander.java
View File

@ -80,7 +80,7 @@ public interface ISIPCommander {
* @param startTime 开始时间,格式要求：yyyy-MM-dd HH:mm:ss * @param startTime 开始时间,格式要求：yyyy-MM-dd HH:mm:ss
* @param endTime 结束时间,格式要求：yyyy-MM-dd HH:mm:ss * @param endTime 结束时间,格式要求：yyyy-MM-dd HH:mm:ss
*/ */
public String playbackStreamCmd(Device device,String channelId, String startTime, String endTime); public StreamInfo playbackStreamCmd(Device device,String channelId, String startTime, String endTime);
/** /**
* 视频流停止 * 视频流停止

10
src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java
View File

@ -279,7 +279,7 @@ public class SIPCommander implements ISIPCommander {
* @param endTime 结束时间,格式要求：yyyy-MM-dd HH:mm:ss * @param endTime 结束时间,格式要求：yyyy-MM-dd HH:mm:ss
*/ */
@Override @Override
public String playbackStreamCmd(Device device, String channelId, String startTime, String endTime) { public StreamInfo playbackStreamCmd(Device device, String channelId, String startTime, String endTime) {
try { try {
MediaServerConfig mediaInfo = storager.getMediaInfo(); MediaServerConfig mediaInfo = storager.getMediaInfo();
String ssrc = streamSession.createPlayBackSsrc(); String ssrc = streamSession.createPlayBackSsrc();
@ -324,7 +324,13 @@ public class SIPCommander implements ISIPCommander {
ClientTransaction transaction = transmitRequest(device, request); ClientTransaction transaction = transmitRequest(device, request);
streamSession.put(ssrc, transaction); streamSession.put(ssrc, transaction);
return ssrc;
StreamInfo streamInfo = new StreamInfo();
streamInfo.setSsrc(ssrc);
streamInfo.setCahnnelId(channelId);
streamInfo.setDeviceID(device.getDeviceId());
boolean b = storager.startPlayBlack(streamInfo);
return streamInfo;
} catch ( SipException | ParseException | InvalidArgumentException e) { } catch ( SipException | ParseException | InvalidArgumentException e) {
e.printStackTrace(); e.printStackTrace();

11
src/main/java/com/genersoft/iot/vmp/gb28181/transmit/request/impl/MessageRequestProcessor.java
View File

@ -2,11 +2,7 @@ package com.genersoft.iot.vmp.gb28181.transmit.request.impl;
import java.io.ByteArrayInputStream; import java.io.ByteArrayInputStream;
import java.text.ParseException; import java.text.ParseException;
import java.util.ArrayList; import java.util.*;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import javax.sip.InvalidArgumentException; import javax.sip.InvalidArgumentException;
import javax.sip.RequestEvent; import javax.sip.RequestEvent;
@ -316,6 +312,7 @@ public class MessageRequestProcessor extends SIPRequestAbstractProcessor {
record.setRecorderId(XmlUtil.getText(itemRecord,"RecorderID")); record.setRecorderId(XmlUtil.getText(itemRecord,"RecorderID"));
recordList.add(record); recordList.add(record);
} }
// recordList.sort(Comparator.naturalOrder());
recordInfo.setRecordList(recordList); recordInfo.setRecordList(recordList);
} }
@ -349,9 +346,13 @@ public class MessageRequestProcessor extends SIPRequestAbstractProcessor {
// 走到这里，有以下可能：1、没有录像信息,第一次收到recordinfo的消息即返回响应数据，无redis操作 // 走到这里，有以下可能：1、没有录像信息,第一次收到recordinfo的消息即返回响应数据，无redis操作
// 2、有录像数据，且第一次即收到完整数据，返回响应数据，无redis操作 // 2、有录像数据，且第一次即收到完整数据，返回响应数据，无redis操作
// 3、有录像数据，在超时时间内收到多次包组装后数量足够，返回数据 // 3、有录像数据，在超时时间内收到多次包组装后数量足够，返回数据
// 对记录进行排序
RequestMessage msg = new RequestMessage(); RequestMessage msg = new RequestMessage();
msg.setDeviceId(deviceId); msg.setDeviceId(deviceId);
msg.setType(DeferredResultHolder.CALLBACK_CMD_RECORDINFO); msg.setType(DeferredResultHolder.CALLBACK_CMD_RECORDINFO);
// 自然顺序排序, 元素进行升序排列
recordInfo.getRecordList().sort(Comparator.naturalOrder());
msg.setData(recordInfo); msg.setData(recordInfo);
deferredResultHolder.invokeResult(msg); deferredResultHolder.invokeResult(msg);
} catch (DocumentException e) { } catch (DocumentException e) {

28
src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
View File

@ -130,17 +130,27 @@ public class ZLMHttpHookListener {
String streamId = json.getString("id"); String streamId = json.getString("id");
// String ssrc = String.format("%10d", Integer.parseInt(streamId, 16)); // ZLM 要求大写且首位补零
String ssrc = new DecimalFormat("0000000000").format(Integer.parseInt(streamId, 16)); String ssrc = new DecimalFormat("0000000000").format(Integer.parseInt(streamId, 16));
StreamInfo streamInfo = storager.queryPlayBySSRC(ssrc); StreamInfo streamInfoForPlay = storager.queryPlayBySSRC(ssrc);
if ("rtp".equals(app) && streamInfo != null ) { if ("rtp".equals(app) && streamInfoForPlay != null ) {
MediaServerConfig mediaInfo = storager.getMediaInfo();
streamInfoForPlay.setFlv(String.format("http://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
streamInfoForPlay.setWs_flv(String.format("ws://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
streamInfoForPlay.setRtmp(String.format("rtmp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtmpPort(), streamId));
streamInfoForPlay.setHls(String.format("http://%s:%s/rtp/%s/hls.m3u8", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
streamInfoForPlay.setRtsp(String.format("rtsp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtspPort(), streamId));
storager.startPlay(streamInfoForPlay);
}
StreamInfo streamInfoForPlayBack = storager.queryPlayBlackBySSRC(ssrc);
if ("rtp".equals(app) && streamInfoForPlayBack != null ) {
MediaServerConfig mediaInfo = storager.getMediaInfo(); MediaServerConfig mediaInfo = storager.getMediaInfo();
streamInfo.setFlv(String.format("http://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId)); streamInfoForPlayBack.setFlv(String.format("http://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
streamInfo.setWs_flv(String.format("ws://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId)); streamInfoForPlayBack.setWs_flv(String.format("ws://%s:%s/rtp/%s.flv", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
streamInfo.setRtmp(String.format("rtmp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtmpPort(), streamId)); streamInfoForPlayBack.setRtmp(String.format("rtmp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtmpPort(), streamId));
streamInfo.setHls(String.format("http://%s:%s/rtp/%s/hls.m3u8", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId)); streamInfoForPlayBack.setHls(String.format("http://%s:%s/rtp/%s/hls.m3u8", mediaInfo.getLocalIP(), mediaInfo.getHttpPort(), streamId));
streamInfo.setRtsp(String.format("rtsp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtspPort(), streamId)); streamInfoForPlayBack.setRtsp(String.format("rtsp://%s:%s/rtp/%s", mediaInfo.getLocalIP(), mediaInfo.getRtspPort(), streamId));
storager.startPlay(streamInfo); storager.startPlayBlack(streamInfoForPlayBack);
} }
// TODO Auto-generated method stub // TODO Auto-generated method stub

5
src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMUtils.java
View File

@ -30,11 +30,6 @@ public class ZLMUtils {
param.put("stream_id", streamId); param.put("stream_id", streamId);
JSONObject jsonObject = zlmresTfulUtils.openRtpServer(param); JSONObject jsonObject = zlmresTfulUtils.openRtpServer(param);
if (jsonObject.getInteger("code") == 0) { if (jsonObject.getInteger("code") == 0) {
System.out.println(11111111);
System.out.println(streamId);
System.out.println(ssrc);
System.out.println(newPort);
System.out.println(jsonObject.toJSONString());
return newPort; return newPort;
} else { } else {
return getNewRTPPort(ssrc); return getNewRTPPort(ssrc);

8
src/main/java/com/genersoft/iot/vmp/storager/IVideoManagerStorager.java
View File

@ -183,4 +183,12 @@ public interface IVideoManagerStorager {
StreamInfo queryPlayByDevice(String deviceId, String code); StreamInfo queryPlayByDevice(String deviceId, String code);
Map<String, StreamInfo> queryPlayByDeviceId(String deviceId); Map<String, StreamInfo> queryPlayByDeviceId(String deviceId);
boolean startPlayBlack(StreamInfo streamInfo);
boolean stopPlayBlack(StreamInfo streamInfo);
StreamInfo queryPlayBlackByDevice(String deviceId, String channelId);
StreamInfo queryPlayBlackBySSRC(String ssrc);
} }

21
src/main/java/com/genersoft/iot/vmp/storager/jdbc/VideoManagerJdbcStoragerImpl.java
View File

@ -190,6 +190,27 @@ public class VideoManagerJdbcStoragerImpl implements IVideoManagerStorager {
@Override @Override
public Map<String, StreamInfo> queryPlayByDeviceId(String deviceId) { public Map<String, StreamInfo> queryPlayByDeviceId(String deviceId) {
return null;
}
@Override
public boolean startPlayBlack(StreamInfo streamInfo) {
return false;
}
@Override
public boolean stopPlayBlack(StreamInfo streamInfo) {
return false;
}
@Override
public StreamInfo queryPlayBlackByDevice(String deviceId, String channelId) {
return null;
}
@Override
public StreamInfo queryPlayBlackBySSRC(String ssrc) {
return null; return null;
} }
} }

46
src/main/java/com/genersoft/iot/vmp/storager/redis/VideoManagerRedisStoragerImpl.java
View File

@ -101,7 +101,7 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
// 如果有父设备,更新父设备内子节点数 // 如果有父设备,更新父设备内子节点数
String parentId = channel.getParentId(); String parentId = channel.getParentId();
if (!StringUtils.isEmpty(parentId)) { if (!StringUtils.isEmpty(parentId) && !parentId.equals(deviceId)) {
if (channelMap.get(parentId) == null) { if (channelMap.get(parentId) == null) {
channelMap.put(parentId, new HashSet<String>()); channelMap.put(parentId, new HashSet<String>());
@ -111,8 +111,6 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
DeviceChannel deviceChannel = queryChannel(deviceId, parentId); DeviceChannel deviceChannel = queryChannel(deviceId, parentId);
if (deviceChannel != null) { if (deviceChannel != null) {
deviceChannel.setSubCount(channelMap.get(parentId).size()); deviceChannel.setSubCount(channelMap.get(parentId).size());
// redis.set(VideoManagerConstants.CACHEKEY_PREFIX+deviceId + "_" + deviceChannel.getChannelId(),
// deviceChannel);
redis.set(VideoManagerConstants.CACHEKEY_PREFIX + deviceId + redis.set(VideoManagerConstants.CACHEKEY_PREFIX + deviceId +
"_" + deviceChannel.getChannelId() + "_" + deviceChannel.getChannelId() +
"_" + (deviceChannel.getStatus() == 1 ? "on":"off") + "_" + (deviceChannel.getStatus() == 1 ? "on":"off") +
@ -410,6 +408,14 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
return (StreamInfo)redis.get(playLeys.get(0).toString()); return (StreamInfo)redis.get(playLeys.get(0).toString());
} }
@Override
public StreamInfo queryPlayBlackBySSRC(String ssrc) {
// List<Object> playLeys = redis.keys(String.format("%S_%s_*", VideoManagerConstants.PLAYER_PREFIX, ssrc));
List<Object> playLeys = redis.scan(String.format("%S_%s_*", VideoManagerConstants.PLAY_BLACK_PREFIX, ssrc));
if (playLeys == null || playLeys.size() == 0) return null;
return (StreamInfo)redis.get(playLeys.get(0).toString());
}
@Override @Override
public StreamInfo queryPlayByDevice(String deviceId, String code) { public StreamInfo queryPlayByDevice(String deviceId, String code) {
// List<Object> playLeys = redis.keys(String.format("%S_*_%s_%s", VideoManagerConstants.PLAYER_PREFIX, // List<Object> playLeys = redis.keys(String.format("%S_*_%s_%s", VideoManagerConstants.PLAYER_PREFIX,
@ -448,7 +454,6 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
for (Device device : devices) { for (Device device : devices) {
// 更新设备下的通道 // 更新设备下的通道
HashMap<String, HashSet<String>> channelMap = new HashMap<String, HashSet<String>>(); HashMap<String, HashSet<String>> channelMap = new HashMap<String, HashSet<String>>();
// List<Object> deviceChannelList = redis.keys(VideoManagerConstants.CACHEKEY_PREFIX +
List<Object> deviceChannelList = redis.scan(VideoManagerConstants.CACHEKEY_PREFIX + List<Object> deviceChannelList = redis.scan(VideoManagerConstants.CACHEKEY_PREFIX +
device.getDeviceId() + "_" + "*"); device.getDeviceId() + "_" + "*");
if (deviceChannelList != null && deviceChannelList.size() > 0 ) { if (deviceChannelList != null && deviceChannelList.size() > 0 ) {
@ -469,6 +474,7 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
} }
deviceMap.put(device.getDeviceId(),channelMap); deviceMap.put(device.getDeviceId(),channelMap);
} }
System.out.println();
} }
@Override @Override
@ -498,5 +504,37 @@ public class VideoManagerRedisStoragerImpl implements IVideoManagerStorager {
} }
@Override
public boolean startPlayBlack(StreamInfo stream) {
return redis.set(String.format("%S_%s_%s_%s", VideoManagerConstants.PLAY_BLACK_PREFIX, stream.getSsrc(),stream.getDeviceID(), stream.getCahnnelId()),
stream);
}
@Override
public boolean stopPlayBlack(StreamInfo streamInfo) {
if (streamInfo == null) return false;
DeviceChannel deviceChannel = queryChannel(streamInfo.getDeviceID(), streamInfo.getCahnnelId());
if (deviceChannel != null) {
deviceChannel.setSsrc(null);
deviceChannel.setPlay(false);
updateChannel(streamInfo.getDeviceID(), deviceChannel);
}
return redis.del(String.format("%S_%s_%s_%s", VideoManagerConstants.PLAY_BLACK_PREFIX,
streamInfo.getSsrc(),
streamInfo.getDeviceID(),
streamInfo.getCahnnelId()));
}
@Override
public StreamInfo queryPlayBlackByDevice(String deviceId, String code) {
String format = String.format("%S_*_%s_%s", VideoManagerConstants.PLAY_BLACK_PREFIX,
deviceId,
code);
List<Object> playLeys = redis.scan(String.format("%S_*_%s_%s", VideoManagerConstants.PLAY_BLACK_PREFIX,
deviceId,
code));
if (playLeys == null || playLeys.size() == 0) return null;
return (StreamInfo)redis.get(playLeys.get(0).toString());
}
} }

2
src/main/java/com/genersoft/iot/vmp/vmanager/play/PlayController.java
View File

@ -71,7 +71,7 @@ public class PlayController {
}else { }else {
streamInfo = storager.queryPlayByDevice(deviceId, channelId); streamInfo = storager.queryPlayByDevice(deviceId, channelId);
JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId); JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo.getFlv() != null){ if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo != null && streamInfo.getFlv() != null){
logger.info("RTP已推流，查询编码信息："+streamInfo.getFlv()); logger.info("RTP已推流，查询编码信息："+streamInfo.getFlv());
Thread.sleep(2000); Thread.sleep(2000);
JSONObject mediaInfo = zlmresTfulUtils.getMediaInfo("rtp", "rtmp", streamId); JSONObject mediaInfo = zlmresTfulUtils.getMediaInfo("rtp", "rtmp", streamId);

68
src/main/java/com/genersoft/iot/vmp/vmanager/playback/PlaybackController.java
View File

@ -1,5 +1,9 @@
package com.genersoft.iot.vmp.vmanager.playback; package com.genersoft.iot.vmp.vmanager.playback;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.genersoft.iot.vmp.common.StreamInfo;
import com.genersoft.iot.vmp.media.zlm.ZLMRESTfulUtils;
import org.slf4j.Logger; import org.slf4j.Logger;
import org.slf4j.LoggerFactory; import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
@ -31,6 +35,9 @@ public class PlaybackController {
@Autowired @Autowired
private IVideoManagerStorager storager; private IVideoManagerStorager storager;
@Autowired
private ZLMRESTfulUtils zlmresTfulUtils;
@GetMapping("/playback/{deviceId}/{channelId}") @GetMapping("/playback/{deviceId}/{channelId}")
public ResponseEntity<String> play(@PathVariable String deviceId,@PathVariable String channelId, String startTime, String endTime){ public ResponseEntity<String> play(@PathVariable String deviceId,@PathVariable String channelId, String startTime, String endTime){
@ -45,23 +52,68 @@ public class PlaybackController {
} }
Device device = storager.queryVideoDevice(deviceId); Device device = storager.queryVideoDevice(deviceId);
String ssrc = cmder.playbackStreamCmd(device, channelId, startTime, endTime); StreamInfo streamInfo = storager.queryPlayBlackByDevice(deviceId, channelId);
if (logger.isDebugEnabled()) { if (streamInfo != null) {
logger.debug("设备回放 API调用，ssrc："+ssrc+",ZLMedia streamId:"+Integer.toHexString(Integer.parseInt(ssrc))); cmder.streamByeCmd(streamInfo.getSsrc());
} }
if(ssrc!=null) { // }else {
JSONObject json = new JSONObject(); // String streamId = String.format("%08x", Integer.parseInt(streamInfo.getSsrc())).toUpperCase();
json.put("ssrc", ssrc); // JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
return new ResponseEntity<String>(json.toString(),HttpStatus.OK); // if (rtpInfo.getBoolean("exist")) {
// return new ResponseEntity<String>(JSON.toJSONString(streamInfo),HttpStatus.OK);
// }else {
// storager.stopPlayBlack(streamInfo);
// streamInfo = cmder.playbackStreamCmd(device, channelId, startTime, endTime);
// }
// }
streamInfo = cmder.playbackStreamCmd(device, channelId, startTime, endTime);
String streamId = String.format("%08x", Integer.parseInt(streamInfo.getSsrc())).toUpperCase();
if (logger.isDebugEnabled()) {
logger.debug("设备回放 API调用，ssrc：" + streamInfo.getSsrc() + ",ZLMedia streamId:" + streamId);
}
// 等待推流, TODO 默认超时15s
boolean lockFlag = true;
long lockStartTime = System.currentTimeMillis();
while (lockFlag) {
try {
if (System.currentTimeMillis() - lockStartTime > 75 * 1000) {
storager.stopPlayBlack(streamInfo);
return new ResponseEntity<String>("timeout",HttpStatus.OK);
}else {
streamInfo = storager.queryPlayBlackByDevice(deviceId, channelId);
JSONObject rtpInfo = zlmresTfulUtils.getRtpInfo(streamId);
if (rtpInfo != null && rtpInfo.getBoolean("exist") && streamInfo.getFlv() != null){
JSONObject mediaInfo = zlmresTfulUtils.getMediaInfo("rtp", "rtmp", streamId);
if (mediaInfo.getInteger("code") == 0 && mediaInfo.getBoolean("online")) {
lockFlag = false;
JSONArray tracks = mediaInfo.getJSONArray("tracks");
streamInfo.setTracks(tracks);
storager.startPlayBlack(streamInfo);
}else {
}
}else {
Thread.sleep(2000);
continue;
};
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
if(streamInfo!=null) {
return new ResponseEntity<String>(JSON.toJSONString(streamInfo),HttpStatus.OK);
} else { } else {
logger.warn("设备回放API调用失败！"); logger.warn("设备回放API调用失败！");
return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR); return new ResponseEntity<String>(HttpStatus.INTERNAL_SERVER_ERROR);
} }
} }
@PostMapping("/playback/{ssrc}/stop") @RequestMapping("/playback/{ssrc}/stop")
public ResponseEntity<String> playStop(@PathVariable String ssrc){ public ResponseEntity<String> playStop(@PathVariable String ssrc){
cmder.streamByeCmd(ssrc); cmder.streamByeCmd(ssrc);

2
web_src/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>GB28181服务器</title> <title>国标28181</title>
</head> </head>
<body> <body>
<script type="text/javascript" src="./js/liveplayer-lib.min.js"></script> <script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>

5
web_src/package-lock.json
View File

@ -5843,6 +5843,11 @@
"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
}, },
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz?cache=0&sync_timestamp=1601983423917&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.29.1.tgz",
"integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

1
web_src/package.json
View File

@ -15,6 +15,7 @@
"core-js": "^2.6.5", "core-js": "^2.6.5",
"echarts": "^4.7.0", "echarts": "^4.7.0",
"element-ui": "2.10.1", "element-ui": "2.10.1",
"moment": "^2.29.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-clipboard2": "^0.3.1", "vue-clipboard2": "^0.3.1",
"vue-cookies": "^1.7.4", "vue-cookies": "^1.7.4",

98
web_src/src/components/Loading.vue
View File

@ -1,98 +0,0 @@
//loading效果组件
<template>
<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}">
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
</div>
</template>
<script>
export default {
name: 'Loading',
props: ["marginTop"]
}
</script>
<style scoped>
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
position: relative;
top:-50px;
margin-top:50%;
transform: scale(.5)
}
.loadEffect .ld-span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #67e7d5;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loadEffect .ld-span:nth-child(1){
left: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
}
.loadEffect .ld-span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect .ld-span:nth-child(3){
left: 50%;
top: 0;
margin-left: -10px;
-webkit-animation-delay:0.39s;
}
.loadEffect .ld-span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect .ld-span:nth-child(5){
right: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
}
.loadEffect .ld-span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect .ld-span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
}
.loadEffect .ld-span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
</style>

10
web_src/src/components/Login.vue
View File

@ -10,16 +10,14 @@
<div class="log-logo">Welcome!</div> <div class="log-logo">Welcome!</div>
<div class="log-text"></div> <div class="log-text"></div>
</div> </div>
<div class="log-email"> <div class="log-email" v-loading="isLoging" >
<input type="text" placeholder="用户名" :class="'log-input' + (username==''?' log-input-empty':'')" v-model="username"><input type="password" placeholder="密码" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password"> <input type="text" placeholder="用户名" :class="'log-input' + (username==''?' log-input-empty':'')" v-model="username"><input type="password" placeholder="密码" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password">
<a href="javascript:;" class="log-btn" @click="login" >登录</a> <a href="javascript:;" class="log-btn" @click="login" >登录</a>
</div> </div>
<Loading v-if="isLoging" marginTop="-30%"></Loading>
</div> </div>
</template> </template>
<script> <script>
import Loading from './Loading.vue'
import crypto from 'crypto' import crypto from 'crypto'
export default { export default {
name: 'Login', name: 'Login',
@ -30,9 +28,6 @@ export default {
password: '' password: ''
} }
}, },
components:{
Loading
},
created(){ created(){
var that = this; var that = this;
document.onkeydown = function(e) { document.onkeydown = function(e) {
@ -79,7 +74,8 @@ export default {
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); that.$message.error(error.response.statusText);
that.isLoging = false;
}); });

24
web_src/src/components/channelList.vue
View File

@ -26,7 +26,7 @@
</el-select> </el-select>
</div> </div>
<devicePlayer ref="devicePlayer"></devicePlayer> <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
<!--设备列表--> <!--设备列表-->
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%"> <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
<el-table-column prop="channelId" label="通道编号" width="210"> <el-table-column prop="channelId" label="通道编号" width="210">
@ -58,8 +58,8 @@
<el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button> <el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button>
<el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="scope.row.play" @click="stopDevicePush(scope.row)">停止</el-button> <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="scope.row.play" @click="stopDevicePush(scope.row)">停止</el-button>
<el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看</el-button> <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看</el-button>
<!-- <el-button size="mini" icon="el-icon-video-camera" type="primary" >设备录象</el-button>--> <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象</el-button>
<!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> --> <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
@ -69,20 +69,18 @@
</el-main> </el-main>
</el-container> </el-container>
<Loading v-if="isLoging" marginTop="-50%"></Loading>
</div> </div>
</template> </template>
<script> <script>
import devicePlayer from './gb28181/devicePlayer.vue' import devicePlayer from './gb28181/devicePlayer.vue'
import uiHeader from './UiHeader.vue' import uiHeader from './UiHeader.vue'
import Loading from './Loading.vue' import moment from "moment";
export default { export default {
name: 'channelList', name: 'channelList',
components: { components: {
devicePlayer, devicePlayer,
uiHeader, uiHeader
Loading
}, },
data() { data() {
return { return {
@ -209,13 +207,23 @@ export default {
let ssrc = res.data.ssrc; let ssrc = res.data.ssrc;
that.isLoging = false; that.isLoging = false;
if (!!ssrc) { if (!!ssrc) {
that.$refs.devicePlayer.play(res.data, deviceId, channelId, itemData.hasAudio); // that.$refs.devicePlayer.play(res.data, deviceId, channelId, itemData.hasAudio);
that.$refs.devicePlayer.openDialog("media", deviceId, channelId,{
streamInfo: res.data,
hasAudio: itemData.hasAudio
});
that.initData(); that.initData();
} else { } else {
that.$message.error(res.data); that.$message.error(res.data);
} }
}).catch(function (e) {}); }).catch(function (e) {});
}, },
queryRecords: function (itemData) {
var format = moment().format("YYYY-M-D");
let deviceId = this.deviceId;
let channelId = itemData.channelId;
this.$refs.devicePlayer.openDialog("record", deviceId, channelId, {date:format})
},
stopDevicePush: function (itemData) { stopDevicePush: function (itemData) {
console.log(itemData) console.log(itemData)
var that = this; var that = this;

720
web_src/src/components/gb28181/devicePlayer.vue
View File

@ -1,123 +1,196 @@
<template> <template>
<div id="devicePlayer"> <div id="devicePlayer">
<el-dialog title="视频播放" top="0" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()"> <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
<LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live ></LivePlayer>
<div id="shared" style="text-align: right; margin-top: 1rem;"> <div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName"> <el-tabs v-model="tabActiveName">
<el-tab-pane label="媒体流信息" name="media"> <el-tab-pane label="实时视频" name="media">
<div style="margin-bottom: 0.5rem;"> <div style="margin-bottom: 0.5rem;">
<el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button> <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
<el-button type="primary" size="small" @click="startRecord()">录制</el-button> <!-- <el-button type="primary" size="small" @click="startRecord()">录制</el-button>-->
<el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button> <!-- <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>-->
</div> </div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
<el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input> <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
</div> </div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
<el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input> <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
</div> </div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input> <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
</div> </div>
</el-tab-pane> </el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
<el-tab-pane label="录像查询" name="second"> <el-tab-pane label="录像查询" name="record">
<el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" @change="recordList()"></el-date-picker> <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期"
<el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" @change="recordList()"></el-date-picker> @change="queryRecords()"></el-date-picker>
<el-table :data="videoHistory.searchHistoryResult" style="width: 100%"> <!-- <el-slider style="margin: 0 1rem 1rem 1rem;"-->
<el-table-column label="名称" prop="name" width="150"></el-table-column> <!-- v-model="timeVal"-->
<el-table-column label="文件" prop="filePath" width="300"></el-table-column> <!-- :min="timeMin"-->
<el-table-column label="开始时间" prop="startTime" width="160"></el-table-column> <!-- :max="timeMax"-->
<el-table-column label="结束时间" prop="endTime" width="160"></el-table-column> <!-- :step="5"-->
<!-- :marks="getTimeMakrs()"-->
<!-- :format-tooltip="formatTooltip">-->
<!-- </el-slider>-->
<!-- <range-slider :min="timeMin"-->
<!-- :max="timeMax"-->
<!-- :step="5"></range-slider>-->
<el-table-column label="操作"> <!-- <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"-->
<template slot-scope="scope"> <!-- @change="recordList()"></el-date-picker>-->
<el-button type="primary" size="mini" @click="playRecord(false, scope.row)">播放</el-button> <el-table :data="videoHistory.searchHistoryResult" height="150" v-load="recordsLoading">
</template> <el-table-column label="名称" prop="name"></el-table-column>
</el-table-column> <el-table-column label="文件" prop="filePath"></el-table-column>
</el-table> <el-table-column label="开始时间" prop="startTime" :formatter="timeFormatter"></el-table-column>
</el-tab-pane> <el-table-column label="结束时间" prop="endTime" :formatter="timeFormatter"></el-table-column>
<!--遥控界面-->
<el-tab-pane label="云台控制" name="third">
<div style="display: flex; justify-content: center;">
<div class="control-wrapper">
<div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-top"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-left"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-bottom"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-right"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-round">
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
</div>
<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div> <el-table-column label="操作" >
<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)" @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div> <template slot-scope="scope">
</div> <el-button icon="el-icon-video-play" size="mini" @click="playRecord(scope.row)">播放</el-button>
</div> </template>
</el-table-column>
</el-table>
</el-tab-pane>
<!--遥控界面-->
<el-tab-pane label="云台控制" name="control">
<div style="display: flex; justify-content: center;">
<div class="control-wrapper">
<div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-top"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-left"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-bottom"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
<i class="el-icon-caret-right"></i>
<div class="control-inner-btn control-inner"></div>
</div>
<div class="control-round">
<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
</div>
<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
@mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
</div>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import LivePlayer from '@liveqing/liveplayer' import LivePlayer from '@liveqing/liveplayer'
export default { export default {
name: 'devicePlayer', name: 'devicePlayer',
props: {}, props: {},
components: { components: {
LivePlayer LivePlayer
}, },
computed: { computed: {
getPlayerShared: function () { getPlayerShared: function() {
return {
sharedUrl: window.location.host + '/' + this.videoUrl,
sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
sharedRtmp: this.videoUrl
};
}
},
created() {
// this.videoHistory.searchHistoryResult = falsificationData.recordData.recordList;
},
data() {
return { return {
video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', sharedUrl: window.location.host + '/' + this.videoUrl,
videoUrl: '', sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
videoHistory: { sharedRtmp: this.videoUrl
startTime: '', };
endTime: '', }
searchHistoryResult: [] //媒体流历史记录搜索结果 },
}, created() {
showVideoDialog: false, },
normalssrc: '', data() {
ssrc: '', return {
deviceId: '', video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
channelId: '', videoUrl: '',
tabActiveName: 'media', videoHistory: {
hasaudio: false date: '',
searchHistoryResult: [] //媒体流历史记录搜索结果
},
timeMakrs:{
// 0 : "0:00",
// // 60 : "1:00",
// 120 : "2:00",
// // 180 : "3:00",
// 240 : "4:00",
// // 300 : "5:00",
// 360 : "6:00",
// // 420 : "7:00",
// 480 : "8:00",
// 540 : "9:00",
600: "10:00",
// 660 : "11:00",
720 : "12:00",
// 780 : "13:00",
840 : "14:00",
// 900 : "15:00",
960 : "16:00",
// 1020 : "17:00",
1080 : "18:00",
// 1140 : "19:00",
// 1200 : "20:00",
// // 1260 : "21:00",
// 1320 : "22:00",
// // 1380 : "23:00",
// 1440 : "24:00"
},
showVideoDialog: false,
ssrc: '',
deviceId: '',
channelId: '',
tabActiveName: 'media',
hasaudio: false,
loadingRecords: false,
recordsLoading: false,
timeVal: 0,
timeMin: 0,
timeMax: 1440,
};
},
methods: {
openDialog: function (tab, deviceId, channelId, param) {
this.tabActiveName = tab;
this.channelId = channelId;
this.deviceId = deviceId;
this.ssrc = "";
this.videoUrl = ""
if (!!this.$refs.videoPlayer) {
this.$refs.videoPlayer.pause();
}
}; switch(tab) {
}, case "media":
methods: { this.play(param.streamInfo, param.hasAudio)
break;
case "record":
this.showVideoDialog = true;
play: function (streamInfo, deviceId, channelId, hasAudio) { this.videoHistory.date = param.date;
this.queryRecords()
break;
case "control":
break;
}
},
timeAxisSelTime:function (val) {
console.log(val)
},
getTimeMakrs(){
return this.timeMakrs;
},
play: function (streamInfo, hasAudio) {
this.hasaudio = hasAudio; this.hasaudio = hasAudio;
// 根据媒体流信息二次判断 // 根据媒体流信息二次判断
if (!!streamInfo.tracks && streamInfo.tracks.length > 0) { if (!!streamInfo.tracks && streamInfo.tracks.length > 0) {
@ -130,8 +203,6 @@ export default {
this.hasaudio = realHasAudio && this.hasaudio; this.hasaudio = realHasAudio && this.hasaudio;
} }
this.ssrc = streamInfo.ssrc; this.ssrc = streamInfo.ssrc;
this.deviceId = deviceId;
this.channelId = channelId;
// this.$refs.videoPlayer.hasaudio = hasAudio; // this.$refs.videoPlayer.hasaudio = hasAudio;
// this.videoUrl = streamInfo.flv + "?" + new Date().getTime(); // this.videoUrl = streamInfo.flv + "?" + new Date().getTime();
this.videoUrl = streamInfo.ws_flv; this.videoUrl = streamInfo.ws_flv;
@ -165,211 +236,276 @@ export default {
); );
}, },
recordList: function () { queryRecords: function() {
if (!this.videoHistory.startTime || !this.videoHistory.endTime) { if (!this.videoHistory.date) {
return; return;
} }
let that = this; this.recordsLoading = true;
this.$axios({ let that = this;
method: 'get', var startTime = this.videoHistory.date + " 00:00:00";
url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory var endTime = this.videoHistory.date + " 23:59:59";
.startTime + '&endTime=' + this.videoHistory.endTime this.$axios({
}).then(function (res) { method: 'get',
console.log(JSON.stringify(res)); url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
}).catch(function (e) { }).then(function(res) {
// that.videoHistory.searchHistoryResult = falsificationData.recordData; // 处理时间信息
}); that.videoHistory.searchHistoryResult = res.data.recordList;
that.recordsLoading = false;
}).catch(function(e) {
// that.videoHistory.searchHistoryResult = falsificationData.recordData;
});
}, },
playRecord: function (isBackLive, rowData) { onTimeChange: function (video) {
let that = this; // this.queryRecords()
if (isBackLive) { },
this.videoUrl = this.getVideoUrlBySsrc(this.normalssrc); playRecord: function(row) {
return; let that = this;
if (that.ssrc != "") {
that.stopPlayRecord(function (){
that.ssrc = "",
that.playRecord(row);
})
}else {
this.$axios({
method: 'get',
url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
row.endTime
}).then(function(res) {
var streamInfo = res.data;
that.ssrc = streamInfo.ssrc;
that.videoUrl = streamInfo.ws_flv;
});
}
},
stopPlayRecord: function (callback) {
this.$refs.videoPlayer.pause();
this.videoUrl = '';
this.$axios({
method: 'get',
url: '/api/playback/' + this.ssrc + '/stop'
}).then(function(res) {
if (callback) callback()
});
},
ptzCamera: function(leftRight, upDown, zoom) {
console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
let that = this;
this.$axios({
method: 'post',
url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
}).then(function(res) {});
},
//////////////////////播放器事件处理//////////////////////////
videoError:function(e){
console.log("播放器错误："+JSON.stringify(e));
},
formatTooltip:function(val) {
var h = parseInt(val/60);
var hStr = h< 10 ? ("0" + h):h;
var s = val%60;
var sStr = s< 10 ? ("0" + s):s;
return h + ":" + sStr;
},
timeFormatter: function (row, column, cellValue, index) {
return cellValue.split( " ")[1];
},
mergeTime: function (timeArray) {
var resultArray = [];
for (let i = 0; i < timeArray.length; i++) {
var startTime = new Date(timeArray[i].startTime);
var endTime = new Date(timeArray[i].endTime);
if (i ==0) {
resultArray[0] = {
startTime: startTime,
endTime: endTime
} }
this.$axios({ }
method: 'get', for (let j = 0; j < resultArray.length; j++) {
url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' + if (startTime > resultArray[j].endTime ) { // 合并
rowData.endTime if (startTime - resultArray[j].endTime <= 1000){
}).then(function (res) { resultArray[j].endTime = endTime;
let ssrc = res.data.ssrc; }else {
that.videoUrl = that.getVideoUrlBySsrc(ssrc); resultArray[resultArray.length] = {
//that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048'; startTime: startTime,
}); endTime: endTime
}
}, }
ptzCamera: function (leftRight, upDown, zoom) { }else if(resultArray[j].startTime > endTime ) { // 合并
console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom); if (resultArray[j].startTime - endTime <= 1000) {
let that = this; resultArray[j].startTime = startTime;
this.$axios({ }else {
method: 'post', resultArray[resultArray.length] = {
url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + startTime: startTime,
'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' endTime: endTime
}).then(function (res) {}); }
}, }
//////////////////////播放器事件处理////////////////////////// }
videoError: function (e) { }
console.log("播放器错误：" + JSON.stringify(e));
} }
} console.log(resultArray)
}; return resultArray;
}
}
};
</script> </script>
<style> <style>
.control-wrapper { .control-wrapper {
position: relative; position: relative;
width: 6.25rem; width: 6.25rem;
height: 6.25rem; height: 6.25rem;
max-width: 6.25rem; max-width: 6.25rem;
max-height: 6.25rem; max-height: 6.25rem;
margin: 0 auto; margin: 0 auto;
border-radius: 100%; border-radius: 100%;
float: left; float: left;
} }
.control-btn { .control-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
width: 44%; width: 44%;
height: 44%; height: 44%;
border-radius: 5px; border-radius: 5px;
border: 1px solid #78aee4; border: 1px solid #78aee4;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.3s linear; transition: all 0.3s linear;
} }
.control-btn i { .control-btn i {
font-size: 20px; font-size: 20px;
color: #78aee4; color: #78aee4;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.control-round { .control-round {
position: absolute; position: absolute;
top: 21%; top: 21%;
left: 21%; left: 21%;
width: 58%; width: 58%;
height: 58%; height: 58%;
background: #fff; background: #fff;
border-radius: 100%; border-radius: 100%;
} }
.control-round-inner { .control-round-inner {
position: absolute; position: absolute;
left: 15%; left: 15%;
top: 15%; top: 15%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 70%; width: 70%;
height: 70%; height: 70%;
font-size: 40px; font-size: 40px;
color: #78aee4; color: #78aee4;
border: 1px solid #78aee4; border: 1px solid #78aee4;
border-radius: 100%; border-radius: 100%;
transition: all 0.3s linear; transition: all 0.3s linear;
} }
.control-inner-btn { .control-inner-btn {
position: absolute; position: absolute;
width: 60%; width: 60%;
height: 60%; height: 60%;
background: #fafafa; background: #fafafa;
} }
.control-top { .control-top {
top: -8%; top: -8%;
left: 27%; left: 27%;
transform: rotate(-45deg); transform: rotate(-45deg);
border-radius: 5px 100% 5px 0; border-radius: 5px 100% 5px 0;
} }
.control-top i { .control-top i {
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 5px 100% 5px 0; border-radius: 5px 100% 5px 0;
} }
.control-top .control-inner { .control-top .control-inner {
left: -1px; left: -1px;
bottom: 0; bottom: 0;
border-top: 1px solid #78aee4; border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4; border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0; border-radius: 0 100% 0 0;
} }
.control-top .fa { .control-top .fa {
transform: rotate(45deg) translateY(-7px); transform: rotate(45deg) translateY(-7px);
} }
.control-left { .control-left {
top: 27%; top: 27%;
left: -8%; left: -8%;
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 5px 0 5px 100%; border-radius: 5px 0 5px 100%;
} }
.control-left i { .control-left i {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.control-left .control-inner { .control-left .control-inner {
right: -1px; right: -1px;
top: -1px; top: -1px;
border-bottom: 1px solid #78aee4; border-bottom: 1px solid #78aee4;
border-left: 1px solid #78aee4; border-left: 1px solid #78aee4;
border-radius: 0 0 0 100%; border-radius: 0 0 0 100%;
} }
.control-left .fa { .control-left .fa {
transform: rotate(-45deg) translateX(-7px); transform: rotate(-45deg) translateX(-7px);
} }
.control-right { .control-right {
top: 27%; top: 27%;
right: -8%; right: -8%;
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 5px 100% 5px 0; border-radius: 5px 100% 5px 0;
} }
.control-right i { .control-right i {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.control-right .control-inner { .control-right .control-inner {
left: -1px; left: -1px;
bottom: -1px; bottom: -1px;
border-top: 1px solid #78aee4; border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4; border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0; border-radius: 0 100% 0 0;
} }
.control-right .fa { .control-right .fa {
transform: rotate(-45deg) translateX(7px); transform: rotate(-45deg) translateX(7px);
} }
.control-bottom { .control-bottom {
left: 27%; left: 27%;
bottom: -8%; bottom: -8%;
transform: rotate(45deg); transform: rotate(45deg);
border-radius: 0 5px 100% 5px; border-radius: 0 5px 100% 5px;
} }
.control-bottom i { .control-bottom i {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.control-bottom .control-inner { .control-bottom .control-inner {
top: -1px; top: -1px;
left: -1px; left: -1px;
border-bottom: 1px solid #78aee4; border-bottom: 1px solid #78aee4;
border-right: 1px solid #78aee4; border-right: 1px solid #78aee4;
border-radius: 0 0 100% 0; border-radius: 0 0 100% 0;
} }
.control-bottom .fa { .control-bottom .fa {
transform: rotate(-45deg) translateY(7px); transform: rotate(-45deg) translateY(7px);
} }
</style> </style>

2
web_src/src/main.js
View File

@ -6,8 +6,8 @@ import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js'; import router from './router/index.js';
import axios from 'axios'; import axios from 'axios';
import VueCookies from 'vue-cookies'; import VueCookies from 'vue-cookies';
import echarts from 'echarts'; import echarts from 'echarts';
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard) Vue.use(VueClipboard)
Vue.use(ElementUI); Vue.use(ElementUI);

Write Preview
Loading…
Cancel
Save