From bfe6c6b71cca37ca45707538421b7893ef3e9cc6 Mon Sep 17 00:00:00 2001 From: z_yu <1534695664@qq.com> Date: Tue, 20 Sep 2022 14:55:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=AE=9E=E6=97=B6=E6=92=AD?= =?UTF-8?q?=E6=94=BEjsmpeg->jsmpeg-player?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jsmpeg-player/jsmpeg-player.vue | 679 ++++++++++++++++++ .../{ => jsmpeg-player}/jsmpeg/index.js | 0 .../jsmpeg/modules/audio-output/index.js | 0 .../jsmpeg/modules/audio-output/webaudio.js | 0 .../jsmpeg/modules/buffer.js | 24 +- .../jsmpeg/modules/decoder/decoder.js | 7 +- .../jsmpeg/modules/decoder/index.js | 0 .../jsmpeg/modules/decoder/mp2-wasm.js | 0 .../jsmpeg/modules/decoder/mp2.js | 3 +- .../jsmpeg/modules/decoder/mpeg1-wasm.js | 0 .../jsmpeg/modules/decoder/mpeg1.js | 7 +- .../jsmpeg/modules/demuxer/index.js | 0 .../jsmpeg/modules/demuxer/ts.js | 22 +- .../jsmpeg/modules/jsmpeg.js | 0 .../jsmpeg/modules/player.js | 30 +- .../jsmpeg/modules/renderer/canvas2d.js | 0 .../jsmpeg/modules/renderer/index.js | 0 .../jsmpeg/modules/renderer/webgl.js | 0 .../jsmpeg/modules/source/ajax-progressive.js | 0 .../jsmpeg/modules/source/ajax.js | 0 .../jsmpeg/modules/source/fetch.js | 0 .../jsmpeg/modules/source/index.js | 0 .../jsmpeg/modules/source/websocket.js | 8 +- .../jsmpeg/modules/video-element.js | 4 +- .../jsmpeg/modules/wasm-module.js | 5 +- .../jsmpeg/types/index.d.ts | 0 .../{ => jsmpeg-player}/jsmpeg/utils/index.js | 6 +- .../jsmpeg-player/styles/icon/iconfont.css | 70 ++ .../jsmpeg-player/styles/icon/iconfont.ttf | Bin 0 -> 6220 bytes .../jsmpeg-player/styles/icon/iconfont.woff | Bin 0 -> 3604 bytes .../jsmpeg-player/styles/icon/iconfont.woff2 | Bin 0 -> 3088 bytes .../jsmpeg-player/styles/icon/index.css | 19 + .../jsmpeg-player/styles/index.scss | 183 +++++ .../jsmpeg-player/styles/popover.scss | 100 +++ .../storeManage/warehouse3D/module/video.vue | 54 +- 35 files changed, 1136 insertions(+), 85 deletions(-) create mode 100644 src/components/jsmpeg-player/jsmpeg-player.vue rename src/components/{ => jsmpeg-player}/jsmpeg/index.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/audio-output/index.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/audio-output/webaudio.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/buffer.js (89%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/decoder/decoder.js (93%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/decoder/index.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/decoder/mp2-wasm.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/decoder/mp2.js (99%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/decoder/mpeg1-wasm.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/decoder/mpeg1.js (99%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/demuxer/index.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/demuxer/ts.js (94%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/jsmpeg.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/player.js (99%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/renderer/canvas2d.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/renderer/index.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/renderer/webgl.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/source/ajax-progressive.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/source/ajax.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/source/fetch.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/source/index.js (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/source/websocket.js (98%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/video-element.js (98%) rename src/components/{ => jsmpeg-player}/jsmpeg/modules/wasm-module.js (98%) rename src/components/{ => jsmpeg-player}/jsmpeg/types/index.d.ts (100%) rename src/components/{ => jsmpeg-player}/jsmpeg/utils/index.js (93%) create mode 100644 src/components/jsmpeg-player/styles/icon/iconfont.css create mode 100644 src/components/jsmpeg-player/styles/icon/iconfont.ttf create mode 100644 src/components/jsmpeg-player/styles/icon/iconfont.woff create mode 100644 src/components/jsmpeg-player/styles/icon/iconfont.woff2 create mode 100644 src/components/jsmpeg-player/styles/icon/index.css create mode 100644 src/components/jsmpeg-player/styles/index.scss create mode 100644 src/components/jsmpeg-player/styles/popover.scss diff --git a/src/components/jsmpeg-player/jsmpeg-player.vue b/src/components/jsmpeg-player/jsmpeg-player.vue new file mode 100644 index 0000000..5045dac --- /dev/null +++ b/src/components/jsmpeg-player/jsmpeg-player.vue @@ -0,0 +1,679 @@ + + + + + diff --git a/src/components/jsmpeg/index.js b/src/components/jsmpeg-player/jsmpeg/index.js similarity index 100% rename from src/components/jsmpeg/index.js rename to src/components/jsmpeg-player/jsmpeg/index.js diff --git a/src/components/jsmpeg/modules/audio-output/index.js b/src/components/jsmpeg-player/jsmpeg/modules/audio-output/index.js similarity index 100% rename from src/components/jsmpeg/modules/audio-output/index.js rename to src/components/jsmpeg-player/jsmpeg/modules/audio-output/index.js diff --git a/src/components/jsmpeg/modules/audio-output/webaudio.js b/src/components/jsmpeg-player/jsmpeg/modules/audio-output/webaudio.js similarity index 100% rename from src/components/jsmpeg/modules/audio-output/webaudio.js rename to src/components/jsmpeg-player/jsmpeg/modules/audio-output/webaudio.js diff --git a/src/components/jsmpeg/modules/buffer.js b/src/components/jsmpeg-player/jsmpeg/modules/buffer.js similarity index 89% rename from src/components/jsmpeg/modules/buffer.js rename to src/components/jsmpeg-player/jsmpeg/modules/buffer.js index af22be3..1158a03 100644 --- a/src/components/jsmpeg/modules/buffer.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/buffer.js @@ -1,4 +1,3 @@ -/* eslint-disable */ 'use strict' export default class BitBuffer { /** @type {Uint8Array} */ @@ -75,7 +74,8 @@ export default class BitBuffer { // Calculate total byte length if (isArrayOfBuffers) { - // let totalLength = 0 + // eslint-disable-next-line + let totalLength = 0 for (let i = 0; i < buffers.length; i++) { totalLength += buffers[i].byteLength } @@ -114,9 +114,12 @@ export default class BitBuffer { findNextStartCode() { for (let i = (this.index + 7) >> 3; i < this.byteLength; i++) { if ( - this.bytes[i] === 0x00 && - this.bytes[i + 1] === 0x00 && - this.bytes[i + 2] === 0x01 + // eslint-disable-next-line + this.bytes[i] == 0x00 && + // eslint-disable-next-line + this.bytes[i + 1] == 0x00 && + // eslint-disable-next-line + this.bytes[i + 2] == 0x01 ) { this.index = (i + 4) << 3 return this.bytes[i + 3] @@ -128,12 +131,14 @@ export default class BitBuffer { findStartCode(code) { let current = 0 + // eslint-disable-next-line while (true) { current = this.findNextStartCode() if (current === code || current === -1) { return current } } + // eslint-disable-next-line return -1 } @@ -141,9 +146,12 @@ export default class BitBuffer { const i = (this.index + 7) >> 3 return ( i >= this.byteLength || - (this.bytes[i] === 0x00 && - this.bytes[i + 1] === 0x00 && - this.bytes[i + 2] === 0x01) + // eslint-disable-next-line + (this.bytes[i] == 0x00 && + // eslint-disable-next-line + this.bytes[i + 1] == 0x00 && + // eslint-disable-next-line + this.bytes[i + 2] == 0x01) ) } diff --git a/src/components/jsmpeg/modules/decoder/decoder.js b/src/components/jsmpeg-player/jsmpeg/modules/decoder/decoder.js similarity index 93% rename from src/components/jsmpeg/modules/decoder/decoder.js rename to src/components/jsmpeg-player/jsmpeg/modules/decoder/decoder.js index 7caf457..64ed3f4 100644 --- a/src/components/jsmpeg/modules/decoder/decoder.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/decoder/decoder.js @@ -1,7 +1,6 @@ -/* eslint-disable */ -import WebAudioOut from '../audio-output/webaudio' -import CanvasRenderer from '../renderer/canvas2d' -import WebGLRenderer from '../renderer/webgl' +// import WebAudioOut from '../audio-output/webaudio' +// import CanvasRenderer from '../renderer/canvas2d' +// import WebGLRenderer from '../renderer/webgl' export default class BaseDecoder { /** diff --git a/src/components/jsmpeg/modules/decoder/index.js b/src/components/jsmpeg-player/jsmpeg/modules/decoder/index.js similarity index 100% rename from src/components/jsmpeg/modules/decoder/index.js rename to src/components/jsmpeg-player/jsmpeg/modules/decoder/index.js diff --git a/src/components/jsmpeg/modules/decoder/mp2-wasm.js b/src/components/jsmpeg-player/jsmpeg/modules/decoder/mp2-wasm.js similarity index 100% rename from src/components/jsmpeg/modules/decoder/mp2-wasm.js rename to src/components/jsmpeg-player/jsmpeg/modules/decoder/mp2-wasm.js diff --git a/src/components/jsmpeg/modules/decoder/mp2.js b/src/components/jsmpeg-player/jsmpeg/modules/decoder/mp2.js similarity index 99% rename from src/components/jsmpeg/modules/decoder/mp2.js rename to src/components/jsmpeg-player/jsmpeg/modules/decoder/mp2.js index 85b6ba0..4c9c3e2 100644 --- a/src/components/jsmpeg/modules/decoder/mp2.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/decoder/mp2.js @@ -107,7 +107,8 @@ export default class MP2 extends BaseDecoder { bitrateIndex += 14 } const padding = this.bits.read(1) - // const privat = this.bits.read(1) + // const privat = + this.bits.read(1) const mode = this.bits.read(2) // Parse the mode_extension, set up the stereo bound diff --git a/src/components/jsmpeg/modules/decoder/mpeg1-wasm.js b/src/components/jsmpeg-player/jsmpeg/modules/decoder/mpeg1-wasm.js similarity index 100% rename from src/components/jsmpeg/modules/decoder/mpeg1-wasm.js rename to src/components/jsmpeg-player/jsmpeg/modules/decoder/mpeg1-wasm.js diff --git a/src/components/jsmpeg/modules/decoder/mpeg1.js b/src/components/jsmpeg-player/jsmpeg/modules/decoder/mpeg1.js similarity index 99% rename from src/components/jsmpeg/modules/decoder/mpeg1.js rename to src/components/jsmpeg-player/jsmpeg/modules/decoder/mpeg1.js index 898826d..68d760e 100644 --- a/src/components/jsmpeg/modules/decoder/mpeg1.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/decoder/mpeg1.js @@ -1,4 +1,3 @@ -/* eslint-disable */ import { Fill, Now } from '../../utils' import BitBuffer from '../buffer' import BaseDecoder from './decoder' @@ -62,7 +61,8 @@ export default class MPEG1 extends BaseDecoder { } if (this.bits.findStartCode(MPEG1.START.PICTURE) === -1) { - const bufferedBytes = this.bits.byteLength - (this.bits.index >> 3) + // const bufferedBytes = + this.bits.byteLength - (this.bits.index >> 3) return false } @@ -107,7 +107,9 @@ export default class MPEG1 extends BaseDecoder { if (this.destination) { this.destination.resize(newWidth, newHeight) + // eslint-disable-next-line this.resolution.width = w + // eslint-disable-next-line this.resolution.height = h this.options.onResolutionDecode?.(newWidth, newHeight) } @@ -785,6 +787,7 @@ export default class MPEG1 extends BaseDecoder { // Decode AC coefficients (+DC for non-intra) let level = 0 + // eslint-disable-next-line while (true) { let run = 0 const coeff = this.readHuffman(MPEG1.DCT_COEFF) diff --git a/src/components/jsmpeg/modules/demuxer/index.js b/src/components/jsmpeg-player/jsmpeg/modules/demuxer/index.js similarity index 100% rename from src/components/jsmpeg/modules/demuxer/index.js rename to src/components/jsmpeg-player/jsmpeg/modules/demuxer/index.js diff --git a/src/components/jsmpeg/modules/demuxer/ts.js b/src/components/jsmpeg-player/jsmpeg/modules/demuxer/ts.js similarity index 94% rename from src/components/jsmpeg/modules/demuxer/ts.js rename to src/components/jsmpeg-player/jsmpeg/modules/demuxer/ts.js index b142fa7..aea0e60 100644 --- a/src/components/jsmpeg/modules/demuxer/ts.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/demuxer/ts.js @@ -1,9 +1,8 @@ -/* eslint-disable */ import BitBuffer from '../buffer' -import MP2 from '../decoder/mp2' -import MP2WASM from '../decoder/mp2-wasm' -import MPEG1 from '../decoder/mpeg1' -import MPEG1WASM from '../decoder/mpeg1-wasm' +// import MP2 from '../decoder/mp2' +// import MP2WASM from '../decoder/mp2-wasm' +// import MPEG1 from '../decoder/mpeg1' +// import MPEG1WASM from '../decoder/mpeg1-wasm' export default class TS { /** @type {BitBuffer} */ @@ -41,6 +40,7 @@ export default class TS { this.bits = new BitBuffer(buffer) } + // eslint-disable-next-line while (this.bits.has(188 << 3) && this.parsePacket()) {} const leftoverCount = this.bits.byteLength - (this.bits.index >> 3) @@ -58,13 +58,17 @@ export default class TS { } const end = (this.bits.index >> 3) + 187 - const transportError = this.bits.read(1) + // const transportError = + this.bits.read(1) const payloadStart = this.bits.read(1) - const transportPriority = this.bits.read(1) + // const transportPriority = + this.bits.read(1) const pid = this.bits.read(13) - const transportScrambling = this.bits.read(2) + // const transportScrambling = + this.bits.read(2) const adaptationField = this.bits.read(2) - const continuityCounter = this.bits.read(4) + // const continuityCounter = + this.bits.read(4) // If this is the start of a new payload; signal the end of the previous // frame, if we didn't do so already. diff --git a/src/components/jsmpeg/modules/jsmpeg.js b/src/components/jsmpeg-player/jsmpeg/modules/jsmpeg.js similarity index 100% rename from src/components/jsmpeg/modules/jsmpeg.js rename to src/components/jsmpeg-player/jsmpeg/modules/jsmpeg.js diff --git a/src/components/jsmpeg/modules/player.js b/src/components/jsmpeg-player/jsmpeg/modules/player.js similarity index 99% rename from src/components/jsmpeg/modules/player.js rename to src/components/jsmpeg-player/jsmpeg/modules/player.js index ebaf08b..5adc601 100644 --- a/src/components/jsmpeg/modules/player.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/player.js @@ -1,14 +1,12 @@ - -/* eslint-disable */ import Renderer from './renderer' -import { Base64ToArrayBuffer, saveToLocal, Now } from '../utils' +import { Base64ToArrayBuffer, download, Now } from '../utils' import AudioOutput from './audio-output' import Decoder from './decoder' import Demuxer from './demuxer' import Source from './source' import WASM from './wasm-module' -import AjaxSource from './source/ajax' -import AjaxProgressiveSource from './source/ajax-progressive' +// import AjaxSource from './source/ajax' +// import AjaxProgressiveSource from './source/ajax-progressive' import WSSource from './source/websocket' import BitBuffer from './buffer' @@ -191,6 +189,7 @@ export default class Player { const options = this.options this.url = url if (options.source) { + // eslint-disable-next-line this.source = new options.source(url, options) options.streaming = !!this.source.streaming } else if (url.match(/^wss?:\/\//)) { @@ -335,7 +334,8 @@ export default class Player { if ((Math.abs(angle) / 90) % 2 === 1) { // 如果是90整数倍，表示为垂直状态 const containerBound = this.contianer.getBoundingClientRect() - const canvasBound = canvas.getBoundingClientRect() + // const canvasBound = + canvas.getBoundingClientRect() if (canvas.width > canvas.height) { // 宽>高，取容器高度作为canvas最大宽度 @@ -357,14 +357,14 @@ export default class Player { * @author 刘灿民 * @param {string} name */ - snapshot(name = 'JSMPeg') { + snapshot(name = 'jsmpeg') { if (this.canvas) { const mime = 'image/png' const url = this.canvas.toDataURL(mime) - saveToLocal( + download( url.replace(mime, 'image/octet-stream'), - `${name}_截图_${new Date().toLocaleTimeString()}.png`, + `${name}_snapshot_${Date.now()}.png`, mime ) } @@ -390,7 +390,7 @@ export default class Player { this.recorder.stream instanceof MediaStream ) { this.recorder.mediaRecorder.stop() - saveToLocal( + download( this.recorder.chunks, `${this.recorder.saveName}.webm`, 'video/webm;codecs=vp9' @@ -400,7 +400,7 @@ export default class Player { this.recorder.mode === 'ws' && this.recorder.chunks instanceof Array ) { - saveToLocal( + download( this.recorder.chunks, `${this.recorder.saveName}.ts`, 'video/MP2T' @@ -688,11 +688,9 @@ export default class Player { this.options.onEnded(this) } } - } - - // If there's not enough data and the source is not completed, we have - // just stalled. - else if (notEnoughData && this.options.onStalled) { + } else if (notEnoughData && this.options.onStalled) { + // If there's not enough data and the source is not completed, we have + // just stalled. this.options.onStalled(this) } } diff --git a/src/components/jsmpeg/modules/renderer/canvas2d.js b/src/components/jsmpeg-player/jsmpeg/modules/renderer/canvas2d.js similarity index 100% rename from src/components/jsmpeg/modules/renderer/canvas2d.js rename to src/components/jsmpeg-player/jsmpeg/modules/renderer/canvas2d.js diff --git a/src/components/jsmpeg/modules/renderer/index.js b/src/components/jsmpeg-player/jsmpeg/modules/renderer/index.js similarity index 100% rename from src/components/jsmpeg/modules/renderer/index.js rename to src/components/jsmpeg-player/jsmpeg/modules/renderer/index.js diff --git a/src/components/jsmpeg/modules/renderer/webgl.js b/src/components/jsmpeg-player/jsmpeg/modules/renderer/webgl.js similarity index 100% rename from src/components/jsmpeg/modules/renderer/webgl.js rename to src/components/jsmpeg-player/jsmpeg/modules/renderer/webgl.js diff --git a/src/components/jsmpeg/modules/source/ajax-progressive.js b/src/components/jsmpeg-player/jsmpeg/modules/source/ajax-progressive.js similarity index 100% rename from src/components/jsmpeg/modules/source/ajax-progressive.js rename to src/components/jsmpeg-player/jsmpeg/modules/source/ajax-progressive.js diff --git a/src/components/jsmpeg/modules/source/ajax.js b/src/components/jsmpeg-player/jsmpeg/modules/source/ajax.js similarity index 100% rename from src/components/jsmpeg/modules/source/ajax.js rename to src/components/jsmpeg-player/jsmpeg/modules/source/ajax.js diff --git a/src/components/jsmpeg/modules/source/fetch.js b/src/components/jsmpeg-player/jsmpeg/modules/source/fetch.js similarity index 100% rename from src/components/jsmpeg/modules/source/fetch.js rename to src/components/jsmpeg-player/jsmpeg/modules/source/fetch.js diff --git a/src/components/jsmpeg/modules/source/index.js b/src/components/jsmpeg-player/jsmpeg/modules/source/index.js similarity index 100% rename from src/components/jsmpeg/modules/source/index.js rename to src/components/jsmpeg-player/jsmpeg/modules/source/index.js diff --git a/src/components/jsmpeg/modules/source/websocket.js b/src/components/jsmpeg-player/jsmpeg/modules/source/websocket.js similarity index 98% rename from src/components/jsmpeg/modules/source/websocket.js rename to src/components/jsmpeg-player/jsmpeg/modules/source/websocket.js index 969e43c..b9ec53d 100644 --- a/src/components/jsmpeg/modules/source/websocket.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/source/websocket.js @@ -1,8 +1,6 @@ - -/* eslint-disable */ 'use strict' -import TS from '../demuxer/ts' +// import TS from '../demuxer/ts' export default class WSSource { timer = { @@ -81,7 +79,7 @@ export default class WSSource { clearTimeout(this.reconnectTimeoutId) this.reconnectTimeoutId = 0 this.shouldAttemptReconnect = false - this.socket && this.socket.close() + this.socket?.close() if (this.socket) { this.socket.onmessage = null this.socket.onopen = null @@ -157,7 +155,7 @@ export default class WSSource { } onError(err) { - // console.error(err) + console.error(err) } onClose() { diff --git a/src/components/jsmpeg/modules/video-element.js b/src/components/jsmpeg-player/jsmpeg/modules/video-element.js similarity index 98% rename from src/components/jsmpeg/modules/video-element.js rename to src/components/jsmpeg-player/jsmpeg/modules/video-element.js index 439ccad..724d3e5 100644 --- a/src/components/jsmpeg/modules/video-element.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/video-element.js @@ -1,4 +1,3 @@ -/* eslint-disable */ import Player from './player' export default class VideoElement { @@ -6,7 +5,8 @@ export default class VideoElement { const url = element.dataset.url if (!url) { - throw 'VideoElement has no `data-url` attribute' + const error = { message: 'VideoElement has no `data-url` attribute' } + throw error } // Setup the div container, canvas and play button diff --git a/src/components/jsmpeg/modules/wasm-module.js b/src/components/jsmpeg-player/jsmpeg/modules/wasm-module.js similarity index 98% rename from src/components/jsmpeg/modules/wasm-module.js rename to src/components/jsmpeg-player/jsmpeg/modules/wasm-module.js index bf85624..214dff5 100644 --- a/src/components/jsmpeg/modules/wasm-module.js +++ b/src/components/jsmpeg-player/jsmpeg/modules/wasm-module.js @@ -1,5 +1,3 @@ - -/* eslint-disable */ import Source from './source' export default class WASM { @@ -103,6 +101,7 @@ export default class WASM { function readVarUint() { let ret = 0 let mul = 1 + // eslint-disable-next-line while (1) { const byte = bytes[next++] ret += (byte & 0x7f) * mul @@ -134,7 +133,7 @@ export default class WASM { // Make sure we have a dylink section next = 9 - const sectionSize = readVarUint() + readVarUint() if (!matchNextBytes([6, 'd', 'y', 'l', 'i', 'n', 'k'])) { console.warn('JSMpeg: No dylink section found in WASM') return null diff --git a/src/components/jsmpeg/types/index.d.ts b/src/components/jsmpeg-player/jsmpeg/types/index.d.ts similarity index 100% rename from src/components/jsmpeg/types/index.d.ts rename to src/components/jsmpeg-player/jsmpeg/types/index.d.ts diff --git a/src/components/jsmpeg/utils/index.js b/src/components/jsmpeg-player/jsmpeg/utils/index.js similarity index 93% rename from src/components/jsmpeg/utils/index.js rename to src/components/jsmpeg-player/jsmpeg/utils/index.js index 1f98000..79b43ca 100644 --- a/src/components/jsmpeg/utils/index.js +++ b/src/components/jsmpeg-player/jsmpeg/utils/index.js @@ -33,11 +33,7 @@ export function Base64ToArrayBuffer(base64) { * @param {string} param.mimeType 文件mime类型 * @returns */ -export function saveToLocal( - blob, - name = 'JSMpeg_' + Date.now(), - mimeType = '' -) { +export function download(blob, name = 'JSMpeg_' + Date.now(), mimeType = '') { if (!blob) return const a = document.createElement('a') diff --git a/src/components/jsmpeg-player/styles/icon/iconfont.css b/src/components/jsmpeg-player/styles/icon/iconfont.css new file mode 100644 index 0000000..10bf65c --- /dev/null +++ b/src/components/jsmpeg-player/styles/icon/iconfont.css @@ -0,0 +1,70 @@ +@font-face { + font-family: 'jsmpeg-player'; /* Project id 2580924 */ + src: url('iconfont.woff2?t=1660312070074') format('woff2'), + url('iconfont.woff?t=1660312070074') format('woff'), + url('iconfont.ttf?t=1660312070074') format('truetype'); +} + +.jsmpeg-player { + font-family: 'jsmpeg-player' !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.jm-icon-close:before { + content: '\e661'; +} + +.jm-icon-settings:before { + content: '\e892'; +} + +.jm-icon-video-play:before { + content: '\e600'; +} + +.jm-icon-more:before { + content: '\e601'; +} + +.jm-icon-screenshots:before { + content: '\e602'; +} + +.jm-icon-video-pause:before { + content: '\e603'; +} + +.jm-icon-recording:before { + content: '\e663'; +} + +.jm-icon-rotate-right:before { + content: '\e698'; +} + +.jm-icon-rotate-left:before { + content: '\e699'; +} + +.jm-icon-stop:before { + content: '\e611'; +} + +.jm-icon-fullscreen-exit:before { + content: '\e65d'; +} + +.jm-icon-fullscreen:before { + content: '\e65e'; +} + +.jm-icon-muted:before { + content: '\e62d'; +} + +.jm-icon-volume:before { + content: '\e62e'; +} diff --git a/src/components/jsmpeg-player/styles/icon/iconfont.ttf b/src/components/jsmpeg-player/styles/icon/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..d2effda4d0ed23c6e770545cc6af8d27004a67b4 GIT binary patch literal 6220 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 literal 0 HcmV?d00001 diff --git a/src/components/jsmpeg-player/styles/icon/iconfont.woff b/src/components/jsmpeg-player/styles/icon/iconfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..4fa8d5541059b45d88b344f258f1b740e7085c36 GIT binary patch literal 3604 zcmY*bcRbYb|Nk7$$li_^+iw zzw7b)e*gHs9*^hy{dzthul0Dm|9HRr479WW5I`^*CV=wa&8GYR{Gb27rfp)X4ger> zf_jsH2iyt#fd(cLaDt{m;QxS7X1;H0=Yn)6Xt4y|0RTjgoW&GyXy*VF!Pfx*3QYi@ zlXNP(Omx+^+hhp|N5D%|`OC!J_$M-^1 zWcgApSv^1Z+QY)aPHBiSPY@bLJtTk^8P$=0?sA$QO}Hdo)MKGVE(Ra_#C?*kByN~Z zXL?O|p2*mI+@nTto3G6}eeMeHI^{Oz6sQ5_zvz{O26e%3cPbK^`UF;lc4oM0&C{@l z9r4uGzR>cJe2}{3fD$Ug{_(Q+Rf$h8|9hvc{0$Mf&va1-OVgZ{ZImnnXMf1fN&Dc^ z;h$+{mm1b8Ba)Iph`^wc7C6Yr1J?^wCyc>lfda{n4G#ULRl1o12XdOER^u zG<+v*m=`gW0TfZUN=hEQ0bgqYxoA%64Djm2dKw9Nn1n_45dQ|3D%Wf3D8q!q7+muY z3a0;v#T71qsxAxg_%TKN)#`b>BA%v;{Mm)|nQWlQJsv(pwVAg9h?Udq6Up#K*$=v! z^}vq|{EIKMYPwFwP73Un$s-;g6d-xv36DwI8Blx77tEv=SNv?e@Wd-Lk~5*5iuc_e z^6|ZgZj-wcpD{76g^yv8)5h7Z{$E@gEr>dm_%o#~=^(?|ndoed=FD$50>d0S;G=L$ z{bF6psnGEInsGehCrtP4x4eT3Z`)vcD7mV~yX>LSFv3)>@ ziwl;9{m|7dgGf8mj%_)j)SoTY1w2}?C{o*I4rnO1Ns3WdfTA2S^RrX8TG5}iZwNkg zQ-wNP)&I@EpAqNgfGJy9W@6ngYnf$++28tAU^T|351|I50@adgy8?T^+Pv6=rZXc9 zjP<=775U-^{6nd_BeP;VR%N^j<%dm}%7$TX#WGDblCo;6f;3_*ib~L>4?$(h4}AsE zet&8`V@+)9!<%ia%U-VM-G~pw61nTesDE;&zQKdsO18yP>_g>}M5Ja(0)IoNuwvaZ z-dzGQdu3V*#y(ZemOib4Nqf~g0zT@rFLkG!WV(mm@{y+rA6``w{nft3w*{C+96}t#rF#M?XqO{u!D&a`Kur`f;slV+Y=a*}BCSvr4qeYb5Q+Fj`de^Rv z$@qcdk-7$>5PqyUT4Eom$E2X_=kK`BP2uA%6+4}BXWm?$InkQ8eDuOzcBO6=M0VZ1 z5v-8-8d=YwS1dRV@+QjDSOrq?r#+>57AtaAQB_2=J=WPgay$Xx@4>`v}tAy0}y^_*g`5>s;YeAZV| zHC)dl4}jPZJp0Zp_8~Ecd)3+sd6|51k^OBpsSnck4F~M=Y*ow-JK&uoX)aF~odG|{ zbMB|%e3EW)!c#q!?4=cHp`35u3=bbYNC%ig&Eeq z^tvb4--3BMmLGQ5v+g}5+Sb;-rC8ueyH`QSD-$M7Z1j#g(2h6o=o?quZIL02_{Ho7 z&1Pir@g-{;)vUow*z;^elpjOWZTy8&Qh(kZ$)~Qqy%c!^_Ui_FLs}Et;^x%8(b?w0O`VKfqv75xCsq+= z7Q$)bL$xIVR;X_3oTu0n%b!KwG1x@yoEuE}xgTI4m3Y~%s8Ft^(CgRhXOt>rl~o9T zRPiI;l7;>UF(#5X=E$3OpA9t}ASM|yH0s7McbLZVQn$n? zc;7FUuq3$oF$Ush7KGAL^#x8G1jH}Z2P}Q%%%=rNNGMbMyh4#ia4N^$XlU~(RmNX! zOMYgR8MfYPHu$JI`~$wtxko5DJzy$!&`K+PcDj#!-SeZ2>mVs>DT+tvX1?$b!CcPn zsI#eHuUB=4e!cDmtIgmcsSrq|LK6(#PDiKGVm9{bXsvtmF2Zf$>tMYkjJu+O5m#@$ zT)5b*;qtcp&+|8e#}au;cCV6xs;p+Yz=nnPa0t18D;DTc3yVGx}}-s}cmGvFBtsG*_6(F^#g4F$r75D7u!M=Wx=OG~qZ=qfe`Q>_qX0qY{N*>N)!H zH!^bY7o#&Xe#Mn-!;clmy240I@zv~H@O%|ni_bnyBSZaK3cK4H+>A41WY^#>GTZSU z835TD_w5n|6475_Rf-wHcGWdLSmwqQ(m6#P+~W*Fe4yPjZMo8F*Es||5|c?uF0RAw za*^s4ZRF5$7phQMt{`hjs_8cS->?7T@GRqrXUG;#TwyjTYOHVu_o`Q_{gj_VS%df9 zUpyOxgiEQi4~P7vaT8XiKiQVeIFPGqG8(vwA(!7dKbDwVsCB*#{c_+}wMim!t>%pF zOcm@m?2J9PAJ)N=u!AM$9V*o3XM#P;f|f8l?`8WLCDMapz6Q-Nf<(1%@`)I|Jc6a~ z?`l{KB+rNE>JDDTAosI$uImL=J_FDY)BAlsLucJGKZ6!3Dr%}ICONz}cvI=uJ}GcK zqJG}>rZ!_aYp{jl8D3z0P9D~u;-H^;wuBq?Z^!469UB-#eJr7C(GKNaeGtZI(0Mn) zNjPGfdxGfVfmKBL4evBX2VDn=L|#$lch1_FEqa~Z#d>fUyNcdHIXjGUYeg857K@>*>5UGcNajUmX-=) z-XjLInTh-fwU7t|0>(%TkhK6Rgz5y71382Ch%m%Z;xZBedz%{Or98V15$b5n|)DV>ur_ zoiCygQEyWkf^O0Zsj<_4Gc@n#f*Zu6VQMPm~;+^ZWYSI#0F2*=X=v~N2A+Mu_*HEd}H&jeI1w8+R z`C^7MM!z}okm=*q3f^k0t8NB!P$lh`R!>^!f4`$?BrKg5Jt#donB|PyJT>!ck?Cb) zza~z#lxFZ*t+O#YhKb?=&K}uM&uga_Dvqc3V;Yu0l{N@5KP%qBX9PgJj(`41W9zt$ z*SLHkCA5BmQ*3y5-B?z+={N2u@h)Q!t!6>2=z60yWraVE^WES>h}PQvVai6{fy(0J z!?F-_!n642x+EI?+yBAmbWB!E5?w{)qS%s}lF$5sL3-T#eW$NlhNZI=YgSaL;Wn7p z9nA7C-XInXmy*fYmG#ESScIb4BL{&>8=@4WqMVQ>lKo`@H-=zukT;U3 zN~R}l?QNmf?Eqj=1UPt%{~p9wIW0G397+lQ(Y^1vGrRjssg%~eYNd3+FCNecMkE}J zt>_!VZJii7a9A)lUWS#R4KoNM5{nsy*!@+YACZawxt50@3o61K%CiMjXcu3yyMe!x z{1jAettu3It#UgkX=L#d~C_F&*(_Hm#0KJ*BCDgdYwiR>N_g^Wx^ z#>K_OsAwG_Ba9EEn>BG*z9%1{xadFox%Y@;hpl~8LL4jTefF9T0#zpnl`9FCKbxHX0mROG7}WXo$$# z8WJ+Bp^EIPp@Hm1)yW(vYLK~5)FEY12(l20669Pc%8)8pR2Z89YFHW2vb$LVTmrF$ z^uhg`gC(Aevgs3{iVmX2jdNJgeX+{BzOT;qBW~I4jwD6 z5d@D%6gWBGSX;q*sqM-MlNgjgdfcEI7LFa&u+F3t$8=^A@y={l_*r^9-!#OkuxM0? z79IG|V_O5s65E!?8r|)G<)<56rhM*qTqRTPxax3|!7I9tpG=OXDs?|U+M-R0;n^31 zxlbDSvOx=rfoJqdj@8hoZAL%}4%fx!E8GUA%Z#8D$&9C~tOh39&4>_Mcs-Jb2EK1L zLxTS)d!BEF1ikxJSs5D2@eRf1swGnh<)%sxQ|m*v%k9ufpXw&a!1>6Juvoroz=M=Sv= zr#rG!kcJi8oZ;a>a!2aIf&TnN4*Nqa5+s2zo%AU;kujDaaT?tNI}0)ye1nJ|AS#~;@k_2?!FRl^C{&`u89HgjF#IEx%QM57!M zGq%{}0FKf)6aW`qf)G3ix$5Sdk&vIiXD5mqUQ7}!1{UGySyLDCi6K^RO2K^JEJxpw z_lULn0WPpOT4&@Lre1K^SD1+fU`J8_H)J{5l!l~u1~EAZ$uvi^0Ot-NmaqCJttx#* zUNc#LH(@NmL$j1`1S27#8weSr09VldxqIyHKf{`P!SU`LY~^4U*k`=#Z#(Rd2C#pv zTK~_0i)ZmOTo=}C?}Oz3wMghw*s=gvM)S0yfc|B!$Hy*3dk}k?DhA0U$5EtCa;j+r zEXlT+Isgq$A*Kb8fH^9FbwXW0y`d)%RquY0g&NlP0h0t~KtZB6?CeMkW&&WyR7v4} zMUR->;98fwmqFbK&sXpVHJ?8u9Wi5I366?~n+(Q#l#qJrI3$D+tBz!}-cIjQO)`;} zM`R0%tOZGuI!bZlF)wCYH9kw2V}|PNh+vt)Z0R%hKfAi#Skh))ldho=F->hMPPxI6 zWZG)lan;bUWL3)G@OVtsGzsvT9_wP?Ke?SZsIBecpRu$@cQH3|F5|;aAu;7;G06C# z2rift$vreL3JK{);!mO6h`GhkqMggiV_EYKMSf)w+zS&ap2>;Cnd@T;O7Hl!GqEo= zwVl4YYYxA8EN1NqR>#x5Ij0=>ey4KwJgG!)tce{T;h6TXyn4EA(~HlLcQwPwa3wpCwsF``||4FQ+f95*Q>o-%lzyw7u2gi?2?DncGVu+aBZ{L zEy2!TYLO17`-CSrWl|Ek0x=_%nlVdCd1Wn)H;iJ2_eYvVQ4e8K?P!P45Qk`8qV9Wj zd`}$kNL+5v@sfUXGCcVP{Y6L7b;F|P{dF7YlM5g9s#!Qh0WgIBR{H)jY~YZgkCtOX zHp$Q6rKIxG`4>$R$xGp9T;!+oQXd>-c7mf;p#im8e>U{ydX#}?AQu(|1QrR%F9Nxb z6$Q!#Um=2rzoERP68JriQ+mUmZ6j*psH>~V)+k2QR>tn8Z;h`TG+Sk>vQycv0uS;) zPlkHXaMDe~;5`rwX_?^A!UYgc&xh#L=N*`sQ4d0N2vA{YVOM^oeEQ3FdV4#*NzXs> z7G3yaC!F9qEy8oDbc9aLMN$xgm5g+=#4G}lus9Ho;E*+U5yB;KWHIpj96$Cua4&Z< zg4}~!p}QLnnOt4aG%4)>Ywi4=>W~V8s0gXnfrJdXFRl~T+Z|V#?UUiO$L(ToEQ6Tl zqq&K~&1`drM=`ftg(YX*_}>{JLPyDaFUwXL8F?E;<~WSHMKI`yj3e;ZQTp*l`9k+i z)dC;d?W_Kd5{%W&vu)VKW?VgX@}nom3ZZy#Jl*1l5Imn36#)N2>WlnjK7yRqtj=w% z{J2E7WcR`tDHe*7a#V~-)MT(kWT$;9g+(lqBv{Nq>+zyyh?cguFBNSz2^qOLRA0x2 z5p4}Swh*f=W3TTpl9%AR7+d);=4SiF`&{|Y8Nosa@qaJ9Hkmx47BT0p%&>x8@D5-4 ze0eRRMTc@@Ztc+HX5$x6>gX8eB!@Umc#0jB;1sq*>U?ZZ{`YS~S%fsXko=1mzI~s2?HiJgA@zPsVy+xv zCP6R)LrG4KQmLbpS8eLQB>NP5YOAw@G|XWLV7+$)t|^N!)`%JuVf%!zJ=a*aEP?|# z$R`( zN(;$Jel0h_wosdzitGpe1uB}%Kc0By`|uY-O-^{ac~B*HaPakZP}iW2N~IJf3bI0~ zeq=C)M2&(P6uc#s+@9RsOY9D|h1Irm#e)p*b}k78e)cR?Adc*aH3F*z%I46Nk@*4M z%cF?i<$96RB*n)rBdFVXzk(+>9-`<@xYJ2{?5y)iIa219BsTdTvCJuNHPlo~ZMub_fC)`9 z*G`35LtTOvaRh@(@|f2Z9&n)|4s*I8SqzveP>?UH_pne9XN--aR8>5`>ZYPt@}Q2X eU6({-JR(O8WTHi<0{{Sso5H{V literal 0 HcmV?d00001 diff --git a/src/components/jsmpeg-player/styles/icon/index.css b/src/components/jsmpeg-player/styles/icon/index.css new file mode 100644 index 0000000..40c201a --- /dev/null +++ b/src/components/jsmpeg-player/styles/icon/index.css @@ -0,0 +1,19 @@ +@import './iconfont.css'; + +/* * [class*='jm-icon-'] + span { + margin-left: 5px; +} */ + +[class*='jm-icon-'], +[class^='jm-icon-'] { + font-family: 'jsmpeg-player' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + vertical-align: baseline; + display: inline-block; + -webkit-font-smoothing: antialiased; +} diff --git a/src/components/jsmpeg-player/styles/index.scss b/src/components/jsmpeg-player/styles/index.scss new file mode 100644 index 0000000..d41ee59 --- /dev/null +++ b/src/components/jsmpeg-player/styles/index.scss @@ -0,0 +1,183 @@ +@import './icon/index.css'; +@import './popover.scss'; + +.jsmpeg-player { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; + display: flex; + background-color: #000; + button { + background: none; + border: none; + display: flex; + font-size: inherit; + line-height: inherit; + text-transform: none; + text-decoration: none; + cursor: pointer; + overflow: hidden; + } + .player-header { + width: 100%; + height: 40px; + line-height: 40px; + position: absolute; + top: 0; + left: 0; + padding: 0 10px; + background: linear-gradient(#000, transparent); + transform: translateY(-100%); + transition: 0.48s transform ease-in-out; + z-index: 10; + &.is-show { + transform: translateY(0); + .recording-tips { + display: inline-flex; + transform: translateY(0) !important; + // transition: 0.45s display; + } + } + .player-title { + color: #fff; + float: left; + } + .recording-tips { + height: 40px; + font-size: 14px; + color: white; + float: right; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + transform: translateY(100%); + transition: transform 0.28s; + .recording-icon { + width: 10px; + height: 10px; + background-color: red; + border-radius: 5px; + margin-left: 8px; + margin-right: 6px; + transition: 0.25s background-color ease-in; + &.is-hide { + background-color: transparent; + } + } + } + .close-btn { + color: gray; + transition: 0.28s color; + position: absolute; + top: 0; + right: 5px; + font-size: 18px; + &:hover { + color: #f56c6c; + } + } + } + .player-canvas__wrap { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + canvas { + max-width: 100%; + max-height: 100%; + // transition: 0.28s transform; + } + .no-signal-text { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + position: absolute; + top: 0; + left: 0; + background-color: #000; + } + .el-loading-mask { + background-color: transparent; + } + } + .player-toolbar { + width: 100%; + height: 45px; + line-height: 36px; + background: linear-gradient(transparent, #000); + padding: 0 8px; + position: absolute; + bottom: 0px; + left: 0px; + display: flex; + flex-direction: row; + align-items: center; + transform: translateY(100%); + transition: 0.48s transform ease-in-out; + z-index: 10; + &.is-show { + transform: translateY(0); + } + .toolbar-btn-container { + height: 35px; + width: 35px; + line-height: 1; + } + .toolbar-btn { + color: whitesmoke !important; + opacity: 0.8; + transition: 0.28s opacity ease-in-out, 0.28s color; + &:hover { + opacity: 1; + } + img.icon { + object-fit: scale-down; + max-width: 100%; + max-height: 100%; + } + } + > .toolbar-btn { + max-height: 35px; + max-width: 35px; + font-size: 24px; + } + .play-btn { + transition: 0.28s color; + // &:hover { + // color: #409eff !important; + // } + // color: #f56c6c !important; + // &.is-paused { + // color: #409eff !important; + // } + } + .recording-btn { + &.is-recording { + color: #f56c6c !important; + } + } + .stop-btn { + color: #f56c6c !important; + } + .progress-bar { + flex: 1; + padding: 0 10px; + .current-time { + float: right; + cursor: default; + color: whitesmoke !important; + } + } + } + .overlayers { + width: 0; + height: 0; + } +} diff --git a/src/components/jsmpeg-player/styles/popover.scss b/src/components/jsmpeg-player/styles/popover.scss new file mode 100644 index 0000000..6900965 --- /dev/null +++ b/src/components/jsmpeg-player/styles/popover.scss @@ -0,0 +1,100 @@ +.jsmpeg-player-popover { + $background: rgba( + $color: dimgray, + $alpha: 0.8 + ); + + border: none !important; + padding: 16px 8px; + min-width: 0 !important; + background-color: $background !important; + .popper__arrow { + &::after { + border-top-color: $background !important; + border-radius: 0; + } + } + &.popover-volume { + .volume-value { + font-size: 12px; + text-align: center; + color: white; + } + .el-slider { + margin-top: 10px; + .el-slider__runway { + background: dimgray; + } + .el-slider__bar { + // background: lightgray; + } + .el-slider__marks-text { + color: white !important; + } + } + } + &.popover-setting { + display: flex; + flex-direction: column; + padding: 8px 0; + .setting-item { + color: whitesmoke; + cursor: pointer; + padding: 8px 15px; + // margin: 0 15px; + transition: 0.28s color; + height: 34px; + display: flex; + flex-direction: row; + align-items: center; + + &[highlight]:hover { + color: #409eff; + // background-color: #409eff; + } + & + .setting-item { + // border-top: 1px solid lightgray; + } + .label { + text-align: right; + // flex: 1; + width: 80px; + // font-weight: 700; + } + > .input__wrap, + > .icon { + margin: 0 10px; + max-width: 100px; + } + .input__wrap { + display: flex; + flex-direction: row; + align-items: center; + > * { + background-color: transparent; + color: whitesmoke; + } + } + + .el-switch { + width: 30px; + &.is-checked { + .el-switch__core::after { + margin-left: -14px !important; + } + } + .el-switch__core { + height: 16px; + width: 100%; + // height: 15px; + margin: 0; + position: relative; + &::after { + height: 12px; + width: 12px; + } + } + } + } + } +} diff --git a/src/views/storeManage/warehouse3D/module/video.vue b/src/views/storeManage/warehouse3D/module/video.vue index b2ef5f3..bf0e11d 100644 --- a/src/views/storeManage/warehouse3D/module/video.vue +++ b/src/views/storeManage/warehouse3D/module/video.vue @@ -1,23 +1,26 @@