@linker-design-plus/mpegtsplayer 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -0,0 +1,253 @@
+import { getCurrentInstance as x, inject as z, defineComponent as P, computed as S, openBlock as D, createElementBlock as F, normalizeClass as j, normalizeStyle as A, createElementVNode as V, ref as f, watch as U, nextTick as G, onMounted as W, onUnmounted as J, createVNode as y, createTextVNode as q } from "vue";
+import c from "mpegts.js";
+const H = Symbol("ArcoConfigProvider"), K = "arco", X = "$arco", Y = (e) => {
+  var a, t, i;
+  const r = x(), u = z(H, void 0), l = (i = (t = u == null ? void 0 : u.prefixCls) != null ? t : (a = r == null ? void 0 : r.appContext.config.globalProperties[X]) == null ? void 0 : a.classPrefix) != null ? i : K;
+  return e ? `${l}-${e}` : l;
+}, Q = Object.prototype.toString;
+function Z(e) {
+  return Q.call(e) === "[object Number]" && e === e;
+}
+var ee = (e, a) => {
+  for (const [t, i] of a)
+    e[t] = i;
+  return e;
+};
+const te = P({
+  name: "IconLoading",
+  props: {
+    size: {
+      type: [Number, String]
+    },
+    strokeWidth: {
+      type: Number,
+      default: 4
+    },
+    strokeLinecap: {
+      type: String,
+      default: "butt",
+      validator: (e) => ["butt", "round", "square"].includes(e)
+    },
+    strokeLinejoin: {
+      type: String,
+      default: "miter",
+      validator: (e) => ["arcs", "bevel", "miter", "miter-clip", "round"].includes(e)
+    },
+    rotate: Number,
+    spin: Boolean
+  },
+  emits: {
+    click: (e) => !0
+  },
+  setup(e, { emit: a }) {
+    const t = Y("icon"), i = S(() => [t, `${t}-loading`, { [`${t}-spin`]: e.spin }]), r = S(() => {
+      const l = {};
+      return e.size && (l.fontSize = Z(e.size) ? `${e.size}px` : e.size), e.rotate && (l.transform = `rotate(${e.rotate}deg)`), l;
+    });
+    return {
+      cls: i,
+      innerStyle: r,
+      onClick: (l) => {
+        a("click", l);
+      }
+    };
+  }
+}), ae = ["stroke-width", "stroke-linecap", "stroke-linejoin"], ne = /* @__PURE__ */ V("path", { d: "M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6" }, null, -1), oe = [
+  ne
+];
+function le(e, a, t, i, r, u) {
+  return D(), F("svg", {
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: "currentColor",
+    class: j(e.cls),
+    style: A(e.innerStyle),
+    "stroke-width": e.strokeWidth,
+    "stroke-linecap": e.strokeLinecap,
+    "stroke-linejoin": e.strokeLinejoin,
+    onClick: a[0] || (a[0] = (...l) => e.onClick && e.onClick(...l))
+  }, oe, 14, ae);
+}
+var g = /* @__PURE__ */ ee(te, [["render", le]]);
+const ie = Object.assign(g, {
+  install: (e, a) => {
+    var t;
+    const i = (t = a == null ? void 0 : a.iconPrefix) != null ? t : "";
+    e.component(i + g.name, g);
+  }
+});
+const p = /* @__PURE__ */ P({
+  name: "MpegtsPlayer",
+  props: {
+    videoUrl: {
+      type: String,
+      default: ""
+    },
+    closeVisibilityChangeListener: {
+      type: Boolean,
+      default: !1
+    },
+    autoVisibilityChangeRefresh: {
+      type: Boolean,
+      default: !1
+    },
+    autoReload: {
+      type: Boolean,
+      default: !1
+    },
+    isLive: {
+      type: Boolean,
+      default: !0
+    },
+    controls: {
+      type: Boolean,
+      default: !1
+    },
+    currentTime: {
+      type: Number,
+      default: 0
+    },
+    stallTimeout: {
+      type: Number,
+      default: 5e3
+    }
+  },
+  emits: ["loadError", "playSuccess", "loadComplete", "visibilitychange", "timeupdate", "playEnded", "playLoading"],
+  setup(e, {
+    emit: a
+  }) {
+    const t = f(null), i = f(null), r = f(!0), u = f(!1), l = f(0);
+    let m = 0, h = Date.now();
+    const L = () => {
+      const n = i.value;
+      t.value = c.createPlayer({
+        type: "flv",
+        // 指定视频类型
+        isLive: e.isLive,
+        // 开启直播
+        hasAudio: !1,
+        // 关闭声音
+        cors: !0,
+        // 开启跨域访问
+        url: e.videoUrl
+        // 指定流链接
+      }, {
+        enableWorker: !1,
+        // 启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
+        // @ts-ignore
+        enableWorkerForMSE: !1,
+        enableStashBuffer: !e.isLive,
+        // 关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
+        stashInitialSize: 128,
+        // 减少首帧等待时长（针对实时视频流）
+        lazyLoad: !1,
+        // 关闭懒加载模式（针对实时视频流）
+        lazyLoadMaxDuration: 0.2,
+        // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
+        deferLoadAfterSourceOpen: !1,
+        // 在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
+        liveBufferLatencyChasing: !!e.isLive,
+        // 追踪内部缓冲区导致的实时流延迟
+        liveBufferLatencyMaxLatency: 1,
+        // HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
+        liveBufferLatencyMinRemain: 0.5,
+        // HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
+        autoCleanupSourceBuffer: !0,
+        // 自动清理SourceBuffer，防止缓冲区溢出。
+        autoCleanupMinBackwardDuration: 30,
+        // 自动清理时保留的最小回溯时长。
+        autoCleanupMaxBackwardDuration: 60
+        // 自动清理时的最大回溯时长。
+      }), t.value.attachMediaElement(n), r.value = !0, M(), $();
+    }, M = async () => {
+      try {
+        t.value.load();
+      } catch (n) {
+        console.log(n), a("loadError", n);
+      }
+    }, $ = () => {
+      t.value.on(c.Events.ERROR, C), t.value.on(c.Events.LOADING_COMPLETE, b), t.value.on(c.Events.STATISTICS_INFO, T);
+    }, C = (n, o, s) => {
+      console.log(`类型:${JSON.stringify(n)}`, `报错内容${o}`, "报错信息", s), a("loadError", o);
+    }, b = (n, o, s) => {
+      console.log(`类型:${JSON.stringify(n)}`, `报错内容${o}`, "报错信息", s), console.log("直播已结束"), a("loadComplete"), e.autoReload && B();
+    }, T = (n) => {
+      const o = n.decodedFrames, s = Date.now();
+      o === m && o !== 0 ? s - h > e.stallTimeout && (console.log(`解码帧数超过 ${e.stallTimeout / 1e3} 秒没有更新，可能卡顿了`), a("playLoading")) : (m = o, h = s);
+    }, B = () => {
+      console.log("自动加载", l.value), l.value++, l.value <= 2 ? v() : l.value = 0;
+    }, v = () => {
+      t.value != null && d(), L();
+    }, N = () => t.value.play(), _ = () => t.value.pause(), d = () => {
+      var n, o, s, E;
+      t.value && (t.value.off(c.Events.ERROR, C), t.value.off(c.Events.LOADING_COMPLETE, b), (n = t.value) == null || n.pause(), (o = t.value) == null || o.unload(), (s = t.value) == null || s.detachMediaElement(), (E = t.value) == null || E.destroy(), t.value = null);
+    }, w = async (n) => {
+      var o;
+      if (!(!((o = n.target) != null && o.paused) || !r.value)) {
+        r.value = !1, console.log("handleCanplay", n.target.paused), l.value = 0, u.value = !1;
+        try {
+          await t.value.play(), console.log(t.value), a("playSuccess");
+        } catch (s) {
+          console.log("play error", s), a("loadError", s);
+        }
+      }
+    }, O = () => {
+      u.value = !0;
+    }, R = (n) => {
+      var o;
+      a("timeupdate", ((o = n == null ? void 0 : n.target) == null ? void 0 : o.currentTime) ?? 0);
+    }, I = () => {
+      a("playEnded");
+    }, k = () => {
+      document.visibilityState === "visible" ? (a("visibilitychange", document.visibilityState), e.autoVisibilityChangeRefresh && v()) : d();
+    };
+    return U(() => e.videoUrl, (n) => {
+      n && G(() => {
+        t.value != null && d(), console.log(`isSupported: ${c.isSupported()}`), console.log(`是否支持点播视频：${c.getFeatureList().msePlayback}`), console.log(`是否支持httpflv直播流：${c.getFeatureList().mseLivePlayback}`), L();
+      });
+    }, {
+      immediate: !0
+    }), W(() => {
+      e.closeVisibilityChangeListener || document.addEventListener("visibilitychange", k);
+    }), J(() => {
+      d(), e.closeVisibilityChangeListener || document.removeEventListener("visibilitychange", k);
+    }), {
+      flvPlayer: t,
+      videoContainerRef: i,
+      loadMetaData: u,
+      start: N,
+      pause: _,
+      destroy: d,
+      reload: v,
+      handleCanplay: w,
+      handleLoadedmetadata: O,
+      handleTimeupdate: R,
+      handlePlayEnded: I
+    };
+  },
+  render() {
+    return y("div", {
+      class: "mainContainer"
+    }, [y("video", {
+      class: "video-container",
+      ref: "videoContainerRef",
+      muted: !0,
+      controls: this.controls,
+      onClick: (e) => e.preventDefault(),
+      onCanplay: this.handleCanplay,
+      onLoadedmetadata: this.handleLoadedmetadata,
+      onTimeupdate: this.handleTimeupdate,
+      onEnded: this.handlePlayEnded
+    }, [q("Your browser is too old which doesn't support HTML5 video.")]), this.loadMetaData && y(ie, {
+      class: "meta-data-loading"
+    }, null)]);
+  }
+}), ce = Object.assign(p, {
+  install: (e) => {
+    e.component(p.name, p);
+  }
+});
+export {
+  ce as default
+};

package/package.json

@@ -1,48 +1,50 @@
-{
-  "name": "@linker-design-plus/mpegtsplayer",
-  "version": "1.0.0",
-  "description": "A player base on mpegts.js",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
-  "files": [
-    "dist",
-    "src/MpegtsPlayer.less"
-  ],
-  "keywords": [
-    "vue",
-    "mpegts",
-    "mpegts-player"
-  ],
-  "author": "Linker Design Team",
-  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.1.0",
-    "mpegts.js": "1.7.3",
-    "@arco-design/web-vue": "2.56.3"
-  },
-  "dependencies": {
-    "vue": "^3.1.0",
-    "@arco-design/web-vue": "^2.0.0",
-    "mpegts.js": "1.7.3"
-  },
-  "devDependencies": {
-    "@types/node": "^18.0.0",
-    "rimraf": "^5.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.0.0"
-  },
-  "scripts": {
-    "startup": "pnpm build",
-    "dev": "node scripts/build.mjs -w",
-    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
-    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
-    "build:bundle": "node scripts/build.mjs",
-    "build:dev": "tsc",
-    "clean": "rimraf ./dist"
-  }
+{
+  "name": "@linker-design-plus/mpegtsplayer",
+  "version": "1.0.2",
+  "description": "A player base on mpegts.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "startup": "pnpm build",
+    "dev": "node scripts/build.mjs -w",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node scripts/build.mjs",
+    "build:dev": "tsc",
+    "clean": "rimraf ./dist"
+  },
+  "files": [
+    "dist",
+    "src/MpegtsPlayer.less"
+  ],
+  "keywords": [
+    "vue",
+    "mpegts",
+    "mpegts-player"
+  ],
+  "author": "Linker Design Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.1.0",
+    "mpegts.js": "1.7.3",
+    "@arco-design/web-vue": "2.56.3"
+  },
+  "dependencies": {
+    "vue": "^3.1.0",
+    "@arco-design/web-vue": "^2.0.0",
+    "mpegts.js": "1.7.3"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0"
+  }
 }

package/src/MpegtsPlayer.less

@@ -1,23 +1,23 @@
-.mainContainer {
-  display: block;
-  width: 100%;
-  height: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-}
-
-.meta-data-loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -20px; /* 子元素高度的一半 */
-  margin-left: -20px; /* 子元素宽度的一半 */
-  font-size: 40px;
-  color: rgb(var(--primary-6));
-}
-
-.video-container {
-  width: 100%;
-  height: 100%;
+.mainContainer {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+}
+
+.meta-data-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -20px; /* 子元素高度的一半 */
+  margin-left: -20px; /* 子元素宽度的一半 */
+  font-size: 40px;
+  color: rgb(var(--primary-6));
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
 }