zlm适配新的云端录像播放界面
This commit is contained in:
@@ -488,16 +488,16 @@ public class ABLMediaNodeServerService implements IMediaNodeServerService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void seekRecordStamp(MediaServer mediaServer, String app, String stream, String key, Double stamp, String schema) {
|
||||
ABLResult ablResult = ablresTfulUtils.controlRecordPlay(mediaServer, key, "seek", "120");
|
||||
public void seekRecordStamp(MediaServer mediaServer, String app, String stream, Double stamp, String schema) {
|
||||
ABLResult ablResult = ablresTfulUtils.controlRecordPlay(mediaServer, app, stream, "seek", "120");
|
||||
if (ablResult.getCode() != 0) {
|
||||
log.warn("[abl-seek] 失败:{}", ablResult.getMemo());
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setRecordSpeed(MediaServer mediaServer, String app, String stream, String key, Integer speed, String schema) {
|
||||
ABLResult ablResult = ablresTfulUtils.controlRecordPlay(mediaServer, key, "scale", speed + "");
|
||||
public void setRecordSpeed(MediaServer mediaServer, String app, String stream, Integer speed, String schema) {
|
||||
ABLResult ablResult = ablresTfulUtils.controlRecordPlay(mediaServer, app, stream, "scale", speed + "");
|
||||
if (ablResult.getCode() != 0) {
|
||||
log.warn("[abl-倍速] 失败:{}", ablResult.getMemo());
|
||||
}
|
||||
|
||||
@@ -522,9 +522,10 @@ public class ABLRESTfulUtils {
|
||||
}
|
||||
}
|
||||
|
||||
public ABLResult controlRecordPlay(MediaServer mediaServer, String key, String command, String value) {
|
||||
public ABLResult controlRecordPlay(MediaServer mediaServer, String app, String stream, String command, String value) {
|
||||
Map<String, Object> param = new HashMap<>();
|
||||
param.put("key", key);
|
||||
param.put("app", app);
|
||||
param.put("stream", stream);
|
||||
param.put("command", command);
|
||||
param.put("value", Long.valueOf(value));
|
||||
String response = sendGet(mediaServer, "controlRecordPlay", param);
|
||||
|
||||
@@ -79,9 +79,9 @@ public interface IMediaNodeServerService {
|
||||
|
||||
void loadMP4FileForDate(MediaServer mediaServer, String app, String stream, String datePath, String dateDir, ErrorCallback<StreamInfo> callback);
|
||||
|
||||
void seekRecordStamp(MediaServer mediaServer, String app, String stream, String key, Double stamp, String schema);
|
||||
void seekRecordStamp(MediaServer mediaServer, String app, String stream, Double stamp, String schema);
|
||||
|
||||
void setRecordSpeed(MediaServer mediaServer, String app, String stream, String key, Integer speed, String schema);
|
||||
void setRecordSpeed(MediaServer mediaServer, String app, String stream, Integer speed, String schema);
|
||||
|
||||
DownloadFileInfo getDownloadFilePath(MediaServer mediaServer, RecordInfo recordInfo);
|
||||
|
||||
|
||||
@@ -166,9 +166,9 @@ public interface IMediaServerService {
|
||||
|
||||
void loadMP4FileForDate(MediaServer mediaServer, String app, String stream, String datePath, String dateDir, ErrorCallback<StreamInfo> callback);
|
||||
|
||||
void seekRecordStamp(MediaServer mediaServer, String app, String stream, String key, Double stamp, String schema);
|
||||
void seekRecordStamp(MediaServer mediaServer, String app, String stream, Double stamp, String schema);
|
||||
|
||||
void setRecordSpeed(MediaServer mediaServer, String app, String stream, String key, Integer speed, String schema);
|
||||
void setRecordSpeed(MediaServer mediaServer, String app, String stream, Integer speed, String schema);
|
||||
|
||||
DownloadFileInfo getDownloadFilePath(MediaServer mediaServer, RecordInfo recordInfo);
|
||||
|
||||
|
||||
@@ -973,23 +973,23 @@ public class MediaServerServiceImpl implements IMediaServerService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void seekRecordStamp(MediaServer mediaServer, String app, String stream, String key, Double stamp, String schema) {
|
||||
public void seekRecordStamp(MediaServer mediaServer, String app, String stream, Double stamp, String schema) {
|
||||
IMediaNodeServerService mediaNodeServerService = nodeServerServiceMap.get(mediaServer.getType());
|
||||
if (mediaNodeServerService == null) {
|
||||
log.info("[seekRecordStamp] 失败, mediaServer的类型: {},未找到对应的实现类", mediaServer.getType());
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "未找到mediaServer对应的实现类");
|
||||
}
|
||||
mediaNodeServerService.seekRecordStamp(mediaServer, app, stream, key, stamp, schema);
|
||||
mediaNodeServerService.seekRecordStamp(mediaServer, app, stream, stamp, schema);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setRecordSpeed(MediaServer mediaServer, String app, String stream, String key, Integer speed, String schema) {
|
||||
public void setRecordSpeed(MediaServer mediaServer, String app, String stream, Integer speed, String schema) {
|
||||
IMediaNodeServerService mediaNodeServerService = nodeServerServiceMap.get(mediaServer.getType());
|
||||
if (mediaNodeServerService == null) {
|
||||
log.info("[setRecordSpeed] 失败, mediaServer的类型: {},未找到对应的实现类", mediaServer.getType());
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "未找到mediaServer对应的实现类");
|
||||
}
|
||||
mediaNodeServerService.setRecordSpeed(mediaServer, app, stream, key, speed, schema);
|
||||
mediaNodeServerService.setRecordSpeed(mediaServer, app, stream, speed, schema);
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@@ -567,7 +567,7 @@ public class ZLMMediaNodeServerService implements IMediaNodeServerService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void seekRecordStamp(MediaServer mediaServer, String app, String stream, String key, Double stamp, String schema) {
|
||||
public void seekRecordStamp(MediaServer mediaServer, String app, String stream, Double stamp, String schema) {
|
||||
ZLMResult<?> zlmResult = zlmresTfulUtils.seekRecordStamp(mediaServer, app, stream, stamp, schema);
|
||||
if (zlmResult == null) {
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "请求失败");
|
||||
@@ -578,7 +578,7 @@ public class ZLMMediaNodeServerService implements IMediaNodeServerService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setRecordSpeed(MediaServer mediaServer, String app, String stream, String key, Integer speed, String schema) {
|
||||
public void setRecordSpeed(MediaServer mediaServer, String app, String stream, Integer speed, String schema) {
|
||||
ZLMResult<?> zlmResult = zlmresTfulUtils.setRecordSpeed(mediaServer, app, stream, speed, schema);
|
||||
if (zlmResult == null) {
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "请求失败");
|
||||
|
||||
@@ -61,9 +61,9 @@ public interface ICloudRecordService {
|
||||
*/
|
||||
void loadMP4FileForDate(String app, String stream, String date, ErrorCallback<StreamInfo> callback);
|
||||
|
||||
void seekRecord(String mediaServerId,String app, String stream, String key, Double seek, String schema);
|
||||
void seekRecord(String mediaServerId,String app, String stream, Double seek, String schema);
|
||||
|
||||
void setRecordSpeed(String mediaServerId, String app, String stream, String key, Integer speed, String schema);
|
||||
void setRecordSpeed(String mediaServerId, String app, String stream, Integer speed, String schema);
|
||||
|
||||
void deleteFileByIds(Set<Integer> ids);
|
||||
|
||||
|
||||
@@ -333,21 +333,21 @@ public class CloudRecordServiceImpl implements ICloudRecordService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void seekRecord(String mediaServerId,String app, String stream, String key, Double seek, String schema) {
|
||||
public void seekRecord(String mediaServerId,String app, String stream, Double seek, String schema) {
|
||||
MediaServer mediaServer = mediaServerService.getOne(mediaServerId);
|
||||
if (mediaServer == null) {
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "媒体节点不存在: " + mediaServerId);
|
||||
}
|
||||
mediaServerService.seekRecordStamp(mediaServer, app, stream, key, seek, schema);
|
||||
mediaServerService.seekRecordStamp(mediaServer, app, stream, seek, schema);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setRecordSpeed(String mediaServerId, String app, String stream, String key, Integer speed, String schema) {
|
||||
public void setRecordSpeed(String mediaServerId, String app, String stream, Integer speed, String schema) {
|
||||
MediaServer mediaServer = mediaServerService.getOne(mediaServerId);
|
||||
if (mediaServer == null) {
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "媒体节点不存在: " + mediaServerId);
|
||||
}
|
||||
mediaServerService.setRecordSpeed(mediaServer, app, stream, key, speed, schema);
|
||||
mediaServerService.setRecordSpeed(mediaServer, app, stream, speed, schema);
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@@ -314,20 +314,18 @@ public class CloudRecordController {
|
||||
@Parameter(name = "mediaServerId", description = "使用的节点Id", required = true)
|
||||
@Parameter(name = "app", description = "应用名", required = true)
|
||||
@Parameter(name = "stream", description = "流ID", required = true)
|
||||
@Parameter(name = "key", description = "流绑定的key", required = true)
|
||||
@Parameter(name = "seek", description = "要定位的时间位置,从录像开始的时间算起", required = true)
|
||||
public void seekRecord(
|
||||
@RequestParam(required = true) String mediaServerId,
|
||||
@RequestParam(required = true) String app,
|
||||
@RequestParam(required = true) String stream,
|
||||
@RequestParam(required = true) String key,
|
||||
@RequestParam(required = true) Double seek,
|
||||
@RequestParam(required = false) String schema
|
||||
) {
|
||||
if (schema == null) {
|
||||
schema = "ts";
|
||||
}
|
||||
cloudRecordService.seekRecord(mediaServerId, app, stream, key, seek, schema);
|
||||
cloudRecordService.seekRecord(mediaServerId, app, stream, seek, schema);
|
||||
}
|
||||
|
||||
@ResponseBody
|
||||
@@ -336,13 +334,11 @@ public class CloudRecordController {
|
||||
@Parameter(name = "mediaServerId", description = "使用的节点Id", required = true)
|
||||
@Parameter(name = "app", description = "应用名", required = true)
|
||||
@Parameter(name = "stream", description = "流ID", required = true)
|
||||
@Parameter(name = "key", description = "流绑定的key", required = true)
|
||||
@Parameter(name = "speed", description = "要设置的录像倍速", required = true)
|
||||
public void setRecordSpeed(
|
||||
@RequestParam(required = true) String mediaServerId,
|
||||
@RequestParam(required = true) String app,
|
||||
@RequestParam(required = true) String stream,
|
||||
@RequestParam(required = true) String key,
|
||||
@RequestParam(required = true) Integer speed,
|
||||
@RequestParam(required = false) String schema
|
||||
) {
|
||||
@@ -350,7 +346,7 @@ public class CloudRecordController {
|
||||
schema = "ts";
|
||||
}
|
||||
|
||||
cloudRecordService.setRecordSpeed(mediaServerId, app, stream, key, speed, schema);
|
||||
cloudRecordService.setRecordSpeed(mediaServerId, app, stream, speed, schema);
|
||||
}
|
||||
|
||||
@ResponseBody
|
||||
|
||||
@@ -41,7 +41,7 @@ export function loadRecord(params) {
|
||||
}
|
||||
|
||||
export function seek(params) {
|
||||
const { mediaServerId, app, stream, key, seek, schema } = params
|
||||
const { mediaServerId, app, stream, seek, schema } = params
|
||||
return request({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/seek`,
|
||||
@@ -49,7 +49,6 @@ export function seek(params) {
|
||||
mediaServerId: mediaServerId,
|
||||
app: app,
|
||||
stream: stream,
|
||||
key: key,
|
||||
seek: seek,
|
||||
schema: schema
|
||||
}
|
||||
@@ -57,7 +56,7 @@ export function seek(params) {
|
||||
}
|
||||
|
||||
export function speed(params) {
|
||||
const { mediaServerId, app, stream, key, speed, schema } = params
|
||||
const { mediaServerId, app, stream, speed, schema } = params
|
||||
return request({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/speed`,
|
||||
@@ -65,7 +64,6 @@ export function speed(params) {
|
||||
mediaServerId: mediaServerId,
|
||||
app: app,
|
||||
stream: stream,
|
||||
key: key,
|
||||
speed: speed,
|
||||
schema: schema
|
||||
}
|
||||
|
||||
@@ -57,10 +57,12 @@
|
||||
<div class="cloud-record-show-time">
|
||||
{{showPlayTimeValue}}
|
||||
</div>
|
||||
<div class="cloud-record-time-process">
|
||||
<div class="cloud-record-time-process" @click="timeProcessClick($event)"
|
||||
@mouseenter="timeProcessMouseEnter($event)" @mousemove="timeProcessMouseMove($event)"
|
||||
@mouseleave="timeProcessMouseLeave($event)">
|
||||
<div v-if="streamInfo">
|
||||
<div class="cloud-record-time-process-value" :style="playTimeValue"></div>
|
||||
<div class="cloud-record-time-process-pointer" :style="playTimeTotal"></div>
|
||||
<div class="cloud-record-time-process-pointer" :style="playTimeTotal" @mousedown="timeProcessMousedown($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cloud-record-show-time">
|
||||
@@ -132,6 +134,8 @@ export default {
|
||||
detailFiles: [],
|
||||
videoUrl: null,
|
||||
streamInfo: null,
|
||||
showTimeLeft: null,
|
||||
isMousedown: false,
|
||||
loading: false,
|
||||
chooseDate: null,
|
||||
playTime: null,
|
||||
@@ -194,6 +198,10 @@ export default {
|
||||
return { left: `calc(${this.playerTime/this.streamInfo.duration * 100}% - 6px)` }
|
||||
}
|
||||
},
|
||||
created() {
|
||||
document.addEventListener('mousemove', this.timeProcessMousemove)
|
||||
document.addEventListener('mouseup', this.timeProcessMouseup)
|
||||
},
|
||||
mounted() {
|
||||
// 查询当年有视频的日期
|
||||
this.getDateInYear(() => {
|
||||
@@ -207,6 +215,29 @@ export default {
|
||||
this.$destroy('recordVideoPlayer')
|
||||
},
|
||||
methods: {
|
||||
timeProcessMouseup(event) {
|
||||
|
||||
},
|
||||
timeProcessMousemove(event) {
|
||||
|
||||
},
|
||||
timeProcessClick(event) {
|
||||
let x = event.offsetX
|
||||
let clientWidth = event.target.clientWidth
|
||||
this.seekRecord(x / clientWidth * this.streamInfo.duration)
|
||||
},
|
||||
timeProcessMousedown(event) {
|
||||
this.isMousedown = true
|
||||
},
|
||||
timeProcessMouseEnter(event) {
|
||||
this.showTimeLeft = event.offsetX
|
||||
},
|
||||
timeProcessMouseMove(event) {
|
||||
this.showTimeLeft = event.offsetX
|
||||
},
|
||||
timeProcessMouseLeave(event) {
|
||||
this.showTimeLeft = null
|
||||
},
|
||||
sidebarControl() {
|
||||
this.showSidebar = !this.showSidebar
|
||||
},
|
||||
@@ -374,15 +405,17 @@ export default {
|
||||
})
|
||||
|
||||
},
|
||||
seekRecord() {
|
||||
seekRecord(playSeekValue) {
|
||||
this.$store.dispatch('cloudRecord/seek', {
|
||||
mediaServerId: this.streamInfo.mediaServerId,
|
||||
app: this.streamInfo.app,
|
||||
stream: this.streamInfo.stream,
|
||||
key: this.streamInfo.key,
|
||||
seek: this.playSeekValue,
|
||||
seek: playSeekValue,
|
||||
schema: 'fmp4'
|
||||
})
|
||||
.then((data) => {
|
||||
this.playerTime = playSeekValue
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
@@ -256,6 +256,9 @@ export default {
|
||||
},
|
||||
setPlaybackRate: function(speed) {
|
||||
h265webPlayer[this._uid].setPlaybackRate(speed)
|
||||
},
|
||||
playNextFrame: function() {
|
||||
h265webPlayer[this._uid].do()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user