mpegts-vue3 0.3.0 → 0.4.1
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/README.md +252 -0
- package/dist/index.cjs +300 -58
- package/dist/index.d.cts +46 -6
- package/dist/index.d.ts +46 -6
- package/dist/index.js +298 -63
- package/package.json +8 -4
package/dist/index.cjs
CHANGED
|
@@ -23,20 +23,31 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
23
23
|
//#endregion
|
|
24
24
|
let vue = require("vue");
|
|
25
25
|
let mpegts_js = require("mpegts.js");
|
|
26
|
+
__toESM(mpegts_js, 1);
|
|
26
27
|
mpegts_js = __toESM(mpegts_js);
|
|
27
28
|
//#region src/components/MpegtsPlayer.vue
|
|
28
|
-
const _hoisted_1 = {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
const _hoisted_1 = {
|
|
30
|
+
style: {
|
|
31
|
+
width: "2.5rem",
|
|
32
|
+
height: "2.5rem",
|
|
33
|
+
marginBottom: "0.75rem",
|
|
34
|
+
color: "#9ca3af"
|
|
35
|
+
},
|
|
36
|
+
fill: "none",
|
|
37
|
+
stroke: "currentColor",
|
|
38
|
+
"stroke-width": "1.5",
|
|
39
|
+
viewBox: "0 0 24 24"
|
|
36
40
|
};
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
const _hoisted_2 = {
|
|
42
|
+
style: {
|
|
43
|
+
width: "2rem",
|
|
44
|
+
height: "2rem",
|
|
45
|
+
color: "#f87171"
|
|
46
|
+
},
|
|
47
|
+
fill: "none",
|
|
48
|
+
stroke: "currentColor",
|
|
49
|
+
"stroke-width": "1.5",
|
|
50
|
+
viewBox: "0 0 24 24"
|
|
40
51
|
};
|
|
41
52
|
const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
42
53
|
__name: "MpegtsPlayer",
|
|
@@ -58,18 +69,43 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
58
69
|
type: { default: "mse" },
|
|
59
70
|
cors: { type: Boolean },
|
|
60
71
|
withCredentials: { type: Boolean },
|
|
61
|
-
hasAudio: {
|
|
72
|
+
hasAudio: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
default: true
|
|
75
|
+
},
|
|
62
76
|
hasVideo: {
|
|
63
77
|
type: Boolean,
|
|
64
78
|
default: true
|
|
65
79
|
},
|
|
66
80
|
duration: {},
|
|
67
81
|
filesize: {},
|
|
68
|
-
|
|
82
|
+
showLoading: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
default: true
|
|
85
|
+
},
|
|
86
|
+
config: { default: () => ({}) },
|
|
87
|
+
autoReconnect: {
|
|
88
|
+
type: Boolean,
|
|
89
|
+
default: true
|
|
90
|
+
},
|
|
91
|
+
reconnect: { default: () => ({
|
|
92
|
+
retries: 5,
|
|
93
|
+
minDelay: 1e3,
|
|
94
|
+
maxDelay: 16e3
|
|
95
|
+
}) }
|
|
69
96
|
},
|
|
70
|
-
emits: [
|
|
97
|
+
emits: [
|
|
98
|
+
"error",
|
|
99
|
+
"status",
|
|
100
|
+
"statistics",
|
|
101
|
+
"mediaInfo",
|
|
102
|
+
"recovered",
|
|
103
|
+
"ended"
|
|
104
|
+
],
|
|
71
105
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
72
106
|
const DEFAULT_CONFIG = {
|
|
107
|
+
enableWorker: true,
|
|
108
|
+
reuseRedirectedURL: true,
|
|
73
109
|
enableStashBuffer: false,
|
|
74
110
|
liveBufferLatencyChasing: true,
|
|
75
111
|
liveBufferLatencyChasingOnPaused: true,
|
|
@@ -83,15 +119,135 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
83
119
|
autoCleanupMinBackwardDuration: 10,
|
|
84
120
|
fixAudioTimestampGap: true
|
|
85
121
|
};
|
|
122
|
+
const MSE_REQUIRED_TYPES = [
|
|
123
|
+
"mse",
|
|
124
|
+
"mpegts",
|
|
125
|
+
"m2ts",
|
|
126
|
+
"flv"
|
|
127
|
+
];
|
|
86
128
|
const props = __props;
|
|
87
129
|
const emit = __emit;
|
|
88
130
|
const videoRef = (0, vue.ref)();
|
|
89
131
|
const status = (0, vue.ref)("nosignal");
|
|
90
132
|
let player = null;
|
|
91
|
-
|
|
92
|
-
|
|
133
|
+
let gen = 0;
|
|
134
|
+
let recreateTimer = null;
|
|
135
|
+
function scheduleRecreate() {
|
|
136
|
+
if (recreateTimer) clearTimeout(recreateTimer);
|
|
137
|
+
recreateTimer = setTimeout(() => {
|
|
138
|
+
recreateTimer = null;
|
|
139
|
+
createPlayer();
|
|
140
|
+
}, 300);
|
|
141
|
+
}
|
|
142
|
+
const RECONNECTABLE_ERRORS = new Set([
|
|
143
|
+
"Exception",
|
|
144
|
+
"ConnectingTimeout",
|
|
145
|
+
"UnrecoverableEarlyEof"
|
|
146
|
+
]);
|
|
147
|
+
let reconnectAttempts = 0;
|
|
148
|
+
let reconnectTimer = null;
|
|
149
|
+
function markPlaying() {
|
|
150
|
+
reconnectAttempts = 0;
|
|
151
|
+
status.value = "playing";
|
|
152
|
+
emit("status", "playing");
|
|
153
|
+
}
|
|
154
|
+
function scheduleReconnect() {
|
|
155
|
+
const { retries = 5, minDelay = 1e3, maxDelay = 16e3 } = props.reconnect;
|
|
156
|
+
if (reconnectAttempts >= retries) return false;
|
|
157
|
+
const delay = Math.min(maxDelay, minDelay * 2 ** reconnectAttempts);
|
|
158
|
+
reconnectAttempts++;
|
|
159
|
+
status.value = "reconnecting";
|
|
160
|
+
emit("status", "reconnecting");
|
|
161
|
+
reconnectTimer = setTimeout(() => {
|
|
162
|
+
reconnectTimer = null;
|
|
163
|
+
createPlayer();
|
|
164
|
+
}, delay);
|
|
165
|
+
return true;
|
|
166
|
+
}
|
|
167
|
+
const videoStyle = (0, vue.computed)(() => ({
|
|
168
|
+
position: "absolute",
|
|
169
|
+
inset: 0,
|
|
170
|
+
width: "100%",
|
|
171
|
+
height: "100%",
|
|
172
|
+
objectFit: props.objectFit ?? "fill"
|
|
173
|
+
}));
|
|
174
|
+
const containerStyle = {
|
|
175
|
+
position: "relative",
|
|
176
|
+
width: "100%",
|
|
177
|
+
height: "100%",
|
|
178
|
+
backgroundColor: "#000",
|
|
179
|
+
overflow: "hidden"
|
|
180
|
+
};
|
|
181
|
+
const overlayBase = {
|
|
182
|
+
position: "absolute",
|
|
183
|
+
inset: 0,
|
|
184
|
+
display: "flex",
|
|
185
|
+
alignItems: "center",
|
|
186
|
+
justifyContent: "center"
|
|
187
|
+
};
|
|
188
|
+
const noSignalOverlay = {
|
|
189
|
+
...overlayBase,
|
|
190
|
+
flexDirection: "column",
|
|
191
|
+
backgroundColor: "rgb(17 24 39 / 0.9)"
|
|
192
|
+
};
|
|
193
|
+
const maskOverlay = {
|
|
194
|
+
...overlayBase,
|
|
195
|
+
backgroundColor: "rgb(0 0 0 / 0.6)"
|
|
196
|
+
};
|
|
197
|
+
const connectingInner = {
|
|
198
|
+
display: "flex",
|
|
199
|
+
flexDirection: "column",
|
|
200
|
+
alignItems: "center",
|
|
201
|
+
gap: "0.75rem"
|
|
202
|
+
};
|
|
203
|
+
const errorInner = {
|
|
204
|
+
display: "flex",
|
|
205
|
+
flexDirection: "column",
|
|
206
|
+
alignItems: "center",
|
|
207
|
+
gap: "0.5rem"
|
|
208
|
+
};
|
|
209
|
+
const spinnerStyle = {
|
|
210
|
+
width: "2rem",
|
|
211
|
+
height: "2rem",
|
|
212
|
+
borderRadius: "9999px",
|
|
213
|
+
border: "2px solid #3b82f6",
|
|
214
|
+
borderTopColor: "transparent",
|
|
215
|
+
animation: "mpegts-spin 1s linear infinite"
|
|
216
|
+
};
|
|
217
|
+
const noSignalTextStyle = {
|
|
218
|
+
fontSize: "0.875rem",
|
|
219
|
+
fontWeight: 500,
|
|
220
|
+
color: "#9ca3af",
|
|
221
|
+
letterSpacing: "0.05em",
|
|
222
|
+
textTransform: "uppercase"
|
|
223
|
+
};
|
|
224
|
+
const connectingTextStyle = {
|
|
225
|
+
fontSize: "0.875rem",
|
|
226
|
+
color: "#d1d5db"
|
|
227
|
+
};
|
|
228
|
+
const errorTextStyle = {
|
|
229
|
+
fontSize: "0.875rem",
|
|
230
|
+
color: "#f87171"
|
|
231
|
+
};
|
|
232
|
+
let keyframeInjected = false;
|
|
233
|
+
function ensureKeyframe() {
|
|
234
|
+
if (keyframeInjected || typeof document === "undefined") return;
|
|
235
|
+
keyframeInjected = true;
|
|
236
|
+
const el = document.createElement("style");
|
|
237
|
+
el.textContent = "@keyframes mpegts-spin { to { transform: rotate(360deg) } }";
|
|
238
|
+
document.head.appendChild(el);
|
|
239
|
+
}
|
|
240
|
+
function destroyPlayer(silent = false) {
|
|
241
|
+
gen++;
|
|
242
|
+
if (recreateTimer) {
|
|
243
|
+
clearTimeout(recreateTimer);
|
|
244
|
+
recreateTimer = null;
|
|
245
|
+
}
|
|
246
|
+
if (reconnectTimer) {
|
|
247
|
+
clearTimeout(reconnectTimer);
|
|
248
|
+
reconnectTimer = null;
|
|
249
|
+
}
|
|
93
250
|
if (!player) return;
|
|
94
|
-
status.value = "destroying";
|
|
95
251
|
try {
|
|
96
252
|
player.pause();
|
|
97
253
|
player.unload();
|
|
@@ -99,23 +255,25 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
99
255
|
player.destroy();
|
|
100
256
|
} catch {}
|
|
101
257
|
player = null;
|
|
102
|
-
|
|
258
|
+
if (!silent) {
|
|
259
|
+
status.value = "nosignal";
|
|
260
|
+
emit("status", "nosignal");
|
|
261
|
+
}
|
|
103
262
|
}
|
|
104
263
|
function play() {
|
|
105
264
|
if (!player) return;
|
|
265
|
+
const myGen = gen;
|
|
106
266
|
videoRef.value.muted = props.muted;
|
|
107
267
|
const result = player.play();
|
|
108
268
|
if (result instanceof Promise) result.then(() => {
|
|
109
|
-
|
|
110
|
-
|
|
269
|
+
if (myGen !== gen) return;
|
|
270
|
+
markPlaying();
|
|
111
271
|
}).catch(() => {
|
|
272
|
+
if (myGen !== gen) return;
|
|
112
273
|
status.value = "stopped";
|
|
113
274
|
emit("status", "stopped");
|
|
114
275
|
});
|
|
115
|
-
else
|
|
116
|
-
status.value = "playing";
|
|
117
|
-
emit("status", "playing");
|
|
118
|
-
}
|
|
276
|
+
else markPlaying();
|
|
119
277
|
}
|
|
120
278
|
function pause() {
|
|
121
279
|
if (!player) return;
|
|
@@ -123,9 +281,45 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
123
281
|
status.value = "stopped";
|
|
124
282
|
emit("status", "stopped");
|
|
125
283
|
}
|
|
284
|
+
function reload() {
|
|
285
|
+
createPlayer();
|
|
286
|
+
}
|
|
287
|
+
function setMuted(muted) {
|
|
288
|
+
if (videoRef.value) videoRef.value.muted = muted;
|
|
289
|
+
}
|
|
290
|
+
function getPlayer() {
|
|
291
|
+
return player;
|
|
292
|
+
}
|
|
293
|
+
function getVolume() {
|
|
294
|
+
return videoRef.value?.volume ?? 0;
|
|
295
|
+
}
|
|
296
|
+
function setVolume(volume) {
|
|
297
|
+
if (videoRef.value) videoRef.value.volume = volume;
|
|
298
|
+
}
|
|
299
|
+
function seek(seconds) {
|
|
300
|
+
if (player) player.currentTime = seconds;
|
|
301
|
+
}
|
|
302
|
+
function getCurrentTime() {
|
|
303
|
+
return videoRef.value?.currentTime ?? 0;
|
|
304
|
+
}
|
|
305
|
+
function getBufferedRanges() {
|
|
306
|
+
return videoRef.value?.buffered ?? null;
|
|
307
|
+
}
|
|
308
|
+
function getStatistics() {
|
|
309
|
+
return player?.statisticsInfo ?? null;
|
|
310
|
+
}
|
|
126
311
|
__expose({
|
|
127
312
|
play,
|
|
128
|
-
pause
|
|
313
|
+
pause,
|
|
314
|
+
reload,
|
|
315
|
+
setMuted,
|
|
316
|
+
getPlayer,
|
|
317
|
+
getVolume,
|
|
318
|
+
setVolume,
|
|
319
|
+
seek,
|
|
320
|
+
getCurrentTime,
|
|
321
|
+
getBufferedRanges,
|
|
322
|
+
getStatistics
|
|
129
323
|
});
|
|
130
324
|
function buildMediaDataSource() {
|
|
131
325
|
const source = {
|
|
@@ -135,18 +329,20 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
135
329
|
};
|
|
136
330
|
if (props.cors !== void 0) source.cors = props.cors;
|
|
137
331
|
if (props.withCredentials !== void 0) source.withCredentials = props.withCredentials;
|
|
138
|
-
|
|
139
|
-
|
|
332
|
+
source.hasAudio = props.hasAudio;
|
|
333
|
+
source.hasVideo = props.hasVideo;
|
|
140
334
|
if (props.duration !== void 0) source.duration = props.duration;
|
|
141
335
|
if (props.filesize !== void 0) source.filesize = props.filesize;
|
|
142
336
|
return source;
|
|
143
337
|
}
|
|
144
338
|
function createPlayer() {
|
|
145
|
-
destroyPlayer();
|
|
339
|
+
destroyPlayer(true);
|
|
340
|
+
const myGen = gen;
|
|
146
341
|
if (!props.url || !videoRef.value) return;
|
|
147
|
-
if (!mpegts_js.default.isSupported()) {
|
|
342
|
+
if (MSE_REQUIRED_TYPES.includes(props.type) && !mpegts_js.default.isSupported()) {
|
|
148
343
|
status.value = "error";
|
|
149
344
|
emit("status", "error");
|
|
345
|
+
emit("error", "NotSupportedError", "MediaSource Extensions (MSE) are not supported by this browser", { type: props.type });
|
|
150
346
|
return;
|
|
151
347
|
}
|
|
152
348
|
status.value = "connecting";
|
|
@@ -159,37 +355,63 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
159
355
|
player = mpegts_js.default.createPlayer(mediaSource, mergedConfig);
|
|
160
356
|
player.attachMediaElement(videoRef.value);
|
|
161
357
|
player.on(mpegts_js.default.Events.ERROR, (errorType, errorDetail, errorInfo) => {
|
|
358
|
+
if (myGen !== gen) return;
|
|
359
|
+
emit("error", errorType, errorDetail, errorInfo);
|
|
360
|
+
if (props.autoReconnect && errorType === "NetworkError" && RECONNECTABLE_ERRORS.has(errorDetail) && scheduleReconnect()) return;
|
|
162
361
|
status.value = "error";
|
|
163
362
|
emit("status", "error");
|
|
164
|
-
|
|
363
|
+
});
|
|
364
|
+
player.on(mpegts_js.default.Events.STATISTICS_INFO, (info) => {
|
|
365
|
+
if (myGen !== gen) return;
|
|
366
|
+
emit("statistics", info);
|
|
367
|
+
});
|
|
368
|
+
player.on(mpegts_js.default.Events.MEDIA_INFO, (info) => {
|
|
369
|
+
if (myGen !== gen) return;
|
|
370
|
+
emit("mediaInfo", info);
|
|
371
|
+
});
|
|
372
|
+
player.on(mpegts_js.default.Events.RECOVERED_EARLY_EOF, () => {
|
|
373
|
+
if (myGen !== gen) return;
|
|
374
|
+
emit("recovered");
|
|
375
|
+
});
|
|
376
|
+
player.on(mpegts_js.default.Events.LOADING_COMPLETE, () => {
|
|
377
|
+
if (myGen !== gen) return;
|
|
378
|
+
emit("ended");
|
|
165
379
|
});
|
|
166
380
|
player.load();
|
|
167
381
|
if (props.autoplay) {
|
|
168
382
|
videoRef.value.muted = props.muted;
|
|
169
383
|
const result = player.play();
|
|
170
384
|
if (result instanceof Promise) result.then(() => {
|
|
171
|
-
|
|
172
|
-
|
|
385
|
+
if (myGen !== gen) return;
|
|
386
|
+
markPlaying();
|
|
173
387
|
}).catch(() => {
|
|
174
|
-
|
|
175
|
-
|
|
388
|
+
if (myGen !== gen) return;
|
|
389
|
+
if (!props.muted && videoRef.value && player) {
|
|
390
|
+
videoRef.value.muted = true;
|
|
391
|
+
const fallbackResult = player.play();
|
|
392
|
+
if (fallbackResult instanceof Promise) fallbackResult.then(() => {
|
|
393
|
+
if (myGen !== gen) return;
|
|
394
|
+
markPlaying();
|
|
395
|
+
}).catch(() => {
|
|
396
|
+
if (myGen !== gen) return;
|
|
397
|
+
status.value = "stopped";
|
|
398
|
+
emit("status", "stopped");
|
|
399
|
+
});
|
|
400
|
+
else markPlaying();
|
|
401
|
+
} else {
|
|
402
|
+
status.value = "stopped";
|
|
403
|
+
emit("status", "stopped");
|
|
404
|
+
}
|
|
176
405
|
});
|
|
177
|
-
else
|
|
178
|
-
status.value = "playing";
|
|
179
|
-
emit("status", "playing");
|
|
180
|
-
}
|
|
406
|
+
else markPlaying();
|
|
181
407
|
}
|
|
182
408
|
}
|
|
183
409
|
(0, vue.watch)(() => props.url, (newUrl) => {
|
|
184
|
-
if (newUrl)
|
|
185
|
-
else
|
|
186
|
-
destroyPlayer();
|
|
187
|
-
status.value = "nosignal";
|
|
188
|
-
emit("status", "nosignal");
|
|
189
|
-
}
|
|
410
|
+
if (newUrl) scheduleRecreate();
|
|
411
|
+
else destroyPlayer();
|
|
190
412
|
});
|
|
191
413
|
(0, vue.watch)(() => props.config, () => {
|
|
192
|
-
if (props.url)
|
|
414
|
+
if (props.url) scheduleRecreate();
|
|
193
415
|
}, { deep: true });
|
|
194
416
|
(0, vue.watch)(() => [
|
|
195
417
|
props.type,
|
|
@@ -201,9 +423,10 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
201
423
|
props.duration,
|
|
202
424
|
props.filesize
|
|
203
425
|
], () => {
|
|
204
|
-
if (props.url)
|
|
426
|
+
if (props.url) scheduleRecreate();
|
|
205
427
|
});
|
|
206
428
|
(0, vue.onMounted)(() => {
|
|
429
|
+
ensureKeyframe();
|
|
207
430
|
if (props.url) createPlayer();
|
|
208
431
|
});
|
|
209
432
|
(0, vue.watch)(() => props.muted, (val) => {
|
|
@@ -213,31 +436,50 @@ const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
213
436
|
destroyPlayer();
|
|
214
437
|
});
|
|
215
438
|
return (_ctx, _cache) => {
|
|
216
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div",
|
|
439
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
440
|
+
class: "mpegts-player",
|
|
441
|
+
style: containerStyle
|
|
442
|
+
}, [
|
|
217
443
|
(0, vue.createElementVNode)("video", {
|
|
218
444
|
ref_key: "videoRef",
|
|
219
445
|
ref: videoRef,
|
|
220
|
-
class: "absolute inset-0 w-full h-full",
|
|
221
446
|
style: (0, vue.normalizeStyle)(videoStyle.value),
|
|
222
447
|
onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["prevent"])),
|
|
223
448
|
onContextmenu: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
|
|
224
449
|
}, null, 36),
|
|
225
|
-
status.value === "nosignal" || !__props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div",
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
stroke: "
|
|
231
|
-
"stroke-
|
|
232
|
-
|
|
233
|
-
|
|
450
|
+
status.value === "nosignal" || !__props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
451
|
+
key: 0,
|
|
452
|
+
style: noSignalOverlay
|
|
453
|
+
}, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("path", {
|
|
454
|
+
d: "m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z",
|
|
455
|
+
"stroke-linecap": "round",
|
|
456
|
+
"stroke-linejoin": "round"
|
|
457
|
+
}, null, -1), (0, vue.createElementVNode)("path", {
|
|
458
|
+
d: "M18 12 6 12M18 8 6 8M18 16l-12 0",
|
|
459
|
+
"stroke-linecap": "round",
|
|
460
|
+
"stroke-linejoin": "round"
|
|
461
|
+
}, null, -1)])])), (0, vue.createElementVNode)("span", { style: noSignalTextStyle }, "No Signal")])) : (0, vue.createCommentVNode)("v-if", true),
|
|
462
|
+
status.value === "connecting" && __props.showLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
463
|
+
key: 1,
|
|
464
|
+
style: maskOverlay
|
|
465
|
+
}, [(0, vue.createElementVNode)("div", { style: connectingInner }, [(0, vue.createElementVNode)("div", { style: spinnerStyle }), (0, vue.createElementVNode)("span", { style: connectingTextStyle }, "Connecting...")])])) : (0, vue.createCommentVNode)("v-if", true),
|
|
466
|
+
status.value === "error" && __props.url ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
467
|
+
key: 2,
|
|
468
|
+
style: maskOverlay
|
|
469
|
+
}, [(0, vue.createElementVNode)("div", { style: errorInner }, [((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2, [..._cache[3] || (_cache[3] = [(0, vue.createElementVNode)("path", {
|
|
234
470
|
d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
|
|
235
471
|
"stroke-linecap": "round",
|
|
236
472
|
"stroke-linejoin": "round"
|
|
237
|
-
})]), (0, vue.createElementVNode)("span", {
|
|
473
|
+
}, null, -1)])])), (0, vue.createElementVNode)("span", { style: errorTextStyle }, "Connection Failed")])])) : (0, vue.createCommentVNode)("v-if", true)
|
|
238
474
|
]);
|
|
239
475
|
};
|
|
240
476
|
}
|
|
241
477
|
});
|
|
242
478
|
//#endregion
|
|
479
|
+
Object.defineProperty(exports, "Mpegts", {
|
|
480
|
+
enumerable: true,
|
|
481
|
+
get: function() {
|
|
482
|
+
return mpegts_js.default;
|
|
483
|
+
}
|
|
484
|
+
});
|
|
243
485
|
exports.MpegtsPlayer = _sfc_main;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import * as vue0 from "vue";
|
|
2
|
-
import Mpegts from "mpegts.js";
|
|
2
|
+
import Mpegts, { default as Mpegts$1 } from "mpegts.js";
|
|
3
3
|
|
|
4
4
|
//#region src/types.d.ts
|
|
5
|
-
type MediaDataSource = Mpegts.MediaDataSource;
|
|
6
|
-
type MediaSegment = Mpegts.MediaSegment;
|
|
7
|
-
type MpegtsConfig = Mpegts.Config;
|
|
8
|
-
type
|
|
5
|
+
type MediaDataSource = Mpegts$1.MediaDataSource;
|
|
6
|
+
type MediaSegment = Mpegts$1.MediaSegment;
|
|
7
|
+
type MpegtsConfig = Mpegts$1.Config;
|
|
8
|
+
type StatisticsInfo = Mpegts$1.MSEPlayerStatisticsInfo;
|
|
9
|
+
type MediaInfo = Mpegts$1.MSEPlayerMediaInfo;
|
|
10
|
+
interface ReconnectConfig {
|
|
11
|
+
retries?: number;
|
|
12
|
+
minDelay?: number;
|
|
13
|
+
maxDelay?: number;
|
|
14
|
+
}
|
|
15
|
+
type PlayerStatus = 'connecting' | 'reconnecting' | 'error' | 'nosignal' | 'playing' | 'stopped';
|
|
9
16
|
//#endregion
|
|
10
17
|
//#region src/components/MpegtsPlayer.vue.d.ts
|
|
11
18
|
interface Props {
|
|
@@ -21,26 +28,59 @@ interface Props {
|
|
|
21
28
|
hasVideo?: boolean;
|
|
22
29
|
duration?: number;
|
|
23
30
|
filesize?: number;
|
|
31
|
+
showLoading?: boolean;
|
|
24
32
|
config?: Partial<MpegtsConfig>;
|
|
33
|
+
autoReconnect?: boolean;
|
|
34
|
+
reconnect?: ReconnectConfig;
|
|
25
35
|
}
|
|
26
36
|
declare function play(): void;
|
|
27
37
|
declare function pause(): void;
|
|
38
|
+
declare function reload(): void;
|
|
39
|
+
declare function setMuted(muted: boolean): void;
|
|
40
|
+
declare function getPlayer(): Mpegts$1.Player | null;
|
|
41
|
+
declare function getVolume(): number;
|
|
42
|
+
declare function setVolume(volume: number): void;
|
|
43
|
+
declare function seek(seconds: number): void;
|
|
44
|
+
declare function getCurrentTime(): number;
|
|
45
|
+
declare function getBufferedRanges(): TimeRanges | null;
|
|
46
|
+
declare function getStatistics(): StatisticsInfo | null;
|
|
28
47
|
declare const _default: vue0.DefineComponent<Props, {
|
|
29
48
|
play: typeof play;
|
|
30
49
|
pause: typeof pause;
|
|
50
|
+
reload: typeof reload;
|
|
51
|
+
setMuted: typeof setMuted;
|
|
52
|
+
getPlayer: typeof getPlayer;
|
|
53
|
+
getVolume: typeof getVolume;
|
|
54
|
+
setVolume: typeof setVolume;
|
|
55
|
+
seek: typeof seek;
|
|
56
|
+
getCurrentTime: typeof getCurrentTime;
|
|
57
|
+
getBufferedRanges: typeof getBufferedRanges;
|
|
58
|
+
getStatistics: typeof getStatistics;
|
|
31
59
|
}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
|
|
32
60
|
error: (errorType: string, errorDetail: string, errorInfo: any) => any;
|
|
33
61
|
status: (status: PlayerStatus) => any;
|
|
62
|
+
statistics: (info: Mpegts$1.MSEPlayerStatisticsInfo) => any;
|
|
63
|
+
mediaInfo: (info: Mpegts$1.MSEPlayerMediaInfo) => any;
|
|
64
|
+
recovered: () => any;
|
|
65
|
+
ended: () => any;
|
|
34
66
|
}, string, vue0.PublicProps, Readonly<Props> & Readonly<{
|
|
35
67
|
onError?: ((errorType: string, errorDetail: string, errorInfo: any) => any) | undefined;
|
|
36
68
|
onStatus?: ((status: PlayerStatus) => any) | undefined;
|
|
69
|
+
onStatistics?: ((info: Mpegts$1.MSEPlayerStatisticsInfo) => any) | undefined;
|
|
70
|
+
onMediaInfo?: ((info: Mpegts$1.MSEPlayerMediaInfo) => any) | undefined;
|
|
71
|
+
onRecovered?: (() => any) | undefined;
|
|
72
|
+
onEnded?: (() => any) | undefined;
|
|
37
73
|
}>, {
|
|
38
74
|
autoplay: boolean;
|
|
39
75
|
isLive: boolean;
|
|
40
76
|
muted: boolean;
|
|
41
77
|
type: string;
|
|
78
|
+
hasAudio: boolean;
|
|
42
79
|
hasVideo: boolean;
|
|
80
|
+
showLoading: boolean;
|
|
43
81
|
config: Partial<MpegtsConfig>;
|
|
82
|
+
autoReconnect: boolean;
|
|
83
|
+
reconnect: ReconnectConfig;
|
|
44
84
|
}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
|
|
45
85
|
//#endregion
|
|
46
|
-
export { type MediaDataSource, type MediaSegment, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus };
|
|
86
|
+
export { type MediaDataSource, type MediaInfo, type MediaSegment, Mpegts, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus, type ReconnectConfig, type StatisticsInfo };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import * as vue0 from "vue";
|
|
2
|
-
import Mpegts from "mpegts.js";
|
|
2
|
+
import Mpegts, { default as Mpegts$1 } from "mpegts.js";
|
|
3
3
|
|
|
4
4
|
//#region src/types.d.ts
|
|
5
|
-
type MediaDataSource = Mpegts.MediaDataSource;
|
|
6
|
-
type MediaSegment = Mpegts.MediaSegment;
|
|
7
|
-
type MpegtsConfig = Mpegts.Config;
|
|
8
|
-
type
|
|
5
|
+
type MediaDataSource = Mpegts$1.MediaDataSource;
|
|
6
|
+
type MediaSegment = Mpegts$1.MediaSegment;
|
|
7
|
+
type MpegtsConfig = Mpegts$1.Config;
|
|
8
|
+
type StatisticsInfo = Mpegts$1.MSEPlayerStatisticsInfo;
|
|
9
|
+
type MediaInfo = Mpegts$1.MSEPlayerMediaInfo;
|
|
10
|
+
interface ReconnectConfig {
|
|
11
|
+
retries?: number;
|
|
12
|
+
minDelay?: number;
|
|
13
|
+
maxDelay?: number;
|
|
14
|
+
}
|
|
15
|
+
type PlayerStatus = 'connecting' | 'reconnecting' | 'error' | 'nosignal' | 'playing' | 'stopped';
|
|
9
16
|
//#endregion
|
|
10
17
|
//#region src/components/MpegtsPlayer.vue.d.ts
|
|
11
18
|
interface Props {
|
|
@@ -21,26 +28,59 @@ interface Props {
|
|
|
21
28
|
hasVideo?: boolean;
|
|
22
29
|
duration?: number;
|
|
23
30
|
filesize?: number;
|
|
31
|
+
showLoading?: boolean;
|
|
24
32
|
config?: Partial<MpegtsConfig>;
|
|
33
|
+
autoReconnect?: boolean;
|
|
34
|
+
reconnect?: ReconnectConfig;
|
|
25
35
|
}
|
|
26
36
|
declare function play(): void;
|
|
27
37
|
declare function pause(): void;
|
|
38
|
+
declare function reload(): void;
|
|
39
|
+
declare function setMuted(muted: boolean): void;
|
|
40
|
+
declare function getPlayer(): Mpegts$1.Player | null;
|
|
41
|
+
declare function getVolume(): number;
|
|
42
|
+
declare function setVolume(volume: number): void;
|
|
43
|
+
declare function seek(seconds: number): void;
|
|
44
|
+
declare function getCurrentTime(): number;
|
|
45
|
+
declare function getBufferedRanges(): TimeRanges | null;
|
|
46
|
+
declare function getStatistics(): StatisticsInfo | null;
|
|
28
47
|
declare const _default: vue0.DefineComponent<Props, {
|
|
29
48
|
play: typeof play;
|
|
30
49
|
pause: typeof pause;
|
|
50
|
+
reload: typeof reload;
|
|
51
|
+
setMuted: typeof setMuted;
|
|
52
|
+
getPlayer: typeof getPlayer;
|
|
53
|
+
getVolume: typeof getVolume;
|
|
54
|
+
setVolume: typeof setVolume;
|
|
55
|
+
seek: typeof seek;
|
|
56
|
+
getCurrentTime: typeof getCurrentTime;
|
|
57
|
+
getBufferedRanges: typeof getBufferedRanges;
|
|
58
|
+
getStatistics: typeof getStatistics;
|
|
31
59
|
}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
|
|
32
60
|
error: (errorType: string, errorDetail: string, errorInfo: any) => any;
|
|
33
61
|
status: (status: PlayerStatus) => any;
|
|
62
|
+
statistics: (info: Mpegts$1.MSEPlayerStatisticsInfo) => any;
|
|
63
|
+
mediaInfo: (info: Mpegts$1.MSEPlayerMediaInfo) => any;
|
|
64
|
+
recovered: () => any;
|
|
65
|
+
ended: () => any;
|
|
34
66
|
}, string, vue0.PublicProps, Readonly<Props> & Readonly<{
|
|
35
67
|
onError?: ((errorType: string, errorDetail: string, errorInfo: any) => any) | undefined;
|
|
36
68
|
onStatus?: ((status: PlayerStatus) => any) | undefined;
|
|
69
|
+
onStatistics?: ((info: Mpegts$1.MSEPlayerStatisticsInfo) => any) | undefined;
|
|
70
|
+
onMediaInfo?: ((info: Mpegts$1.MSEPlayerMediaInfo) => any) | undefined;
|
|
71
|
+
onRecovered?: (() => any) | undefined;
|
|
72
|
+
onEnded?: (() => any) | undefined;
|
|
37
73
|
}>, {
|
|
38
74
|
autoplay: boolean;
|
|
39
75
|
isLive: boolean;
|
|
40
76
|
muted: boolean;
|
|
41
77
|
type: string;
|
|
78
|
+
hasAudio: boolean;
|
|
42
79
|
hasVideo: boolean;
|
|
80
|
+
showLoading: boolean;
|
|
43
81
|
config: Partial<MpegtsConfig>;
|
|
82
|
+
autoReconnect: boolean;
|
|
83
|
+
reconnect: ReconnectConfig;
|
|
44
84
|
}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
|
|
45
85
|
//#endregion
|
|
46
|
-
export { type MediaDataSource, type MediaSegment, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus };
|
|
86
|
+
export { type MediaDataSource, type MediaInfo, type MediaSegment, Mpegts, type MpegtsConfig, _default as MpegtsPlayer, type PlayerStatus, type ReconnectConfig, type StatisticsInfo };
|