@yimou6/common-ui 1.12.3 → 1.12.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/index.cdn.js +14 -14
- package/cdn/index.cdn.js.map +1 -1
- package/cdn/index.cdn.mjs +14 -14
- package/cdn/index.cdn.mjs.map +1 -1
- package/cdn/index.css +1 -1
- package/es/components/image-verification/index.mjs.map +1 -1
- package/es/components/index.d.ts +22 -21
- package/es/components/index.mjs +1 -0
- package/es/components/index.mjs.map +1 -1
- package/es/components/monitor-playback/index.d.ts +578 -0
- package/es/components/monitor-playback/index.mjs +8 -0
- package/es/components/monitor-playback/index.mjs.map +1 -0
- package/es/components/monitor-playback/src/monitor-playback.d.ts +30 -0
- package/es/components/monitor-playback/src/monitor-playback.mjs +44 -0
- package/es/components/monitor-playback/src/monitor-playback.mjs.map +1 -0
- package/es/components/monitor-playback/src/monitor-playback.vue.d.ts +578 -0
- package/es/components/monitor-playback/src/monitor-playback.vue.mjs +6 -0
- package/es/components/monitor-playback/src/monitor-playback.vue.mjs.map +1 -0
- package/es/components/monitor-playback/src/monitor-playback.vue2.mjs +271 -0
- package/es/components/monitor-playback/src/monitor-playback.vue2.mjs.map +1 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.d.ts +25 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.mjs +26 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.mjs.map +1 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.d.ts +104 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.mjs +6 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.mjs.map +1 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue2.mjs +507 -0
- package/es/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue2.mjs.map +1 -0
- package/es/components/page-header/src/page-header.d.ts +2 -2
- package/es/components/page-header/src/page-header.mjs.map +1 -1
- package/es/components/select/index.d.ts +1 -1
- package/es/components/select/src/select.vue.d.ts +1 -1
- package/es/components/select/src/select.vue2.mjs +8 -1
- package/es/components/select/src/select.vue2.mjs.map +1 -1
- package/es/components/tzj-player/src/easyPlayer.vue2.mjs +2 -10
- package/es/components/tzj-player/src/easyPlayer.vue2.mjs.map +1 -1
- package/es/index.mjs +1 -0
- package/es/index.mjs.map +1 -1
- package/es/installer.mjs +2 -0
- package/es/installer.mjs.map +1 -1
- package/global.d.ts +2 -0
- package/lib/components/image-verification/index.js.map +1 -1
- package/lib/components/index.d.ts +22 -21
- package/lib/components/index.js +23 -21
- package/lib/components/index.js.map +1 -1
- package/lib/components/monitor-playback/index.d.ts +578 -0
- package/lib/components/monitor-playback/index.js +13 -0
- package/lib/components/monitor-playback/index.js.map +1 -0
- package/lib/components/monitor-playback/src/monitor-playback.d.ts +30 -0
- package/lib/components/monitor-playback/src/monitor-playback.js +46 -0
- package/lib/components/monitor-playback/src/monitor-playback.js.map +1 -0
- package/lib/components/monitor-playback/src/monitor-playback.vue.d.ts +578 -0
- package/lib/components/monitor-playback/src/monitor-playback.vue.js +10 -0
- package/lib/components/monitor-playback/src/monitor-playback.vue.js.map +1 -0
- package/lib/components/monitor-playback/src/monitor-playback.vue2.js +275 -0
- package/lib/components/monitor-playback/src/monitor-playback.vue2.js.map +1 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.d.ts +25 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.js +28 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.js.map +1 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.d.ts +104 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.js +10 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue.js.map +1 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue2.js +511 -0
- package/lib/components/monitor-playback/timeline-ruler/src/timeline-ruler.vue2.js.map +1 -0
- package/lib/components/page-header/src/page-header.d.ts +2 -2
- package/lib/components/page-header/src/page-header.js.map +1 -1
- package/lib/components/select/index.d.ts +1 -1
- package/lib/components/select/src/select.vue.d.ts +1 -1
- package/lib/components/select/src/select.vue2.js +8 -1
- package/lib/components/select/src/select.vue2.js.map +1 -1
- package/lib/components/tzj-player/src/easyPlayer.vue2.js +2 -10
- package/lib/components/tzj-player/src/easyPlayer.vue2.js.map +1 -1
- package/lib/index.js +27 -25
- package/lib/index.js.map +1 -1
- package/lib/installer.js +6 -4
- package/lib/installer.js.map +1 -1
- package/package.json +1 -1
- package/theme-default/i-monitor-playback.css +1 -0
- package/theme-default/index.css +1 -1
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
import { defineComponent, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createElementVNode, withDirectives, vShow, toDisplayString, createVNode } from 'vue';
|
|
2
|
+
import '../timeline-ruler/src/timeline-ruler.vue.mjs';
|
|
3
|
+
import { MonitorPlaybackProps } from './monitor-playback.mjs';
|
|
4
|
+
import _sfc_main$1 from '../timeline-ruler/src/timeline-ruler.vue2.mjs';
|
|
5
|
+
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
7
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
8
|
+
const _hoisted_1 = { class: "replay-page" };
|
|
9
|
+
const _hoisted_2 = { class: "player-wrap" };
|
|
10
|
+
const _hoisted_3 = {
|
|
11
|
+
key: 0,
|
|
12
|
+
class: "player-error"
|
|
13
|
+
};
|
|
14
|
+
const _hoisted_4 = { class: "player-error__text" };
|
|
15
|
+
const MAX_RETRY = 3;
|
|
16
|
+
var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
17
|
+
...{
|
|
18
|
+
name: "IMonitorPlayback"
|
|
19
|
+
},
|
|
20
|
+
__name: "monitor-playback",
|
|
21
|
+
props: MonitorPlaybackProps,
|
|
22
|
+
setup(__props) {
|
|
23
|
+
const props = __props;
|
|
24
|
+
const playerContainerRef = ref(null);
|
|
25
|
+
const timelineRef = ref(null);
|
|
26
|
+
const kbpsInfo = ref("-- KB/s");
|
|
27
|
+
const overlayTimeText = ref("2026-05-02 15:02:17");
|
|
28
|
+
const errorMsg = ref("");
|
|
29
|
+
let jessibuca = null;
|
|
30
|
+
let isDestroying = false;
|
|
31
|
+
let retryCount = 0;
|
|
32
|
+
const currentUrl = ref(
|
|
33
|
+
props.url || "ws://cms.abaixun.com/websocket/0402b0580060f0df/0000000001.flv?starttime=20260502T150217&duration=3600&uuid=s1vwaoh0rse31rpgars33u1d68384buc"
|
|
34
|
+
);
|
|
35
|
+
let playStartTimeMs = 0;
|
|
36
|
+
let lastPtsMs = 0;
|
|
37
|
+
let playTimerId = null;
|
|
38
|
+
function pad(n) {
|
|
39
|
+
return String(n).padStart(2, "0");
|
|
40
|
+
}
|
|
41
|
+
__name(pad, "pad");
|
|
42
|
+
function syncStartTimeToUrl(unixSec) {
|
|
43
|
+
const d = new Date(unixSec * 1e3);
|
|
44
|
+
const val = `${pad(d.getFullYear()) + pad(d.getMonth() + 1) + pad(d.getDate())}T${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
|
|
45
|
+
currentUrl.value = currentUrl.value.replace(
|
|
46
|
+
/starttime=\d{8}T\d{6}/i,
|
|
47
|
+
`starttime=${val}`
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
__name(syncStartTimeToUrl, "syncStartTimeToUrl");
|
|
51
|
+
function commitWithTime(sec) {
|
|
52
|
+
syncStartTimeToUrl(sec);
|
|
53
|
+
playStream(currentUrl.value);
|
|
54
|
+
}
|
|
55
|
+
__name(commitWithTime, "commitWithTime");
|
|
56
|
+
function fmtTF(s) {
|
|
57
|
+
const d = new Date(s * 1e3);
|
|
58
|
+
return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
|
59
|
+
}
|
|
60
|
+
__name(fmtTF, "fmtTF");
|
|
61
|
+
function fmtD(s) {
|
|
62
|
+
const d = new Date(s * 1e3);
|
|
63
|
+
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
|
64
|
+
}
|
|
65
|
+
__name(fmtD, "fmtD");
|
|
66
|
+
function parseStartTime(url) {
|
|
67
|
+
const m = url.match(/starttime=(\d{8}T\d{6})/i);
|
|
68
|
+
if (m)
|
|
69
|
+
return new Date(
|
|
70
|
+
m[1].replace(
|
|
71
|
+
/^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/,
|
|
72
|
+
"$1-$2-$3T$4:$5:$6"
|
|
73
|
+
)
|
|
74
|
+
);
|
|
75
|
+
const dm = url.match(/duration=(\d+)/i);
|
|
76
|
+
if (dm) return parseInt(dm[1]);
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
__name(parseStartTime, "parseStartTime");
|
|
80
|
+
async function playStream(url) {
|
|
81
|
+
if (!url) return;
|
|
82
|
+
if (isDestroying) {
|
|
83
|
+
await new Promise((r) => setTimeout(r, 600));
|
|
84
|
+
return playStream(url);
|
|
85
|
+
}
|
|
86
|
+
await destroyPlayer();
|
|
87
|
+
errorMsg.value = "";
|
|
88
|
+
const st = parseStartTime(url);
|
|
89
|
+
let dur = 3600;
|
|
90
|
+
const dm = url.match(/duration=(\d+)/i);
|
|
91
|
+
if (dm) dur = parseInt(dm[1]);
|
|
92
|
+
if (st instanceof Date) {
|
|
93
|
+
playStartTimeMs = st.getTime();
|
|
94
|
+
}
|
|
95
|
+
if (st && timelineRef.value) {
|
|
96
|
+
timelineRef.value.initRuler(st, dur);
|
|
97
|
+
}
|
|
98
|
+
createJessibuca(url);
|
|
99
|
+
}
|
|
100
|
+
__name(playStream, "playStream");
|
|
101
|
+
function createJessibuca(url) {
|
|
102
|
+
const win = window;
|
|
103
|
+
if (!win.Jessibuca) {
|
|
104
|
+
errorMsg.value = "Jessibuca \u64AD\u653E\u5668\u672A\u52A0\u8F7D";
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
jessibuca = new win.Jessibuca({
|
|
108
|
+
container: playerContainerRef.value,
|
|
109
|
+
decoder: "./plugins/jessibuca/decoder.js",
|
|
110
|
+
videoBuffer: 0.2,
|
|
111
|
+
isResize: true,
|
|
112
|
+
isFullResize: true,
|
|
113
|
+
hasAudio: false,
|
|
114
|
+
debug: props.debug,
|
|
115
|
+
supportDblclickFullscreen: true,
|
|
116
|
+
showBandwidth: false,
|
|
117
|
+
operateBtns: {
|
|
118
|
+
fullscreen: true,
|
|
119
|
+
screenshot: true,
|
|
120
|
+
play: true,
|
|
121
|
+
audio: true,
|
|
122
|
+
record: true
|
|
123
|
+
},
|
|
124
|
+
// 优先使用 WASM 软解,支持 H.265
|
|
125
|
+
useMSE: false,
|
|
126
|
+
useWCS: false,
|
|
127
|
+
autoWasm: true,
|
|
128
|
+
isNotMute: true,
|
|
129
|
+
timeout: 10,
|
|
130
|
+
heartTimeout: 10,
|
|
131
|
+
loadingTimeout: 10,
|
|
132
|
+
heartTimeoutReplay: true,
|
|
133
|
+
heartTimeoutReplayTimes: MAX_RETRY,
|
|
134
|
+
loadingTimeoutReplay: true,
|
|
135
|
+
loadingTimeoutReplayTimes: MAX_RETRY
|
|
136
|
+
});
|
|
137
|
+
jessibuca.on("play", () => {
|
|
138
|
+
retryCount = 0;
|
|
139
|
+
});
|
|
140
|
+
jessibuca.on("timeUpdate", (ts) => {
|
|
141
|
+
lastPtsMs = ts;
|
|
142
|
+
});
|
|
143
|
+
jessibuca.on("kBps", (kbps) => {
|
|
144
|
+
kbpsInfo.value = `${Math.round(kbps)}KB/s`;
|
|
145
|
+
});
|
|
146
|
+
jessibuca.on("videoInfo", (info) => {
|
|
147
|
+
if (props.debug) {
|
|
148
|
+
console.log("[Jessibuca] videoInfo:", info);
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
jessibuca.on("error", (err) => {
|
|
152
|
+
console.error("[Jessibuca] error:", err);
|
|
153
|
+
const errCode = (err == null ? void 0 : err.code) || "";
|
|
154
|
+
const errMsg = String((err == null ? void 0 : err.message) || err || "");
|
|
155
|
+
if (errCode === "mediaSourceH265NotSupport" || errCode === "webcodecsH265NotSupport" || errMsg.includes("H265") || errMsg.includes("h265") || errMsg.includes("HEVC")) {
|
|
156
|
+
errorMsg.value = "\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 H.265/HEVC \u7F16\u7801\u64AD\u653E\uFF0C\u8BF7\u4F7F\u7528\u652F\u6301 HEVC \u786C\u89E3\u7684\u6D4F\u89C8\u5668";
|
|
157
|
+
destroyPlayer();
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
jessibuca.on("timeout", () => {
|
|
161
|
+
if (retryCount < MAX_RETRY) {
|
|
162
|
+
retryCount++;
|
|
163
|
+
console.warn(`[Jessibuca] \u8D85\u65F6\uFF0C\u7B2C ${retryCount}/${MAX_RETRY} \u6B21\u91CD\u8BD5...`);
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
jessibuca.on("streamEnd", () => {
|
|
167
|
+
if (props.debug) {
|
|
168
|
+
console.log("[Jessibuca] streamEnd: \u6D41\u7ED3\u675F");
|
|
169
|
+
}
|
|
170
|
+
});
|
|
171
|
+
jessibuca.play(url);
|
|
172
|
+
}
|
|
173
|
+
__name(createJessibuca, "createJessibuca");
|
|
174
|
+
async function destroyPlayer() {
|
|
175
|
+
if (!jessibuca) return;
|
|
176
|
+
isDestroying = true;
|
|
177
|
+
try {
|
|
178
|
+
await jessibuca.destroy();
|
|
179
|
+
} catch (_e) {
|
|
180
|
+
}
|
|
181
|
+
jessibuca = null;
|
|
182
|
+
const container = playerContainerRef.value;
|
|
183
|
+
if (container) {
|
|
184
|
+
container.innerHTML = "";
|
|
185
|
+
}
|
|
186
|
+
await new Promise((r) => setTimeout(r, 200));
|
|
187
|
+
isDestroying = false;
|
|
188
|
+
}
|
|
189
|
+
__name(destroyPlayer, "destroyPlayer");
|
|
190
|
+
function onTimelineSeek(sec) {
|
|
191
|
+
commitWithTime(sec);
|
|
192
|
+
}
|
|
193
|
+
__name(onTimelineSeek, "onTimelineSeek");
|
|
194
|
+
onMounted(() => {
|
|
195
|
+
const win = window;
|
|
196
|
+
if (!win.Jessibuca) {
|
|
197
|
+
errorMsg.value = "Jessibuca \u64AD\u653E\u5668\u672A\u52A0\u8F7D\uFF0C\u8BF7\u68C0\u67E5 HTML \u662F\u5426\u5F15\u5165\u4E86 jessibuca.js";
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
playStream(currentUrl.value);
|
|
201
|
+
startPlayTimer();
|
|
202
|
+
});
|
|
203
|
+
function startPlayTimer() {
|
|
204
|
+
playTimerId = setInterval(() => {
|
|
205
|
+
if (!jessibuca || !timelineRef.value) return;
|
|
206
|
+
if (playStartTimeMs > 0 && lastPtsMs >= 0) {
|
|
207
|
+
const timeMs = playStartTimeMs + lastPtsMs;
|
|
208
|
+
timelineRef.value.updateRulerTime(timeMs);
|
|
209
|
+
timelineRef.value.autoFollow();
|
|
210
|
+
overlayTimeText.value = `${fmtD(timeMs / 1e3)} ${fmtTF(timeMs / 1e3)}`;
|
|
211
|
+
}
|
|
212
|
+
}, 250);
|
|
213
|
+
}
|
|
214
|
+
__name(startPlayTimer, "startPlayTimer");
|
|
215
|
+
onBeforeUnmount(() => {
|
|
216
|
+
if (playTimerId) clearInterval(playTimerId);
|
|
217
|
+
destroyPlayer();
|
|
218
|
+
});
|
|
219
|
+
return (_ctx, _cache) => {
|
|
220
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
221
|
+
createCommentVNode(" \u64AD\u653E\u5668 "),
|
|
222
|
+
createElementVNode("div", _hoisted_2, [
|
|
223
|
+
withDirectives(createElementVNode(
|
|
224
|
+
"div",
|
|
225
|
+
{
|
|
226
|
+
ref_key: "playerContainerRef",
|
|
227
|
+
ref: playerContainerRef,
|
|
228
|
+
class: "jessibuca-container"
|
|
229
|
+
},
|
|
230
|
+
null,
|
|
231
|
+
512
|
|
232
|
+
/* NEED_PATCH */
|
|
233
|
+
), [
|
|
234
|
+
[vShow, !errorMsg.value]
|
|
235
|
+
]),
|
|
236
|
+
errorMsg.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
237
|
+
_cache[0] || (_cache[0] = createElementVNode(
|
|
238
|
+
"div",
|
|
239
|
+
{ class: "player-error__icon" },
|
|
240
|
+
"\u26A0",
|
|
241
|
+
-1
|
|
242
|
+
/* CACHED */
|
|
243
|
+
)),
|
|
244
|
+
createElementVNode(
|
|
245
|
+
"div",
|
|
246
|
+
_hoisted_4,
|
|
247
|
+
toDisplayString(errorMsg.value),
|
|
248
|
+
1
|
|
249
|
+
/* TEXT */
|
|
250
|
+
)
|
|
251
|
+
])) : createCommentVNode("v-if", true)
|
|
252
|
+
]),
|
|
253
|
+
createCommentVNode(" \u523B\u5EA6\u5C3A\u65F6\u95F4\u8F74 "),
|
|
254
|
+
createVNode(
|
|
255
|
+
_sfc_main$1,
|
|
256
|
+
{
|
|
257
|
+
ref_key: "timelineRef",
|
|
258
|
+
ref: timelineRef,
|
|
259
|
+
onSeek: onTimelineSeek
|
|
260
|
+
},
|
|
261
|
+
null,
|
|
262
|
+
512
|
|
263
|
+
/* NEED_PATCH */
|
|
264
|
+
)
|
|
265
|
+
]);
|
|
266
|
+
};
|
|
267
|
+
}
|
|
268
|
+
});
|
|
269
|
+
|
|
270
|
+
export { _sfc_main as default };
|
|
271
|
+
//# sourceMappingURL=monitor-playback.vue2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"monitor-playback.vue2.mjs","sources":["../../../../../../../packages/components/monitor-playback/src/monitor-playback.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport ITimelineRuler from \"../timeline-ruler/src/timeline-ruler.vue\";\nimport { MonitorPlaybackProps } from \"./monitor-playback\";\n\ndefineOptions({\n name: \"IMonitorPlayback\",\n});\n\n// ==================== Props / State ====================\nconst props = defineProps(MonitorPlaybackProps);\n\n// ==================== DOM Refs ====================\nconst playerContainerRef = ref<HTMLDivElement | null>(null);\nconst timelineRef = ref<InstanceType<typeof ITimelineRuler> | null>(null);\n\n// ==================== UI State ====================\nconst kbpsInfo = ref(\"-- KB/s\");\nconst overlayTimeText = ref(\"2026-05-02 15:02:17\");\nconst errorMsg = ref(\"\");\n\n// ==================== Player State ====================\nlet jessibuca: any = null;\nlet isDestroying = false;\nlet retryCount = 0;\nconst MAX_RETRY = 3;\nconst currentUrl = ref(\n props.url ||\n \"ws://cms.abaixun.com/websocket/0402b0580060f0df/0000000001.flv?starttime=20260502T150217&duration=3600&uuid=s1vwaoh0rse31rpgars33u1d68384buc\",\n);\n\n// 记录播放起始时间,用于结合 timeUpdate 计算当前播放进度\nlet playStartTimeMs = 0;\nlet lastPtsMs = 0;\n\n// Timer ref\nlet playTimerId: ReturnType<typeof setInterval> | null = null;\n\n// ==================== Utils ====================\nfunction pad(n: number) {\n return String(n).padStart(2, \"0\");\n}\n\nfunction syncStartTimeToUrl(unixSec: number) {\n const d = new Date(unixSec * 1000);\n const val = `${\n pad(d.getFullYear()) + pad(d.getMonth() + 1) + pad(d.getDate())\n }T${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;\n currentUrl.value = currentUrl.value.replace(\n /starttime=\\d{8}T\\d{6}/i,\n `starttime=${val}`,\n );\n}\n\nfunction commitWithTime(sec: number) {\n syncStartTimeToUrl(sec);\n playStream(currentUrl.value);\n}\n\nfunction fmtTF(s: number) {\n const d = new Date(s * 1000);\n return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;\n}\n\nfunction fmtD(s: number) {\n const d = new Date(s * 1000);\n return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;\n}\n\n// ==================== Player Functions ====================\nfunction parseStartTime(url: string): Date | number | null {\n const m = url.match(/starttime=(\\d{8}T\\d{6})/i);\n if (m)\n return new Date(\n m[1].replace(\n /^(\\d{4})(\\d{2})(\\d{2})T(\\d{2})(\\d{2})(\\d{2})/,\n \"$1-$2-$3T$4:$5:$6\",\n ),\n );\n const dm = url.match(/duration=(\\d+)/i);\n if (dm) return parseInt(dm[1]);\n return null;\n}\n\nasync function playStream(url: string) {\n if (!url) return;\n\n // 如果正在销毁,延迟等待后再执行\n if (isDestroying) {\n await new Promise<void>((r) => setTimeout(r, 600));\n return playStream(url);\n }\n\n await destroyPlayer();\n errorMsg.value = \"\";\n\n const st = parseStartTime(url);\n let dur = 3600;\n const dm = url.match(/duration=(\\d+)/i);\n if (dm) dur = parseInt(dm[1]);\n\n // 记录播放起始时间\n if (st instanceof Date) {\n playStartTimeMs = st.getTime();\n }\n\n if (st && timelineRef.value) {\n timelineRef.value.initRuler(st as Date, dur);\n }\n\n // 创建 Jessibuca 实例\n createJessibuca(url);\n}\n\nfunction createJessibuca(url: string) {\n const win = window as any;\n if (!win.Jessibuca) {\n errorMsg.value = \"Jessibuca 播放器未加载\";\n return;\n }\n\n jessibuca = new win.Jessibuca({\n container: playerContainerRef.value!,\n decoder: \"./plugins/jessibuca/decoder.js\",\n videoBuffer: 0.2,\n isResize: true,\n isFullResize: true,\n hasAudio: false,\n debug: props.debug,\n supportDblclickFullscreen: true,\n showBandwidth: false,\n operateBtns: {\n fullscreen: true,\n screenshot: true,\n play: true,\n audio: true,\n record: true,\n },\n // 优先使用 WASM 软解,支持 H.265\n useMSE: false,\n useWCS: false,\n autoWasm: true,\n isNotMute: true,\n timeout: 10,\n heartTimeout: 10,\n loadingTimeout: 10,\n heartTimeoutReplay: true,\n heartTimeoutReplayTimes: MAX_RETRY,\n loadingTimeoutReplay: true,\n loadingTimeoutReplayTimes: MAX_RETRY,\n });\n\n // ---- 事件监听 ----\n jessibuca.on(\"play\", () => {\n retryCount = 0;\n });\n\n jessibuca.on(\"timeUpdate\", (ts: number) => {\n // ts 是当前帧的 pts(毫秒)\n lastPtsMs = ts;\n });\n\n jessibuca.on(\"kBps\", (kbps: number) => {\n kbpsInfo.value = `${Math.round(kbps)}KB/s`;\n });\n\n jessibuca.on(\"videoInfo\", (info: any) => {\n if (props.debug) {\n console.log(\"[Jessibuca] videoInfo:\", info);\n }\n });\n\n jessibuca.on(\"error\", (err: any) => {\n console.error(\"[Jessibuca] error:\", err);\n const errCode = err?.code || \"\";\n const errMsg = String(err?.message || err || \"\");\n if (\n errCode === \"mediaSourceH265NotSupport\" ||\n errCode === \"webcodecsH265NotSupport\" ||\n errMsg.includes(\"H265\") ||\n errMsg.includes(\"h265\") ||\n errMsg.includes(\"HEVC\")\n ) {\n errorMsg.value =\n \"当前浏览器不支持 H.265/HEVC 编码播放,请使用支持 HEVC 硬解的浏览器\";\n destroyPlayer();\n }\n });\n\n jessibuca.on(\"timeout\", () => {\n if (retryCount < MAX_RETRY) {\n retryCount++;\n console.warn(`[Jessibuca] 超时,第 ${retryCount}/${MAX_RETRY} 次重试...`);\n // Jessibuca 内置重连,此处仅记录\n }\n });\n\n jessibuca.on(\"streamEnd\", () => {\n if (props.debug) {\n console.log(\"[Jessibuca] streamEnd: 流结束\");\n }\n });\n\n // 开始播放\n jessibuca.play(url);\n}\n\nasync function destroyPlayer() {\n if (!jessibuca) return;\n isDestroying = true;\n try {\n await jessibuca.destroy();\n } catch (_e) {}\n jessibuca = null;\n\n // destroy 完成后再清理容器内残留 DOM,避免 removeChild 冲突\n const container = playerContainerRef.value;\n if (container) {\n container.innerHTML = \"\";\n }\n\n // 等待 WebGL/Worker 资源释放\n await new Promise<void>((r) => setTimeout(r, 200));\n isDestroying = false;\n}\n\n/** 时间轴 seek 跳转 */\nfunction onTimelineSeek(sec: number) {\n commitWithTime(sec);\n}\n\n// ==================== Lifecycle ====================\nonMounted(() => {\n const win = window as any;\n if (!win.Jessibuca) {\n errorMsg.value =\n \"Jessibuca 播放器未加载,请检查 HTML 是否引入了 jessibuca.js\";\n return;\n }\n playStream(currentUrl.value);\n startPlayTimer();\n});\n\n/** 定时同步播放进度到时间轴 */\nfunction startPlayTimer() {\n playTimerId = setInterval(() => {\n if (!jessibuca || !timelineRef.value) return;\n\n // 使用 playStartTimeMs + lastPtsMs 计算当前播放时间\n // 对于回放流,pts 通常是从0开始的偏移量\n if (playStartTimeMs > 0 && lastPtsMs >= 0) {\n const timeMs = playStartTimeMs + lastPtsMs;\n timelineRef.value.updateRulerTime(timeMs);\n timelineRef.value.autoFollow();\n\n // 更新叠加时间\n overlayTimeText.value = `${fmtD(timeMs / 1000)} ${fmtTF(timeMs / 1000)}`;\n }\n }, 250);\n}\n\nonBeforeUnmount(() => {\n if (playTimerId) clearInterval(playTimerId);\n destroyPlayer();\n});\n</script>\n\n<template>\n <div class=\"replay-page\">\n <!-- 播放器 -->\n <div class=\"player-wrap\">\n <div\n v-show=\"!errorMsg\"\n ref=\"playerContainerRef\"\n class=\"jessibuca-container\"\n />\n <div v-if=\"errorMsg\" class=\"player-error\">\n <div class=\"player-error__icon\">⚠</div>\n <div class=\"player-error__text\">{{ errorMsg }}</div>\n </div>\n </div>\n\n <!-- 刻度尺时间轴 -->\n <ITimelineRuler ref=\"timelineRef\" @seek=\"onTimelineSeek\" />\n </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode","_createElementVNode","_toDisplayString","_createVNode","ITimelineRuler"],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { ExtractPropTypes } from "vue";
|
|
2
|
+
import type TimelineRuler from "./timeline-ruler.vue";
|
|
3
|
+
export declare const TimelineRulerProps: {
|
|
4
|
+
startTime: {
|
|
5
|
+
type: DateConstructor;
|
|
6
|
+
default: null;
|
|
7
|
+
};
|
|
8
|
+
duration: {
|
|
9
|
+
type: NumberConstructor;
|
|
10
|
+
default: number;
|
|
11
|
+
};
|
|
12
|
+
currentTimeMs: {
|
|
13
|
+
type: NumberConstructor;
|
|
14
|
+
default: null;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export type TimelineRulerPropsType = ExtractPropTypes<typeof TimelineRulerProps>;
|
|
18
|
+
export type TimelineRulerInstance = InstanceType<typeof TimelineRuler>;
|
|
19
|
+
export interface TickCfg {
|
|
20
|
+
iv: number;
|
|
21
|
+
h: number;
|
|
22
|
+
w: number;
|
|
23
|
+
c: string;
|
|
24
|
+
lbl?: boolean;
|
|
25
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const TimelineRulerProps = {
|
|
2
|
+
/**
|
|
3
|
+
* 起始时间(Date 对象)
|
|
4
|
+
*/
|
|
5
|
+
startTime: {
|
|
6
|
+
type: Date,
|
|
7
|
+
default: null
|
|
8
|
+
},
|
|
9
|
+
/**
|
|
10
|
+
* 持续时长(秒)
|
|
11
|
+
*/
|
|
12
|
+
duration: {
|
|
13
|
+
type: Number,
|
|
14
|
+
default: 3600
|
|
15
|
+
},
|
|
16
|
+
/**
|
|
17
|
+
* 当前播放位置(毫秒时间戳),由外部同步
|
|
18
|
+
*/
|
|
19
|
+
currentTimeMs: {
|
|
20
|
+
type: Number,
|
|
21
|
+
default: null
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { TimelineRulerProps };
|
|
26
|
+
//# sourceMappingURL=timeline-ruler.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timeline-ruler.mjs","sources":["../../../../../../../../packages/components/monitor-playback/timeline-ruler/src/timeline-ruler.ts"],"sourcesContent":["import type { ExtractPropTypes } from \"vue\";\n\nimport type TimelineRuler from \"./timeline-ruler.vue\";\n\nexport const TimelineRulerProps = {\n /**\n * 起始时间(Date 对象)\n */\n startTime: {\n type: Date,\n default: null,\n },\n /**\n * 持续时长(秒)\n */\n duration: {\n type: Number,\n default: 3600,\n },\n /**\n * 当前播放位置(毫秒时间戳),由外部同步\n */\n currentTimeMs: {\n type: Number,\n default: null,\n },\n};\n\nexport type TimelineRulerPropsType = ExtractPropTypes<\n typeof TimelineRulerProps\n>;\nexport type TimelineRulerInstance = InstanceType<typeof TimelineRuler>;\n\n/** 刻度配置项 */\nexport interface TickCfg {\n iv: number;\n h: number;\n w: number;\n c: string;\n lbl?: boolean;\n}\n"],"names":[],"mappings":"AAIO,MAAM,kBAAqB,GAAA;AAAA;AAAA;AAAA;AAAA,EAIhC,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,IAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,aAAe,EAAA;AAAA,IACb,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA;AAEb;;;;"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import type { TickCfg } from "./timeline-ruler";
|
|
2
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
startTime: {
|
|
4
|
+
type: DateConstructor;
|
|
5
|
+
default: null;
|
|
6
|
+
};
|
|
7
|
+
duration: {
|
|
8
|
+
type: NumberConstructor;
|
|
9
|
+
default: number;
|
|
10
|
+
};
|
|
11
|
+
currentTimeMs: {
|
|
12
|
+
type: NumberConstructor;
|
|
13
|
+
default: null;
|
|
14
|
+
};
|
|
15
|
+
}>, {
|
|
16
|
+
props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
|
|
17
|
+
startTime: {
|
|
18
|
+
type: DateConstructor;
|
|
19
|
+
default: null;
|
|
20
|
+
};
|
|
21
|
+
duration: {
|
|
22
|
+
type: NumberConstructor;
|
|
23
|
+
default: number;
|
|
24
|
+
};
|
|
25
|
+
currentTimeMs: {
|
|
26
|
+
type: NumberConstructor;
|
|
27
|
+
default: null;
|
|
28
|
+
};
|
|
29
|
+
}>> & Readonly<{
|
|
30
|
+
onSeek?: ((...args: any[]) => any) | undefined;
|
|
31
|
+
}> & {}>;
|
|
32
|
+
emit: (event: "seek", ...args: any[]) => void;
|
|
33
|
+
canvasRef: import("vue").Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
|
|
34
|
+
rulerAreaRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
|
|
35
|
+
recTrackRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
|
|
36
|
+
timeBigHtml: import("vue").Ref<string, string>;
|
|
37
|
+
timeDateText: import("vue").Ref<string, string>;
|
|
38
|
+
tipShow: import("vue").Ref<boolean, boolean>;
|
|
39
|
+
tipText: import("vue").Ref<string, string>;
|
|
40
|
+
tipElProxy: Element | null;
|
|
41
|
+
tipStyle: import("vue").Ref<Record<string, string>, Record<string, string>>;
|
|
42
|
+
zoomTagText: import("vue").Ref<string, string>;
|
|
43
|
+
RH: number;
|
|
44
|
+
BASE_Y: number;
|
|
45
|
+
FRIC: number;
|
|
46
|
+
BASE_TIME: number | null;
|
|
47
|
+
pph: number;
|
|
48
|
+
tPph: number;
|
|
49
|
+
offX: number;
|
|
50
|
+
dragging: boolean;
|
|
51
|
+
dragSX: number;
|
|
52
|
+
dragSO: number;
|
|
53
|
+
vel: number;
|
|
54
|
+
lpX: number;
|
|
55
|
+
lpT: number;
|
|
56
|
+
mX: number;
|
|
57
|
+
mIn: boolean;
|
|
58
|
+
_startTime: Date | null;
|
|
59
|
+
_durationSec: number;
|
|
60
|
+
_currentPlayMs: number | null;
|
|
61
|
+
cvs: HTMLCanvasElement | null;
|
|
62
|
+
cx: CanvasRenderingContext2D | null;
|
|
63
|
+
dpr: number;
|
|
64
|
+
rafId: number | null;
|
|
65
|
+
pad: (n: number) => string;
|
|
66
|
+
fmtT: (s: number) => string;
|
|
67
|
+
fmtTF: (s: number) => string;
|
|
68
|
+
fmtD: (s: number) => string;
|
|
69
|
+
dateToSec: (dt: Date) => number;
|
|
70
|
+
t2x: (t: number) => number;
|
|
71
|
+
x2t: (x: number) => number;
|
|
72
|
+
resize: () => void;
|
|
73
|
+
tCfg: () => Record<string, TickCfg>;
|
|
74
|
+
draw: () => void;
|
|
75
|
+
renderRecSegs: (w?: number) => void;
|
|
76
|
+
loop: () => void;
|
|
77
|
+
gx: (e: MouseEvent | TouchEvent) => number;
|
|
78
|
+
onDown: (e: MouseEvent | TouchEvent) => void;
|
|
79
|
+
onMove: (e: MouseEvent | TouchEvent) => void;
|
|
80
|
+
onUp: () => void;
|
|
81
|
+
initRuler: (startTimeDate: Date, durationSeconds?: number) => void;
|
|
82
|
+
updateRulerTime: (timeMs: number) => void;
|
|
83
|
+
autoFollow: () => void;
|
|
84
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "seek"[], "seek", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
85
|
+
startTime: {
|
|
86
|
+
type: DateConstructor;
|
|
87
|
+
default: null;
|
|
88
|
+
};
|
|
89
|
+
duration: {
|
|
90
|
+
type: NumberConstructor;
|
|
91
|
+
default: number;
|
|
92
|
+
};
|
|
93
|
+
currentTimeMs: {
|
|
94
|
+
type: NumberConstructor;
|
|
95
|
+
default: null;
|
|
96
|
+
};
|
|
97
|
+
}>> & Readonly<{
|
|
98
|
+
onSeek?: ((...args: any[]) => any) | undefined;
|
|
99
|
+
}>, {
|
|
100
|
+
duration: number;
|
|
101
|
+
startTime: Date;
|
|
102
|
+
currentTimeMs: number;
|
|
103
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
104
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timeline-ruler.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|