简柏林 / thingskit-scada · Commits

Commit 67bcaceaf8a5ebdaf94e6fa082cd9f8ca902274e

Authored by xp.Huang
2 parents 5b2c311a 576c5120

Merge branch 'main_dev' into 'main' 

Main dev

See merge request yunteng/thingskit-scada!229
Inline Side-by-side
Showing 15 changed files with 483 additions and 429 deletions
... ... @@ -33,9 +33,11 @@
33 33 "qs": "^6.11.2",
34 34 "resize-observer-polyfill": "^1.5.1",
35 35 "sortablejs": "^1.15.0",
36   - "video.js": "^7.20.3",
37   - "videojs-flvjs-es6": "^1.0.1",
38   - "vue": "^3.3.4"
  36 + "vue": "^3.3.4",
  37 + "xgplayer": "^3.0.14",
  38 + "xgplayer-flv": "^3.0.14",
  39 + "xgplayer-hls": "^3.0.14",
  40 + "xgplayer-mp4": "^3.0.14"
39 41 },
40 42 "devDependencies": {
41 43 "@iconify/vue": "^4.1.1",
... ... @@ -44,7 +46,6 @@
44 46 "@types/node": "^20.7.0",
45 47 "@types/qs": "^6.9.8",
46 48 "@types/sortablejs": "^1.15.3",
47   - "@types/video.js": "^7.3.53",
48 49 "@vitejs/plugin-legacy": "^4.1.1",
49 50 "@vitejs/plugin-vue": "^4.1.0",
50 51 "@vitejs/plugin-vue-jsx": "^3.0.1",
... ... @@ -62,7 +63,6 @@
62 63 "stylelint-config-standard-vue": "^1.0.0",
63 64 "stylelint-order": "^6.0.3",
64 65 "typescript": "^5.0.2",
65   - "video.js": "^8.6.0",
66 66 "vite": "^4.3.9",
67 67 "vite-plugin-html": "^3.2.0",
68 68 "vite-plugin-windicss": "^1.9.0",
... ...
... ... @@ -59,15 +59,21 @@ dependencies:
59 59 sortablejs:
60 60 specifier: ^1.15.0
61 61 version: 1.15.0
62   - video.js:
63   - specifier: ^7.20.3
64   - version: 7.20.3
65   - videojs-flvjs-es6:
66   - specifier: ^1.0.1
67   - version: 1.0.1
68 62 vue:
69 63 specifier: ^3.3.4
70 64 version: 3.3.4
  65 + xgplayer:
  66 + specifier: ^3.0.14
  67 + version: 3.0.14(core-js@3.31.1)
  68 + xgplayer-flv:
  69 + specifier: ^3.0.14
  70 + version: 3.0.14(core-js@3.31.1)(xgplayer@3.0.14)
  71 + xgplayer-hls:
  72 + specifier: ^3.0.14
  73 + version: 3.0.14(core-js@3.31.1)(xgplayer@3.0.14)
  74 + xgplayer-mp4:
  75 + specifier: ^3.0.14
  76 + version: 3.0.14(core-js@3.31.1)(xgplayer@3.0.14)
71 77
72 78 devDependencies:
73 79 '@iconify/vue':
... ... @@ -88,9 +94,6 @@ devDependencies:
88 94 '@types/sortablejs':
89 95 specifier: ^1.15.3
90 96 version: 1.15.3
91   - '@types/video.js':
92   - specifier: ^7.3.53
93   - version: 7.3.53
94 97 '@vitejs/plugin-legacy':
95 98 specifier: ^4.1.1
96 99 version: 4.1.1(terser@5.18.0)(vite@4.3.9)
... ... @@ -1919,10 +1922,6 @@ packages:
1919 1922 resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
1920 1923 dev: true
1921 1924
1922   - /@types/video.js@7.3.53:
1923   - resolution: {integrity: sha512-pE3ozDRXEPs9ZC401IhN3XWDihJs2GUzEZVu/qq8IfryOIvg2U1i9LExo16y9FdP2ZV2WnZhM4klb+lP03PpeQ==}
1924   - dev: true
1925   -
1926 1925 /@types/web-bluetooth@0.0.17:
1927 1926 resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
1928 1927 dev: false
... ... @@ -2061,39 +2060,6 @@ packages:
2061 2060 eslint-visitor-keys: 3.4.1
2062 2061 dev: true
2063 2062
2064   - /@videojs/http-streaming@2.14.3(video.js@7.20.3):
2065   - resolution: {integrity: sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==}
2066   - engines: {node: '>=8', npm: '>=5'}
2067   - peerDependencies:
2068   - video.js: ^6 || ^7
2069   - dependencies:
2070   - '@babel/runtime': 7.22.6
2071   - '@videojs/vhs-utils': 3.0.5
2072   - aes-decrypter: 3.1.3
2073   - global: 4.4.0
2074   - m3u8-parser: 4.7.1
2075   - mpd-parser: 0.21.1
2076   - mux.js: 6.0.1
2077   - video.js: 7.20.3
2078   - dev: false
2079   -
2080   - /@videojs/vhs-utils@3.0.5:
2081   - resolution: {integrity: sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==}
2082   - engines: {node: '>=8', npm: '>=5'}
2083   - dependencies:
2084   - '@babel/runtime': 7.22.6
2085   - global: 4.4.0
2086   - url-toolkit: 2.2.5
2087   - dev: false
2088   -
2089   - /@videojs/xhr@2.6.0:
2090   - resolution: {integrity: sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==}
2091   - dependencies:
2092   - '@babel/runtime': 7.22.6
2093   - global: 4.4.0
2094   - is-function: 1.0.2
2095   - dev: false
2096   -
2097 2063 /@vitejs/plugin-legacy@4.1.1(terser@5.18.0)(vite@4.3.9):
2098 2064 resolution: {integrity: sha512-um3gbVouD2Q/g19C0qpDfHwveXDCAHzs8OC3e9g6aXpKoD1H14himgs7wkMnhAynBJy7QqUoZNAXDuqN8zLR2g==}
2099 2065 engines: {node: ^14.18.0 || >=16.0.0}
... ... @@ -2406,11 +2372,6 @@ packages:
2406 2372 resolution: {integrity: sha512-OFfbOrTStQl1iD1Y/Dhk86povchev5fRBvtAaFs7qr/jLgOH38r4Zt4gdEooNGBLBk+uaV2U3RJO/Ju5yHQ3PQ==}
2407 2373 dev: true
2408 2374
2409   - /@xmldom/xmldom@0.7.13:
2410   - resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
2411   - engines: {node: '>=10.0.0'}
2412   - dev: false
2413   -
2414 2375 /ace-builds@1.29.0:
2415 2376 resolution: {integrity: sha512-TyTe22nW1rUi7bzbGwLwg/6EN88CJuxUO0193nv/6cQ8lMBV6XtfeQIAgU3dkr8wnCn2okycqHjCDlPGNcWqoQ==}
2416 2377 dev: false
... ... @@ -2443,15 +2404,6 @@ packages:
2443 2404 hasBin: true
2444 2405 dev: true
2445 2406
2446   - /aes-decrypter@3.1.3:
2447   - resolution: {integrity: sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==}
2448   - dependencies:
2449   - '@babel/runtime': 7.22.6
2450   - '@videojs/vhs-utils': 3.0.5
2451   - global: 4.4.0
2452   - pkcs7: 1.0.4
2453   - dev: false
2454   -
2455 2407 /ajv@6.12.6:
2456 2408 resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
2457 2409 dependencies:
... ... @@ -2944,6 +2896,12 @@ packages:
2944 2896 /concat-map@0.0.1:
2945 2897 resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
2946 2898
  2899 + /concat-typed-array@1.0.2:
  2900 + resolution: {integrity: sha512-aC878bxeWSlrY6h60cCDwBUXpKwovZrB7+C4+VHNO1CIXW2gBLxbQ757jWtOXUscLGgYI8R84N6uy9fTJPe+0g==}
  2901 + engines: {node: '>=0.10.0'}
  2902 + deprecated: 'WARNING: This package has been renamed to typed-array-concat.'
  2903 + dev: false
  2904 +
2947 2905 /connect-history-api-fallback@1.6.0:
2948 2906 resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
2949 2907 engines: {node: '>=0.8'}
... ... @@ -2997,6 +2955,10 @@ packages:
2997 2955 shebang-command: 2.0.0
2998 2956 which: 2.0.2
2999 2957
  2958 + /crypto-es@1.2.7:
  2959 + resolution: {integrity: sha512-UUqiVJ2gUuZFmbFsKmud3uuLcNP2+Opt+5ysmljycFCyhA0+T16XJmo1ev/t5kMChMqWh7IEvURNCqsg+SjZGQ==}
  2960 + dev: false
  2961 +
3000 2962 /crypto-js@4.1.1:
3001 2963 resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
3002 2964 dev: false
... ... @@ -3038,6 +3000,20 @@ packages:
3038 3000 /csstype@3.1.2:
3039 3001 resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
3040 3002
  3003 + /d@1.0.2:
  3004 + resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
  3005 + engines: {node: '>=0.12'}
  3006 + dependencies:
  3007 + es5-ext: 0.10.64
  3008 + type: 2.7.2
  3009 + dev: false
  3010 +
  3011 + /danmu.js@1.1.13:
  3012 + resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
  3013 + dependencies:
  3014 + event-emitter: 0.3.5
  3015 + dev: false
  3016 +
3041 3017 /dayjs@1.11.9:
3042 3018 resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
3043 3019 dev: false
... ... @@ -3090,6 +3066,11 @@ packages:
3090 3066 resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
3091 3067 dev: true
3092 3068
  3069 + /deepmerge@2.2.1:
  3070 + resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
  3071 + engines: {node: '>=0.10.0'}
  3072 + dev: false
  3073 +
3093 3074 /define-properties@1.2.0:
3094 3075 resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
3095 3076 engines: {node: '>= 0.4'}
... ... @@ -3103,6 +3084,10 @@ packages:
3103 3084 engines: {node: '>=0.4.0'}
3104 3085 dev: false
3105 3086
  3087 + /delegate@3.2.0:
  3088 + resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
  3089 + dev: false
  3090 +
3106 3091 /dir-glob@3.0.1:
3107 3092 resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
3108 3093 engines: {node: '>=8'}
... ... @@ -3147,10 +3132,6 @@ packages:
3147 3132 entities: 4.5.0
3148 3133 dev: true
3149 3134
3150   - /dom-walk@0.1.2:
3151   - resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==}
3152   - dev: false
3153   -
3154 3135 /domelementtype@2.3.0:
3155 3136 resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
3156 3137 dev: true
... ... @@ -3202,6 +3183,10 @@ packages:
3202 3183 engines: {node: '>=12'}
3203 3184 dev: true
3204 3185
  3186 + /downloadjs@1.4.7:
  3187 + resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
  3188 + dev: false
  3189 +
3205 3190 /eastasianwidth@0.2.0:
3206 3191 resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
3207 3192 dev: true
... ... @@ -3334,10 +3319,37 @@ packages:
3334 3319 is-symbol: 1.0.4
3335 3320 dev: true
3336 3321
  3322 + /es5-ext@0.10.64:
  3323 + resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
  3324 + engines: {node: '>=0.10'}
  3325 + requiresBuild: true
  3326 + dependencies:
  3327 + es6-iterator: 2.0.3
  3328 + es6-symbol: 3.1.4
  3329 + esniff: 2.0.1
  3330 + next-tick: 1.1.0
  3331 + dev: false
  3332 +
  3333 + /es6-iterator@2.0.3:
  3334 + resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
  3335 + dependencies:
  3336 + d: 1.0.2
  3337 + es5-ext: 0.10.64
  3338 + es6-symbol: 3.1.4
  3339 + dev: false
  3340 +
3337 3341 /es6-promise@4.2.8:
3338 3342 resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
3339 3343 dev: false
3340 3344
  3345 + /es6-symbol@3.1.4:
  3346 + resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
  3347 + engines: {node: '>=0.12'}
  3348 + dependencies:
  3349 + d: 1.0.2
  3350 + ext: 1.7.0
  3351 + dev: false
  3352 +
3341 3353 /esbuild@0.17.19:
3342 3354 resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
3343 3355 engines: {node: '>=12'}
... ... @@ -3659,6 +3671,16 @@ packages:
3659 3671 - supports-color
3660 3672 dev: true
3661 3673
  3674 + /esniff@2.0.1:
  3675 + resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
  3676 + engines: {node: '>=0.10'}
  3677 + dependencies:
  3678 + d: 1.0.2
  3679 + es5-ext: 0.10.64
  3680 + event-emitter: 0.3.5
  3681 + type: 2.7.2
  3682 + dev: false
  3683 +
3662 3684 /espree@9.5.2:
3663 3685 resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
3664 3686 engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
... ... @@ -3709,6 +3731,17 @@ packages:
3709 3731 engines: {node: '>=0.10.0'}
3710 3732 dev: true
3711 3733
  3734 + /event-emitter@0.3.5:
  3735 + resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
  3736 + dependencies:
  3737 + d: 1.0.2
  3738 + es5-ext: 0.10.64
  3739 + dev: false
  3740 +
  3741 + /eventemitter3@4.0.7:
  3742 + resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
  3743 + dev: false
  3744 +
3712 3745 /eventemitter3@5.0.1:
3713 3746 resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
3714 3747 dev: true
... ... @@ -3743,6 +3776,12 @@ packages:
3743 3776 strip-final-newline: 3.0.0
3744 3777 dev: true
3745 3778
  3779 + /ext@1.7.0:
  3780 + resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
  3781 + dependencies:
  3782 + type: 2.7.2
  3783 + dev: false
  3784 +
3746 3785 /fast-deep-equal@3.1.3:
3747 3786 resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
3748 3787 dev: true
... ... @@ -3988,13 +4027,6 @@ packages:
3988 4027 which: 1.3.1
3989 4028 dev: true
3990 4029
3991   - /global@4.4.0:
3992   - resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
3993   - dependencies:
3994   - min-document: 2.19.0
3995   - process: 0.11.10
3996   - dev: false
3997   -
3998 4030 /globals@11.12.0:
3999 4031 resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
4000 4032 engines: {node: '>=4'}
... ... @@ -4206,10 +4238,6 @@ packages:
4206 4238 engines: {node: '>=12'}
4207 4239 dev: true
4208 4240
4209   - /individual@2.0.0:
4210   - resolution: {integrity: sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==}
4211   - dev: false
4212   -
4213 4241 /inflight@1.0.6:
4214 4242 resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
4215 4243 dependencies:
... ... @@ -4319,10 +4347,6 @@ packages:
4319 4347 engines: {node: '>=12'}
4320 4348 dev: true
4321 4349
4322   - /is-function@1.0.2:
4323   - resolution: {integrity: sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==}
4324   - dev: false
4325   -
4326 4350 /is-glob@4.0.3:
4327 4351 resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
4328 4352 engines: {node: '>=0.10.0'}
... ... @@ -4534,10 +4558,6 @@ packages:
4534 4558 resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
4535 4559 dev: false
4536 4560
4537   - /keycode@2.2.0:
4538   - resolution: {integrity: sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==}
4539   - dev: false
4540   -
4541 4561 /kind-of@6.0.3:
4542 4562 resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
4543 4563 engines: {node: '>=0.10.0'}
... ... @@ -4702,14 +4722,6 @@ packages:
4702 4722 yallist: 4.0.0
4703 4723 dev: true
4704 4724
4705   - /m3u8-parser@4.7.1:
4706   - resolution: {integrity: sha512-pbrQwiMiq+MmI9bl7UjtPT3AK603PV9bogNlr83uC+X9IoxqL5E4k7kU7fMQ0dpRgxgeSMygqUa0IMLQNXLBNA==}
4707   - dependencies:
4708   - '@babel/runtime': 7.22.6
4709   - '@videojs/vhs-utils': 3.0.5
4710   - global: 4.4.0
4711   - dev: false
4712   -
4713 4725 /magic-string@0.30.1:
4714 4726 resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==}
4715 4727 engines: {node: '>=12'}
... ... @@ -4837,12 +4849,6 @@ packages:
4837 4849 engines: {node: '>=12'}
4838 4850 dev: true
4839 4851
4840   - /min-document@2.19.0:
4841   - resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
4842   - dependencies:
4843   - dom-walk: 0.1.2
4844   - dev: false
4845   -
4846 4852 /min-indent@1.0.1:
4847 4853 resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
4848 4854 engines: {node: '>=4'}
... ... @@ -4880,36 +4886,18 @@ packages:
4880 4886 resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
4881 4887 dev: true
4882 4888
4883   - /mpd-parser@0.21.1:
4884   - resolution: {integrity: sha512-BxlSXWbKE1n7eyEPBnTEkrzhS3PdmkkKdM1pgKbPnPOH0WFZIc0sPOWi7m0Uo3Wd2a4Or8Qf4ZbS7+ASqQ49fw==}
4885   - hasBin: true
4886   - dependencies:
4887   - '@babel/runtime': 7.22.6
4888   - '@videojs/vhs-utils': 3.0.5
4889   - '@xmldom/xmldom': 0.7.13
4890   - global: 4.4.0
4891   - dev: false
4892   -
4893 4889 /ms@2.1.2:
4894 4890 resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
4895 4891
4896 4892 /ms@2.1.3:
4897 4893 resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
  4894 + requiresBuild: true
4898 4895 dev: true
4899 4896
4900 4897 /muggle-string@0.2.2:
4901 4898 resolution: {integrity: sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==}
4902 4899 dev: true
4903 4900
4904   - /mux.js@6.0.1:
4905   - resolution: {integrity: sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==}
4906   - engines: {node: '>=8', npm: '>=5'}
4907   - hasBin: true
4908   - dependencies:
4909   - '@babel/runtime': 7.22.6
4910   - global: 4.4.0
4911   - dev: false
4912   -
4913 4901 /mz@2.7.0:
4914 4902 resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
4915 4903 dependencies:
... ... @@ -4949,6 +4937,10 @@ packages:
4949 4937 dev: true
4950 4938 optional: true
4951 4939
  4940 + /next-tick@1.1.0:
  4941 + resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
  4942 + dev: false
  4943 +
4952 4944 /no-case@3.0.4:
4953 4945 resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
4954 4946 dependencies:
... ... @@ -5225,13 +5217,6 @@ packages:
5225 5217 engines: {node: '>= 6'}
5226 5218 dev: false
5227 5219
5228   - /pkcs7@1.0.4:
5229   - resolution: {integrity: sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==}
5230   - hasBin: true
5231   - dependencies:
5232   - '@babel/runtime': 7.22.6
5233   - dev: false
5234   -
5235 5220 /pluralize@8.0.0:
5236 5221 resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
5237 5222 engines: {node: '>=4'}
... ... @@ -5319,11 +5304,6 @@ packages:
5319 5304 engines: {node: '>= 0.8.0'}
5320 5305 dev: true
5321 5306
5322   - /process@0.11.10:
5323   - resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
5324   - engines: {node: '>= 0.6.0'}
5325   - dev: false
5326   -
5327 5307 /proxy-from-env@1.1.0:
5328 5308 resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
5329 5309 dev: false
... ... @@ -5533,18 +5513,6 @@ packages:
5533 5513 dependencies:
5534 5514 queue-microtask: 1.2.3
5535 5515
5536   - /rust-result@1.0.0:
5537   - resolution: {integrity: sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==}
5538   - dependencies:
5539   - individual: 2.0.0
5540   - dev: false
5541   -
5542   - /safe-json-parse@4.0.0:
5543   - resolution: {integrity: sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==}
5544   - dependencies:
5545   - rust-result: 1.0.0
5546   - dev: false
5547   -
5548 5516 /safe-regex-test@1.0.0:
5549 5517 resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
5550 5518 dependencies:
... ... @@ -6136,6 +6104,10 @@ packages:
6136 6104 engines: {node: '>=10'}
6137 6105 dev: true
6138 6106
  6107 + /type@2.7.2:
  6108 + resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
  6109 + dev: false
  6110 +
6139 6111 /typed-array-byte-offset@1.0.0:
6140 6112 resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
6141 6113 engines: {node: '>= 0.4'}
... ... @@ -6231,10 +6203,6 @@ packages:
6231 6203 punycode: 2.3.0
6232 6204 dev: true
6233 6205
6234   - /url-toolkit@2.2.5:
6235   - resolution: {integrity: sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==}
6236   - dev: false
6237   -
6238 6206 /util-deprecate@1.0.2:
6239 6207 resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
6240 6208 dev: true
... ... @@ -6246,38 +6214,6 @@ packages:
6246 6214 spdx-expression-parse: 3.0.1
6247 6215 dev: true
6248 6216
6249   - /video.js@7.20.3:
6250   - resolution: {integrity: sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==}
6251   - dependencies:
6252   - '@babel/runtime': 7.22.6
6253   - '@videojs/http-streaming': 2.14.3(video.js@7.20.3)
6254   - '@videojs/vhs-utils': 3.0.5
6255   - '@videojs/xhr': 2.6.0
6256   - aes-decrypter: 3.1.3
6257   - global: 4.4.0
6258   - keycode: 2.2.0
6259   - m3u8-parser: 4.7.1
6260   - mpd-parser: 0.21.1
6261   - mux.js: 6.0.1
6262   - safe-json-parse: 4.0.0
6263   - videojs-font: 3.2.0
6264   - videojs-vtt.js: 0.15.5
6265   - dev: false
6266   -
6267   - /videojs-flvjs-es6@1.0.1:
6268   - resolution: {integrity: sha512-wAI5ff2tZVW+uftTLyPmS38F4SHmMlxqBFOgXEBqMs2X0N4uIVQK0iCCv5XACXH+oc+mP70D23mJmT8KsoHx0g==}
6269   - dev: false
6270   -
6271   - /videojs-font@3.2.0:
6272   - resolution: {integrity: sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==}
6273   - dev: false
6274   -
6275   - /videojs-vtt.js@0.15.5:
6276   - resolution: {integrity: sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==}
6277   - dependencies:
6278   - global: 4.4.0
6279   - dev: false
6280   -
6281 6217 /vite-plugin-html@3.2.0(vite@4.3.9):
6282 6218 resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
6283 6219 peerDependencies:
... ... @@ -6507,6 +6443,101 @@ packages:
6507 6443 signal-exit: 4.1.0
6508 6444 dev: true
6509 6445
  6446 + /xgplayer-flv@3.0.14(core-js@3.31.1)(xgplayer@3.0.14):
  6447 + resolution: {integrity: sha512-9mSBUbbzkJhFjQOaU8SvnEzDj4Y9tkHsW0IaIxCDi/DlDcHzSubdiuuTVNf1A5cgUSTnFHxwDJtzqVm6FhmTeg==}
  6448 + peerDependencies:
  6449 + core-js: '>=3.12.1'
  6450 + xgplayer: '>=3.0.1'
  6451 + dependencies:
  6452 + core-js: 3.31.1
  6453 + eventemitter3: 4.0.7
  6454 + xgplayer: 3.0.14(core-js@3.31.1)
  6455 + xgplayer-streaming-shared: 3.0.14(core-js@3.31.1)
  6456 + xgplayer-transmuxer: 3.0.14(core-js@3.31.1)
  6457 + dev: false
  6458 +
  6459 + /xgplayer-hls@3.0.14(core-js@3.31.1)(xgplayer@3.0.14):
  6460 + resolution: {integrity: sha512-UiVDiDcIzQ6kiDZitbyXqRx5nX/Pi69S9Vfh5lc+6R8SsA2ZyvxWtGOQ6XfpZyXYHfl56JMbyNObOgMT1iRNLw==}
  6461 + peerDependencies:
  6462 + core-js: '>=3.12.1'
  6463 + xgplayer: 3.0.14
  6464 + dependencies:
  6465 + core-js: 3.31.1
  6466 + eventemitter3: 4.0.7
  6467 + xgplayer: 3.0.14(core-js@3.31.1)
  6468 + xgplayer-streaming-shared: 3.0.14(core-js@3.31.1)
  6469 + xgplayer-transmuxer: 3.0.14(core-js@3.31.1)
  6470 + dev: false
  6471 +
  6472 + /xgplayer-mp4-loader@3.0.14(core-js@3.31.1):
  6473 + resolution: {integrity: sha512-cCPH7I/i+saP5i+vivfnu7Bekxm1sS3JlTzaqX2crUL9a4MfWi/r7Yumqsn52lyQGyb+lGKOsvbHeR3wTwUx1w==}
  6474 + peerDependencies:
  6475 + core-js: '>=3.12.1'
  6476 + dependencies:
  6477 + core-js: 3.31.1
  6478 + eventemitter3: 4.0.7
  6479 + xgplayer-streaming-shared: 3.0.14(core-js@3.31.1)
  6480 + xgplayer-transmuxer: 3.0.14(core-js@3.31.1)
  6481 + dev: false
  6482 +
  6483 + /xgplayer-mp4@3.0.14(core-js@3.31.1)(xgplayer@3.0.14):
  6484 + resolution: {integrity: sha512-EEZ3KtG7JbOBL33P+Uv98PaIft9tI9zw2rfyS7Sip57hT/9tJ2az4qz9qNSRcrrlLTo0DTYGR/JzADu7l/IyUQ==}
  6485 + peerDependencies:
  6486 + core-js: '>=3.12.1'
  6487 + xgplayer: '>=3.0.0'
  6488 + dependencies:
  6489 + concat-typed-array: 1.0.2
  6490 + core-js: 3.31.1
  6491 + deepmerge: 2.2.1
  6492 + eventemitter3: 4.0.7
  6493 + xgplayer: 3.0.14(core-js@3.31.1)
  6494 + xgplayer-mp4-loader: 3.0.14(core-js@3.31.1)
  6495 + xgplayer-streaming-shared: 3.0.14(core-js@3.31.1)
  6496 + xgplayer-transmuxer: 3.0.14(core-js@3.31.1)
  6497 + dev: false
  6498 +
  6499 + /xgplayer-streaming-shared@3.0.14(core-js@3.31.1):
  6500 + resolution: {integrity: sha512-XBXNjnMfFDl15kQfXNgmAkaDqRdN0PhxVFBm7+TezillpTdLmqj+HD90F6BargdZVJ4I20/YHYdb9qBg+hUDhg==}
  6501 + peerDependencies:
  6502 + core-js: '>=3.12.1'
  6503 + dependencies:
  6504 + core-js: 3.31.1
  6505 + eventemitter3: 4.0.7
  6506 + dev: false
  6507 +
  6508 + /xgplayer-subtitles@3.0.14(core-js@3.31.1):
  6509 + resolution: {integrity: sha512-w6H1h+g3kOI477kv2QBRMZe3M/1dHLXttHBwq4LwKTPGVQ19fLIDGwkfn+HeKwe1ocGDaaq96bS+l+BadnP9TA==}
  6510 + peerDependencies:
  6511 + core-js: '>=3.12.1'
  6512 + dependencies:
  6513 + core-js: 3.31.1
  6514 + eventemitter3: 4.0.7
  6515 + dev: false
  6516 +
  6517 + /xgplayer-transmuxer@3.0.14(core-js@3.31.1):
  6518 + resolution: {integrity: sha512-lMS2EwuA6tToCC4NuyJ5Ax0UDaaWU/YuaSkI/Bsj+vHkEzO42vgi2EerSPr91Moz05KhG/+4Vt8qMKUVFjhGTw==}
  6519 + peerDependencies:
  6520 + core-js: '>=3.12.1'
  6521 + dependencies:
  6522 + '@babel/runtime': 7.22.6
  6523 + concat-typed-array: 1.0.2
  6524 + core-js: 3.31.1
  6525 + crypto-es: 1.2.7
  6526 + dev: false
  6527 +
  6528 + /xgplayer@3.0.14(core-js@3.31.1):
  6529 + resolution: {integrity: sha512-TPS77hUIcM1zVx6FSpGG+OzfMwjwxxWihd+YxVx82DQ22QK60v8TXWSZlWISbmS1+fAlFneesvXDjwy60tC37w==}
  6530 + peerDependencies:
  6531 + core-js: '>=3.12.1'
  6532 + dependencies:
  6533 + core-js: 3.31.1
  6534 + danmu.js: 1.1.13
  6535 + delegate: 3.2.0
  6536 + downloadjs: 1.4.7
  6537 + eventemitter3: 4.0.7
  6538 + xgplayer-subtitles: 3.0.14(core-js@3.31.1)
  6539 + dev: false
  6540 +
6510 6541 /xml-name-validator@4.0.0:
6511 6542 resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
6512 6543 engines: {node: '>=12'}
... ...
... ... @@ -70,6 +70,7 @@ export interface VideoOptionType {
70 70 videoUrl: string
71 71 channelId?: string
72 72 deviceId?: string
  73 + playProtocol?: number
73 74 }
74 75
75 76 export interface AlarmListOptionType {
... ...
... ... @@ -11,13 +11,13 @@ export interface VideoItemRecordType {
11 11 status: boolean
12 12 accessMode: number
13 13 playProtocol: number
14   - params: Params
  14 + params?: Params
15 15 videoUrl: string
16 16 }
17 17
18 18 export interface Params {
19   - channelNo: string
20   - deviceId: string
  19 + channelNo?: string
  20 + deviceId?: string
21 21 }
22 22
23 23 export interface VideoChannelPlayAddressType {
... ...
  1 +export { default as XGPlayer } from './src/index.vue'
... ...
  1 +<script setup lang="ts">
  2 +import Player, { Events } from 'xgplayer'
  3 +import { FlvPlugin } from 'xgplayer-flv'
  4 +import Mp4Plugin from 'xgplayer-mp4'
  5 +import { HlsPlugin } from 'xgplayer-hls'
  6 +import { computed, onMounted, onUnmounted, ref, shallowRef, toRaw, unref, watch } from 'vue'
  7 +import type PresetPlayer from 'xgplayer'
  8 +import type { IPlayerOptions } from 'xgplayer/es/player'
  9 +import 'xgplayer/dist/index.min.css'
  10 +import type { StreamType, XGPlayerProps } from './types'
  11 +import { isShareMode } from '@/utils/env'
  12 +import { getJwtToken, getShareJwtToken } from '@/utils/auth'
  13 +
  14 +const props = withDefaults(defineProps<XGPlayerProps>(), {
  15 + streamType: 'auto',
  16 + autoPlay: true,
  17 + config: () => ({}),
  18 +})
  19 +
  20 +const emits = defineEmits<{
  21 + (eventName: 'ready', player: PresetPlayer): void
  22 + (eventName: 'onUnmounted', player: PresetPlayer): void
  23 +}>()
  24 +
  25 +function getStreamTypeByUrl(url = ''): StreamType | undefined {
  26 + if (url.endsWith('.m3u8')) return 'hls'
  27 + else if (url.endsWith('.mp4')) return 'mp4'
  28 + else if (url.endsWith('.flv'))
  29 + return 'flv'
  30 + else return undefined
  31 +}
  32 +
  33 +const getPluginByStreamType = (): IPlayerOptions => {
  34 + const { url, withToken } = props
  35 + let { streamType } = props
  36 + streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType
  37 +
  38 + const liveConfig = {
  39 + targetLatency: 10,
  40 + maxLatency: 20,
  41 + disconnectTime: 0,
  42 + fetchOptions: withToken
  43 + ? {
  44 + headers: {
  45 + 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
  46 + },
  47 + }
  48 + : {},
  49 + }
  50 + const config: IPlayerOptions = {
  51 + flv: liveConfig,
  52 + hls: liveConfig,
  53 + }
  54 + switch (streamType) {
  55 + case 'hls':
  56 + config.plugins = [HlsPlugin]
  57 + break
  58 + case 'mp4':
  59 + config.plugins = [Mp4Plugin]
  60 + break
  61 + case 'flv':
  62 + config.plugins = [FlvPlugin]
  63 + break
  64 + }
  65 + return config
  66 +}
  67 +
  68 +const videoElRef = shallowRef<Nullable<HTMLDivElement>>()
  69 +
  70 +const playerRef = shallowRef<Nullable<PresetPlayer>>()
  71 +
  72 +const propsRef = ref<XGPlayerProps>({})
  73 +
  74 +const getPlayerConfig = computed<IPlayerOptions>(() => {
  75 + const { url, autoPlay, config } = props
  76 +
  77 + const basicConfig: IPlayerOptions = {
  78 + ...config,
  79 + ...propsRef,
  80 + url,
  81 + lang: 'zh',
  82 + isLive: true,
  83 + autoplay: autoPlay,
  84 + autoplayMuted: autoPlay,
  85 + ...getPluginByStreamType(),
  86 + }
  87 + return basicConfig
  88 +})
  89 +
  90 +function onDecodeError() {
  91 + console.warn('player happend decode error')
  92 + playerRef.value?.switchURL(props.url!)
  93 +}
  94 +
  95 +function initializePlayer() {
  96 + if (unref(playerRef)) {
  97 + playerRef.value?.destroy?.()
  98 + playerRef.value = null
  99 + }
  100 +
  101 + const config = toRaw(unref(getPlayerConfig))
  102 +
  103 + if (!unref(videoElRef)) return
  104 +
  105 + const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })))
  106 +
  107 + player.on(Events.READY, () => {
  108 + emits('ready', player)
  109 + })
  110 +
  111 + player.setEventsMiddleware({
  112 + error: (event, callback) => {
  113 + const code = (
  114 + event as unknown as {
  115 + error: MediaError
  116 + }
  117 + ).error.code
  118 + if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
  119 + if (!props.url)
  120 + return
  121 +
  122 + callback()
  123 + return
  124 + }
  125 +
  126 + if (code === MediaError.MEDIA_ERR_DECODE) {
  127 + // 视频流可以播放 中途解码失败重载
  128 + if (playerRef.value?.isPlaying)
  129 + onDecodeError()
  130 +
  131 + return
  132 + }
  133 +
  134 + callback()
  135 + },
  136 + })
  137 +}
  138 +
  139 +onMounted(() => {
  140 + initializePlayer()
  141 +})
  142 +
  143 +onUnmounted(() => {
  144 + emits('onUnmounted', unref(playerRef)!)
  145 + playerRef.value?.destroy?.()
  146 +})
  147 +
  148 +watch(
  149 + () => props.url,
  150 + () => {
  151 + initializePlayer()
  152 + },
  153 +)
  154 +
  155 +defineExpose({
  156 + getPlayerInstance: () => unref(playerRef),
  157 +})
  158 +</script>
  159 +
  160 +<template>
  161 + <div ref="videoElRef" />
  162 +</template>
... ...
  1 +import type { IPlayerOptions } from 'xgplayer/es/player'
  2 +
  3 +export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto'
  4 +export interface XGPlayerProps {
  5 + streamType?: StreamType
  6 + autoPlay?: boolean
  7 + url?: string
  8 + withToken?: boolean
  9 + config?: Omit<IPlayerOptions, 'url'>
  10 +}
... ...
1 1 import { load } from '@fingerprintjs/fingerprintjs'
  2 +import type { StreamType } from '@/components/Video/src/types'
  3 +import { FluoriteMideaProtocolEnum, VideoAccessModeEnum } from '@/enums/videoEnum'
  4 +import { getFlvPlayUrl, getStreamingPlayUrl, getVideoControlStart } from '@/api/video'
  5 +import type { VideoItemRecordType } from '@/api/video/model'
2 6
3 7 export enum VideoPlayerType {
4 8 m3u8 = 'application/x-mpegURL',
... ... @@ -45,3 +49,39 @@ export const getVideoTypeByUrl = (url: string) => {
45 49 }
46 50 }
47 51
  52 +export async function getPlayUrl(
  53 + params: VideoItemRecordType,
  54 +): Promise<Undefineable<{ url: string; type: StreamType }>> {
  55 + const { accessMode } = params
  56 + if (accessMode === VideoAccessModeEnum.ManuallyEnter) {
  57 + const { videoUrl } = params
  58 + if (params.videoUrl) {
  59 + const isRTSPPlay = isRtspProtocol(videoUrl)
  60 +
  61 + if (isRTSPPlay) {
  62 + const { getResult } = useFingerprint()
  63 + const fingerprint = await getResult()
  64 + return { url: getFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' }
  65 + }
  66 + else {
  67 + return { url: videoUrl, type: 'auto' }
  68 + }
  69 + }
  70 + }
  71 + else if (accessMode === VideoAccessModeEnum.GBT28181) {
  72 + const { deviceId, channelNo } = params?.params || {}
  73 + const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! })
  74 + return { url: result.data.flv, type: 'flv' }
  75 + }
  76 + else {
  77 + const { id, playProtocol } = params
  78 + const result = await getStreamingPlayUrl(id)
  79 + const type: StreamType
  80 + = playProtocol === FluoriteMideaProtocolEnum.FLV
  81 + ? 'flv'
  82 + : playProtocol === FluoriteMideaProtocolEnum.HLS
  83 + ? 'hls'
  84 + : 'auto'
  85 + return { url: result.data.url, type }
  86 + }
  87 +}
... ...
1   -import type { Plugin } from 'vue'
2   -import Video from './video.vue'
3   -
4 1 export enum VideoPlayerType {
5 2 m3u8 = 'application/x-mpegURL',
6 3 mp4 = 'video/mp4',
... ... @@ -8,14 +5,3 @@ export enum VideoPlayerType {
8 5 flv = 'video/x-flv',
9 6 }
10 7
11   -export const withInstall = <T>(component: T, alias?: string) => {
12   - const comp = component as any
13   - comp.install = (app: any) => {
14   - app.component(comp.name || comp.displayName, component)
15   - if (alias)
16   - app.config.globalProperties[alias] = component
17   - }
18   - return component as T & Plugin
19   -}
20   -
21   -export const BasicVideoPlay = withInstall(Video)
... ...
1   -<script lang="ts" setup>
2   -import type { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
3   -import videoJs from 'video.js'
4   -import 'video.js/dist/video-js.css'
5   -import type { CSSProperties } from 'vue'
6   -import { computed, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'
7   -import 'videojs-flvjs-es6'
8   -import { isNumber } from '@wry-smile/utils-is'
9   -import { getJwtToken, getShareJwtToken } from '@/utils/auth'
10   -import { isShareMode } from '@/utils/env'
11   -import { useDesign } from '@/hooks/useDesign'
12   -
13   -const props = withDefaults(
14   - defineProps<{
15   - options?: VideoJsPlayerOptions
16   - withToken?: boolean
17   - immediateInitOnMounted?: boolean
18   - }>(),
19   - {
20   - immediateInitOnMounted: true,
21   - },
22   -)
23   -
24   -const emit = defineEmits<{
25   - (event: 'ready', instance?: Nullable<VideoJsPlayer>): void
26   - (event: 'onUnmounted'): void
27   -}>()
28   -
29   -const { prefixCls } = useDesign('basic-video-play')
30   -
31   -const videoPlayEl = ref<HTMLVideoElement>()
32   -
33   -const videoPlayInstance = ref<Nullable<VideoJsPlayer>>()
34   -
35   -const getOptions = computed(() => {
36   - const { options, withToken } = props || {}
37   -
38   - const defaultOptions: VideoJsPlayerOptions & Recordable = {
39   - language: 'zh',
40   - muted: true,
41   - liveui: true,
42   - controls: true,
43   - techOrder: ['html5', 'flvjs'],
44   - flvjs: {
45   - mediaDataSource: {
46   - isLive: true,
47   - cors: true,
48   - hasAudio: false,
49   - withCredentials: false,
50   - },
51   - config: {
52   - headers: {
53   - ...(withToken
54   - ? {
55   - 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
56   - }
57   - : {}),
58   - },
59   - autoCleanupSourceBuffer: true,
60   - },
61   - },
62   - }
63   - return videoJs.mergeOptions(defaultOptions, options)
64   -})
65   -
66   -const getWidthHeight = computed(() => {
67   - let { width = 300, height = 150 } = unref(getOptions)
68   - width = isNumber(width) ? (`${width}px` as unknown as number) : width
69   - height = isNumber(height) ? (`${height}px` as unknown as number) : height
70   - return { width, height } as CSSProperties
71   -})
72   -
73   -const init = () => {
74   - if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose()
75   - videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
76   - emit('ready', unref(videoPlayInstance))
77   - })
78   -
79   - unref(videoPlayInstance)?.on('timeupdate', () => {
80   - if (!unref(videoPlayInstance)) return
81   -
82   - const differTime = unref(videoPlayInstance)!.buffered().end(0) - unref(videoPlayInstance)!.currentTime()
83   -
84   - if (differTime > 10)
85   - init()
86   - })
87   -}
88   -
89   -const customInit = (getOptionsFn: (optios: VideoJsPlayerOptions) => VideoJsPlayerOptions) => {
90   - return (videoPlayInstance.value = videoJs(
91   - unref(videoPlayEl)!,
92   - getOptionsFn(toRaw(unref(getOptions))),
93   - () => {
94   - emit('ready', unref(videoPlayInstance))
95   - },
96   - ))
97   -}
98   -
99   -onMounted(() => {
100   - props.immediateInitOnMounted && init()
101   -})
102   -
103   -onUnmounted(() => {
104   - videoPlayInstance.value = null
105   - emit('onUnmounted')
106   -})
107   -
108   -defineExpose({
109   - customInit,
110   - reloadPlayer: init,
111   - getInstance: () => unref(videoPlayInstance),
112   -})
113   -</script>
114   -
115   -<template>
116   - <div :class="prefixCls" class="vben-basic-video-play w-full h-full" :style="getWidthHeight">
117   - <video
118   - ref="videoPlayEl" class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-full !h-full"
119   - muted
120   - />
121   - </div>
122   -</template>
123   -
124   -<style lang="less">
125   -@prefix-cls: ~'@{namespace}-basic-video-play';
126   -
127   -.@{prefix-cls} {
128   - .vjs-error-display {
129   - .vjs-modal-dialog-content::after {
130   - content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
131   - }
132   - }
133   -}
134   -</style>
... ... @@ -29,6 +29,7 @@ enum VideoFormFieldsEnum {
29 29 VIDEO_FLAG = 'videoComponentFlag',
30 30 CHANNEL_ID = 'channelId',
31 31 DEVICE_ID = 'deviceId',
  32 + PLAY_PROTOCOL = 'playProtocol',
32 33 }
33 34
34 35 enum VideoFormFieldsNameEnum {
... ... @@ -37,6 +38,7 @@ enum VideoFormFieldsNameEnum {
37 38 VIDEO_URL = '视频地址',
38 39 CHANNEL_ID = '通道号',
39 40 DEVICE_ID = '设备id',
  41 + PLAY_PROTOCOL = '播放协议',
40 42 }
41 43
42 44 const loading = ref(false)
... ... @@ -58,6 +60,7 @@ const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
58 60 formModel[VideoFormFieldsEnum.VIDEO_ID] = null
59 61 formModel[VideoFormFieldsEnum.CHANNEL_ID] = null
60 62 formModel[VideoFormFieldsEnum.DEVICE_ID] = null
  63 + formModel[VideoFormFieldsEnum.PLAY_PROTOCOL] = null
61 64 },
62 65 }
63 66 },
... ... @@ -85,6 +88,7 @@ const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
85 88 formModel[VideoFormFieldsEnum.CHANNEL_ID] = accessMode === VideoAccessModeEnum.GBT28181 ? option?.params?.channelNo : null
86 89 formModel[VideoFormFieldsEnum.DEVICE_ID] = accessMode === VideoAccessModeEnum.GBT28181 ? option?.params?.deviceId : null
87 90 formModel[VideoFormFieldsEnum.VIDEO_FLAG] = true
  91 + formModel[VideoFormFieldsEnum.PLAY_PROTOCOL] = option?.playProtocol
88 92 },
89 93 }
90 94 },
... ... @@ -119,6 +123,12 @@ const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
119 123 component: ComponentEnum.INPUT,
120 124 ifShow: false,
121 125 },
  126 + {
  127 + field: VideoFormFieldsEnum.PLAY_PROTOCOL,
  128 + label: VideoFormFieldsNameEnum.PLAY_PROTOCOL,
  129 + component: ComponentEnum.INPUT_NUMBER,
  130 + ifShow: false,
  131 + },
122 132 ],
123 133
124 134 showActionButtonGroup: false,
... ...
1 1 <script setup lang="ts">
2 2 import { Spin } from 'ant-design-vue'
3   -import { computed, nextTick, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'
4   -import 'video.js/dist/video-js.css'
  3 +import { computed, nextTick, onMounted, onUnmounted, ref, unref } from 'vue'
5 4
6   -import type { VideoJsPlayerOptions } from 'video.js'
7   -import { BasicVideoPlay } from './component/index.ts'
8   -import { VideoPlayerType, getVideoTypeByUrl, isRtspProtocol, useFingerprint } from './component/config'
  5 +import { getPlayUrl, isRtspProtocol, useFingerprint } from './component/config'
9 6
10   -import { getJwtToken, getShareJwtToken } from '@/utils/auth'
11 7 import { isLightboxMode, isShareMode } from '@/utils/env'
12 8 import type { CreateComponentType } from '@/core/Library/types'
13   -import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl, getVideoControlStart } from '@/api/video'
  9 +import { closeFlvPlay } from '@/api/video'
14 10 import { useContentDataStore } from '@/store/modules/contentData'
15   -import { VideoAccessModeEnum } from '@/enums/videoEnum'
  11 +import { XGPlayer } from '@/components/Video/index.ts'
  12 +import type { VideoItemRecordType } from '@/api/video/model'
  13 +import type { StreamType } from '@/components/Video/src/types'
16 14
17 15 const props = defineProps<{
18 16 config: CreateComponentType
... ... @@ -24,13 +22,6 @@ const contentDataStore = useContentDataStore()
24 22 const { getResult } = useFingerprint()
25 23 const loading = ref(false)
26 24
27   -const getOptions = computed<VideoJsPlayerOptions>(() => {
28   - const { config } = props || {}
29   - const { cellBounds } = config || {}
30   - const { height, width } = cellBounds as any
31   - return { height, width }
32   -})
33   -
34 25 // 存储视频数据
35 26 const videoConfig = computed(() => {
36 27 return contentDataStore?.contentData.filter((item) => {
... ... @@ -41,62 +32,28 @@ const videoConfig = computed(() => {
41 32 // const loading = ref<boolean>(false)
42 33 const exampleVideoPlay = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'
43 34
44   -const basicVideoPlayEl = ref<Nullable<InstanceType<typeof BasicVideoPlay>>>(null)
45   -const withToken = ref(false)
46   -const playSource = ref<Record<'src' | 'type', string>>(
47   - {} as unknown as Record<'src' | 'type', string>,
48   -)
  35 +const playUrl = ref<string>()
  36 +const playType = ref<StreamType>()
49 37
50 38 // 数据绑定获取的url
51 39 const handleGetVideoPlay = async () => {
52 40 try {
53   - loading.value = true
54 41 const { dataSourceJson } = unref(videoConfig)[0] || {}
55 42 const { videoOption } = dataSourceJson || {}
56   - const { id, accessMode, videoUrl, deviceId, channelId } = videoOption || {}
57   - let type = getVideoTypeByUrl(videoUrl!)
58   - let playUrl = videoUrl
59   - // 判断是否是流媒体播放
60   - if (accessMode === VideoAccessModeEnum.Streaming && id) {
61   - const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!)
62   - playUrl = url
63   - playUrl && (type = getVideoTypeByUrl(playUrl!))
64   - }
65   - else if (accessMode === VideoAccessModeEnum.GBT28181 && deviceId && channelId) {
66   - const {
67   - data: { flv },
68   - } = await getVideoControlStart({ channelId, deviceId })
69   -
70   - playUrl = flv
71   - type = VideoPlayerType.flv
72   - }
73   -
74   - // 判断是否是rtsp播放
75   - if (isRtspProtocol(videoUrl!)) {
76   - const result = await getResult()
77   - const { visitorId } = result
78   - playUrl = getFlvPlayUrl(playUrl!, visitorId)
79   - withToken.value = true
80   - }
81   -
82   - playSource.value = {
83   - src: playUrl!,
84   - type,
85   - }
86   -
87   - const instance = unref(basicVideoPlayEl)?.customInit((options) => {
88   - if (unref(withToken)) {
89   - (options as any).flvjs.config.headers = {
90   - 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
91   - }
92   - }
93   - return {
94   - ...options,
95   - sources: [toRaw(unref(playSource))],
96   - } as VideoJsPlayerOptions
97   - })
98   -
99   - instance?.play()
  43 + const { id, accessMode, videoUrl, deviceId, channelId, playProtocol } = videoOption || {}
  44 +
  45 + const { type, url } = await getPlayUrl({
  46 + id: id!,
  47 + accessMode: accessMode!,
  48 + playProtocol: playProtocol!,
  49 + videoUrl: videoUrl!,
  50 + params: {
  51 + deviceId,
  52 + channelNo: channelId,
  53 + },
  54 + } as VideoItemRecordType) || {}
  55 + playUrl.value = url
  56 + playType.value = type
100 57 }
101 58 finally {
102 59 loading.value = false
... ... @@ -105,21 +62,9 @@ const handleGetVideoPlay = async () => {
105 62
106 63 // 默认播放
107 64 const handleSelectPreview = () => {
108   - // loading.value = false
109   - const instance = unref(basicVideoPlayEl)?.customInit((options) => {
110   - withToken.value = true
111   - if (unref(withToken)) {
112   - (options as any).flvjs.config.headers = {
113   - 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
114   - }
115   - }
116   - return {
117   - ...options,
118   - sources: [{ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay }],
119   - } as VideoJsPlayerOptions
120   - })
121   -
122   - instance?.play()
  65 + loading.value = false
  66 + playUrl.value = exampleVideoPlay
  67 + playType.value = 'auto'
123 68 }
124 69
125 70 onMounted(async () => {
... ... @@ -135,28 +80,26 @@ onUnmounted(async () => {
135 80 const { videoOption } = dataSourceJson || {}
136 81 const { videoUrl } = videoOption || {}
137 82 isRtspProtocol(videoUrl!) && closeFlvPlay(videoUrl!, visitorId)
138   - await nextTick()
139   - unref(basicVideoPlayEl)?.getInstance()?.dispose()
140 83 })
141 84 </script>
142 85
143 86 <template>
144   - <div class="w-full h-full flex justify-center items-center">
145   - <Spin :spinning="loading">
146   - <BasicVideoPlay
147   - ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken"
148   - :immediate-init-on-mounted="false"
149   - />
  87 + <div class="w-full h-full flex justify-center items-center video-container">
  88 + <Spin :spinning="loading" class="w-full h-full">
  89 + <XGPlayer auto-play :url="playUrl" :stream-type="playType" :config="{ width: '100%', height: '100%' }" />
150 90 </Spin>
151 91 </div>
152 92 </template>
153 93
154 94 <style lang="less" scoped>
155   -.video-spin {
156   - @apply w-full h-full;
157   -
158   - :deep(.ant-spin-container) {
159   - @apply w-full h-full;
  95 + .video-container {
  96 + :deep(.ant-spin-nested-loading) {
  97 + width: 100%;
  98 + height: 100%;
  99 + .ant-spin-container {
  100 + width: 100%;
  101 + height: 100%;
  102 + }
160 103 }
161   -}
  104 + }
162 105 </style>
... ...
... ... @@ -132,14 +132,14 @@ export class DataDynamicEffectHandler {
132 132 const { attr, enable } = data as DynamicActDataType
133 133 if (!enable) return
134 134 const { latestValue } = useLatestMessageValue(message.data, attr!)
135   - const { flag, record } = getMeetTheConditionsRange((data as DynamicActDataType).rangeList, latestValue)
  135 + const { flag, record } = getMeetTheConditionsRange((data as DynamicActDataType).rangeList, Number(latestValue))
136 136 const nodeEl = this.nodeUtils.getNodeForCell<SVGAElement>(cell)
137 137 if (flag) {
138 138 const { type } = record!
139 139 if (type === ActRangListItemTypeEnum.RUN) {
140 140 const element = (nodeEl?.querySelectorAll('path')?.[1] as SVGPathElement)
141 141 element.classList.add(ActAnimationName.FLOW)
142   - element.style.animationDuration = `${record?.flowSpeed || 1}s`
  142 + element.style.animationDuration = `${(record?.flowSpeed || 10) * 0.1}s`
143 143 }
144 144 else { (nodeEl?.querySelectorAll('path')?.[1] as SVGPathElement).classList.remove(ActAnimationName.FLOW) }
145 145 }
... ...
... ... @@ -3,3 +3,8 @@ export enum VideoAccessModeEnum {
3 3 Streaming = 1,
4 4 GBT28181 = 2,
5 5 }
  6 +
  7 +export enum FluoriteMideaProtocolEnum {
  8 + HLS = 2,
  9 + FLV = 4,
  10 +}
... ...
... ... @@ -17,7 +17,6 @@ interface ContentDataStoreType {
17 17 hasDesignAuth?: boolean
18 18 hasPerviewAuth?: boolean
19 19 isTemplateLink?: boolean
20   -
21 20 }
22 21
23 22 export const useContentDataStore = defineStore('app-content-data', {
... ...