zlm适配新的云端录像播放界面

This commit is contained in:
lin
2025-09-19 22:55:44 +08:00
parent af3a283b3d
commit ff0d54968d
12 changed files with 68 additions and 37 deletions

View File

@@ -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());
}

View File

@@ -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);

View File

@@ -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);

View File

@@ -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);

View File

@@ -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

View File

@@ -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(), "请求失败");

View File

@@ -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);

View File

@@ -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

View File

@@ -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

View File

@@ -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
}

View File

@@ -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)
})

View File

@@ -256,6 +256,9 @@ export default {
},
setPlaybackRate: function(speed) {
h265webPlayer[this._uid].setPlaybackRate(speed)
},
playNextFrame: function() {
h265webPlayer[this._uid].do()
}
}
}