code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-17 16:36:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

1.代码更新

Browse Source
This commit is contained in:
zhuangpeng.li
2024-07-11 15:40:30 +08:00
parent ee78bf6efc
commit c74ea3df6a
17 changed files with 642 additions and 1066 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
vue/public/index.html
View File

@@ -7,6 +7,7 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="/js/jessibuca/jessibuca.js"></script>
<title>
<%= webpackConfig.name %>

1
vue/public/js/jessibuca/decoder.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
vue/public/js/jessibuca/decoder.wasm Normal file
View File

Binary file not shown.

637
vue/public/js/jessibuca/jessibuca.d.ts vendored Normal file
View File

@@ -0,0 +1,637 @@
declare namespace Jessibuca {
/** 超时信息 */
enum TIMEOUT {
/** 当play()的时候，如果没有数据返回 */
loadingTimeout = 'loadingTimeout',
/** 当播放过程中，如果超过timeout之后没有数据渲染 */
delayTimeout = 'delayTimeout',
}
/** 错误信息 */
enum ERROR {
/** 播放错误，url 为空的时候，调用 play 方法 */
playError = 'playError',
/** http 请求失败 */
fetchError = 'fetchError',
/** websocket 请求失败 */
websocketError = 'websocketError',
/** webcodecs 解码 h265 失败 */
webcodecsH265NotSupport = 'webcodecsH265NotSupport',
/** mediaSource 解码 h265 失败 */
mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
/** wasm 解码失败 */
wasmDecodeError = 'wasmDecodeError',
}
interface Config {
/**
* 播放器容器
* * 若为 string ，则底层调用的是 document.getElementById('id')
* */
container: HTMLElement | string;
/**
* 设置最大缓冲时长，单位秒，播放器会自动消除延迟
*/
videoBuffer?: number;
/**
* worker地址
* * 默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
decoder?: string;
/**
* 是否不使用离屏模式（提升渲染能力）
*/
forceNoOffscreen?: boolean;
/**
* 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
*/
hiddenAutoPause?: boolean;
/**
* 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
*/
hasAudio?: boolean;
/**
* 设置旋转角度，只支持，0(默认)，180，270 三个值
*/
rotate?: boolean;
/**
* 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
* 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
*/
isResize?: boolean;
/**
* 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
*/
isFullResize?: boolean;
/**
* 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
*/
isFlv?: boolean;
/**
* 是否开启控制台调试打
*/
debug?: boolean;
/**
* 1. 设置超时时长, 单位秒
* 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
*/
timeout?: number;
/**
* 1. 设置超时时长, 单位秒
* 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
*/
heartTimeout?: number;
/**
* 1. 设置超时时长, 单位秒
* 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
*/
loadingTimeout?: number;
/**
* 是否支持屏幕的双击事件，触发全屏，取消全屏事件
*/
supportDblclickFullscreen?: boolean;
/**
* 是否显示网
*/
showBandwidth?: boolean;
/**
* 配置操作按钮
*/
operateBtns?: {
/** 是否显示全屏按钮 */
fullscreen?: boolean;
/** 是否显示截图按钮 */
screenshot?: boolean;
/** 是否显示播放暂停按钮 */
play?: boolean;
/** 是否显示声音按钮 */
audio?: boolean;
/** 是否显示录制按 */
record?: boolean;
};
/**
* 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
*/
keepScreenOn?: boolean;
/**
* 是否开启声音，默认是关闭声音播放的
*/
isNotMute?: boolean;
/**
* 加载过程中文案
*/
loadingText?: string;
/**
* 背景图片
*/
background?: string;
/**
* 是否开启MediaSource硬解码
* * 视频编码只支持H.264视频（Safari on iOS不支持）
* * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
*/
useMSE?: boolean;
/**
* 是否开启Webcodecs硬解码
* * 视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
* * 支持 forceNoOffscreen 为 false （开启离屏渲染)
* */
useWCS?: boolean;
/**
* 是否开启键盘快捷键
* 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
*/
hotKey?: boolean;
/**
* 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
* 设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
*/
autoWasm?: boolean;
/**
* heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
*/
heartTimeoutReplay?: boolean,
/**
* heartTimeoutReplay 从试次数，超过之后，不再自动播放
*/
heartTimeoutReplayTimes?: number,
/**
* loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
*/
loadingTimeoutReplay?: boolean,
/**
* heartTimeoutReplay 从试次数，超过之后，不再自动播放
*/
loadingTimeoutReplayTimes?: number
/**
* wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
*/
wasmDecodeErrorReplay?: boolean,
/**
* https://github.com/langhuihui/jessibuca/issues/152 解决方案
* 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
*/
openWebglAlignment?: boolean
}
}
declare class Jessibuca {
constructor(config?: Jessibuca.Config);
/**
* 是否开启控制台调试打印
@example
// 开启
jessibuca.setDebug(true)
// 关闭
jessibuca.setDebug(false)
*/
setDebug(flag: boolean): void;
/**
* 静音
@example
jessibuca.mute()
*/
mute(): void;
/**
* 取消静音
@example
jessibuca.cancelMute()
*/
cancelMute(): void;
/**
* 留给上层用户操作来触发音频恢复的方法。
*
* iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
*
* https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
*/
audioResume(): void;
/**
*
* 设置超时时长, 单位秒
* 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
@example
jessibuca.setTimeout(10)
jessibuca.on('timeout',function(){
//
});
*/
setTimeout(): void;
/**
* @param mode
* 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 `isResize` 为false
*
* 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
*
* 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
@example
jessibuca.setScaleMode(0)
jessibuca.setScaleMode(1)
jessibuca.setScaleMode(2)
*/
setScaleMode(mode: number): void;
/**
* 暂停播放
*
* 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
@example
jessibuca.pause().then(()=>{
console.log('pause success')
jessibuca.play().then(()=>{
}).catch((e)=>{
})
}).catch((e)=>{
console.log('pause error',e);
})
*/
pause(): Promise<void>;
/**
* 关闭视频,不释放底层资源
@example
jessibuca.close();
*/
close(): void;
/**
* 关闭视频，释放底层资源
@example
jessibuca.destroy()
*/
destroy(): void;
/**
* 清理画布为黑色背景
@example
jessibuca.clearView()
*/
clearView(): void;
/**
* 播放视频
@example
jessibuca.play('url').then(()=>{
console.log('play success')
}).catch((e)=>{
console.log('play error',e)
})
//
jessibuca.play()
*/
play(url?: string): Promise<void>;
/**
* 重新调整视图大小
*/
resize(): void;
/**
* 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
*
* 等同于 `videoBuffer` 参数。
*
@example
// 设置 200ms 缓冲
jessibuca.setBufferTime(0.2)
*/
setBufferTime(time: number): void;
/**
* 设置旋转角度，只支持，0(默认) ，180，270 三个值。
*
* > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。 *
@example
jessibuca.setRotate(0)
jessibuca.setRotate(90)
jessibuca.setRotate(270)
*/
setRotate(deg: number): void;
/**
*
* 设置音量大小，取值0 — 1
*
* > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
* @param volume 当为0时，完全无声;当为1时，最大音量，默认值
@example
jessibuca.setVolume(0.2)
jessibuca.setVolume(0)
jessibuca.setVolume(1)
*/
setVolume(volume: number): void;
/**
* 返回是否加载完毕
@example
var result = jessibuca.hasLoaded()
console.log(result) // true
*/
hasLoaded(): boolean;
/**
* 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
* H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
* 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
@example
jessibuca.setKeepScreenOn()
*/
setKeepScreenOn(): boolean;
/**
* 全屏(取消全屏)播放视频
@example
jessibuca.setFullscreen(true)
//
jessibuca.setFullscreen(false)
*/
setFullscreen(flag: boolean): void;
/**
*
* 截图，调用后弹出下载框保存截图
* @param filename 可选参数, 保存的文件名, 默认 `时间戳`
* @param format 可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
* @param quality 可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
* @param type 可选参数, 可选download或者base64或者blob，默认`download`
@example
jessibuca.screenshot("test","png",0.5)
const base64 = jessibuca.screenshot("test","png",0.5,'base64')
const fileBlob = jessibuca.screenshot("test",'blob')
*/
screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
/**
* 开始录制。
* @param fileName 可选，默认时间戳
* @param fileType 可选，默认webm，支持webm 和mp4 格式
@example
jessibuca.startRecord('xxx','webm')
*/
startRecord(fileName: string, fileType: string): void;
/**
* 暂停录制并下载。
@example
jessibuca.stopRecordAndSave()
*/
stopRecordAndSave(): void;
/**
* 返回是否正在播放中状态。
@example
var result = jessibuca.isPlaying()
console.log(result) // true
*/
isPlaying(): boolean;
/**
* 返回是否静音。
@example
var result = jessibuca.isMute()
console.log(result) // true
*/
isMute(): boolean;
/**
* 返回是否正在录制。
@example
var result = jessibuca.isRecording()
console.log(result) // true
*/
isRecording(): boolean;
/**
* 监听 jessibuca 初始化事件
* @example
* jessibuca.on("load",function(){console.log('load')})
*/
on(event: 'load', callback: () => void): void;
/**
* 视频播放持续时间，单位ms
* @example
* jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
*/
on(event: 'timeUpdate', callback: () => void): void;
/**
* 当解析出视频信息时回调，2个回调参数
* @example
* jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
*/
on(event: 'videoInfo', callback: (data: {
/** 视频宽 */
width: number;
/** 视频高 */
height: number;
}) => void): void;
/**
* 当解析出音频信息时回调，2个回调参数
* @example
* jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
*/
on(event: 'audioInfo', callback: (data: {
/** 声频通道 */
numOfChannels: number;
/** 采样率 */
sampleRate: number;
}) => void): void;
/**
* 信息，包含错误信息
* @example
* jessibuca.on("log",function(data){console.log('data:',data)})
*/
on(event: 'log', callback: () => void): void;
/**
* 错误信息
* @example
* jessibuca.on("error",function(error){
if(error === Jessibuca.ERROR.fetchError){
//
}
else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
//
}
console.log('error:',error)
})
*/
on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
/**
* 当前网速， 单位KB 每秒1次,
* @example
* jessibuca.on("kBps",function(data){console.log('kBps:',data)})
*/
on(event: 'kBps', callback: (value: number) => void): void;
/**
* 渲染开始
* @example
* jessibuca.on("start",function(){console.log('start render')})
*/
on(event: 'start', callback: () => void): void;
/**
* 当设定的超时时间内无数据返回,则回调
* @example
* jessibuca.on("timeout",function(error){console.log('timeout:',error)})
*/
on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
/**
* 当play()的时候，如果没有数据返回，则回调
* @example
* jessibuca.on("loadingTimeout",function(){console.log('timeout')})
*/
on(event: 'loadingTimeout', callback: () => void): void;
/**
* 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
* @example
* jessibuca.on("delayTimeout",function(){console.log('timeout')})
*/
on(event: 'delayTimeout', callback: () => void): void;
/**
* 当前是否全屏
* @example
* jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
*/
on(event: 'fullscreen', callback: () => void): void;
/**
* 触发播放事件
* @example
* jessibuca.on("play",function(flag){console.log('play')})
*/
on(event: 'play', callback: () => void): void;
/**
* 触发暂停事件
* @example
* jessibuca.on("pause",function(flag){console.log('pause')})
*/
on(event: 'pause', callback: () => void): void;
/**
* 触发声音事件，返回boolean值
* @example
* jessibuca.on("mute",function(flag){console.log('is mute',flag)})
*/
on(event: 'mute', callback: () => void): void;
/**
* 流状态统计，流开始播放后回调，每秒1次。
* @example
* jessibuca.on("stats",function(s){console.log("stats is",s)})
*/
on(event: 'stats', callback: (stats: {
/** 当前缓冲区时长，单位毫秒 */
buf: number;
/** 当前视频帧率 */
fps: number;
/** 当前音频码率，单位byte */
abps: number;
/** 当前视频码率，单位byte */
vbps: number;
/** 当前视频帧pts，单位毫秒 */
ts: number;
}) => void): void;
/**
* 渲染性能统计，流开始播放后回调，每秒1次。
* @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
* @example
* jessibuca.on("performance",function(performance){console.log("performance is",performance)})
*/
on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
/**
* 录制开始的事件
* @example
* jessibuca.on("recordStart",function(){console.log("record start")})
*/
on(event: 'recordStart', callback: () => void): void;
/**
* 录制结束的事件
* @example
* jessibuca.on("recordEnd",function(){console.log("record end")})
*/
on(event: 'recordEnd', callback: () => void): void;
/**
* 录制的时候，返回的录制时长，1s一次
* @example
* jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
*/
on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
/**
* 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
* @param event
* @param callback
*/
on(event: 'playToRenderTimes', callback: (times: {
playInitStart: number, // 1 初始化
playStart: number, // 2 初始化
streamStart: number, // 3 网络请求
streamResponse: number, // 4 网络请求
demuxStart: number, // 5 解封装
decodeStart: number, // 6 解码
videoStart: number, // 7 渲染
playTimestamp: number,// playStart- playInitStart
streamTimestamp: number,// streamStart - playStart
streamResponseTimestamp: number,// streamResponse - streamStart
demuxTimestamp: number, // demuxStart - streamResponse
decodeTimestamp: number, // decodeStart - demuxStart
videoTimestamp: number,// videoStart - decodeStart
allTimestamp: number // videoStart - playInitStart
}) => void): void
/**
* 监听方法
*
@example
jessibuca.on("load",function(){console.log('load')})
*/
on(event: string, callback: Function): void;
}
export default Jessibuca;

1
vue/public/js/jessibuca/jessibuca.js Normal file
View File

File diff suppressed because one or more lines are too long

183
vue/src/views/components/player/DeviceTree.vue
View File

@@ -1,183 +0,0 @@
<template>
<div id="DeviceTree" style="width: 100%; height: 100%; background-color: #ffffff; overflow: auto">
<div style="line-height: 3vh;margin-bottom: 10px;font-size: 17px;">设备列表</div>
<el-tree ref="tree" :props="defaultProps" :current-node-key="selectchannelId" :default-expanded-keys="expandIds"
:highlight-current="true" @node-click="handleNodeClick" :load="loadNode" lazy node-key="id"
style="min-width: 100%; display: inline-block !important">
<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
<span v-if="node.data.type === 0 && node.data.online" title="在线设备"
class="device-online iconfont icon-jiedianleizhukongzhongxin2"></span>
<span v-if="node.data.type === 0 && !node.data.online" title="离线设备"
class="device-offline iconfont icon-jiedianleizhukongzhongxin2"></span>
<span v-if="node.data.type === 3 && node.data.online" title="在线通道"
class="device-online iconfont icon-shebeileijiankongdian"></span>
<span v-if="node.data.type === 3 && !node.data.online" title="离线通道"
class="device-offline iconfont icon-shebeileijiankongdian"></span>
<span v-if="node.data.type === 4 && node.data.online" title="在线通道-球机"
class="device-online iconfont icon-shebeileiqiuji"></span>
<span v-if="node.data.type === 4 && !node.data.online" title="离线通道-球机"
class="device-offline iconfont icon-shebeileiqiuji"></span>
<span v-if="node.data.type === 5 && node.data.online" title="在线通道-半球"
class="device-online iconfont icon-shebeileibanqiu"></span>
<span v-if="node.data.type === 5 && !node.data.online" title="离线通道-半球"
class="device-offline iconfont icon-shebeileibanqiu"></span>
<span v-if="node.data.type === 6 && node.data.online" title="在线通道-枪机"
class="device-online iconfont icon-shebeileiqiangjitongdao"></span>
<span v-if="node.data.type === 6 && !node.data.online" title="离线通道-枪机"
class="device-offline iconfont icon-shebeileiqiangjitongdao"></span>
<span v-if="node.data.online" style="padding-left: 1px" class="device-online">{{ node.label }}</span>
<span v-if="!node.data.online" style="padding-left: 1px" class="device-offline">{{ node.label }}</span>
</span>
</el-tree>
</div>
</template>
<script>
import { listSipDeviceChannel } from '@/api/iot/sipdevice';
import { listDeviceShort } from '@/api/iot/device';
export default {
name: 'DeviceTree',
data() {
return {
// 总条数
total: 0,
// 监控设备通道信息表格数据
channelList: [],
DeviceData: [],
expandIds: [],
selectData: {},
selectchannelId: '',
defaultProps: {
children: 'children',
label: 'name',
isLeaf: 'isLeaf',
},
queryParams: {
pageNum: 1,
pageSize: 100,
status: 3,
deviceType: 3,
},
};
},
props: ['onlyCatalog', 'clickEvent'],
mounted() {
this.selectchannelId = '';
this.expandIds = ['0'];
},
methods: {
handleNodeClick(data, node, element) {
this.selectData = node.data;
this.selectchannelId = node.data.value;
if (node.level !== 0) {
let deviceNode = this.$refs.tree.getNode(data.userData.channelSipId);
if (typeof this.clickEvent == 'function' && node.level > 1) {
this.clickEvent(deviceNode.data.userData);
}
}
},
loadNode: function (node, resolve) {
if (node.level === 0) {
listDeviceShort(this.queryParams).then((response) => {
const data = response.rows;
if (data.length > 0) {
let nodeList = [];
for (let i = 0; i < data.length; i++) {
let node = {
name: data[i].deviceName,
isLeaf: false,
id: data[i].serialNumber,
type: 0,
online: data[i].status === 3,
userData: data[i],
};
nodeList.push(node);
}
resolve(nodeList);
} else {
resolve([]);
}
});
} else {
let channelArray = [];
listSipDeviceChannel(node.data.userData.serialNumber).then((res) => {
if (res.data != null) {
channelArray = channelArray.concat(res.data);
this.channelDataHandler(channelArray, resolve);
} else {
resolve([]);
}
});
}
},
channelDataHandler: function (data, resolve) {
if (data.length > 0) {
let nodeList = [];
for (let i = 0; i < data.length; i++) {
let item = data[i];
let channelType = item.id.substring(10, 13);
console.log('channelType: ' + channelType);
let type = 3;
if (item.id.length <= 10) {
type = 2;
} else {
if (item.id.length > 14) {
let channelType = item.id.substring(10, 13);
// 111-DVR编码;112-视频服务器编码;118-网络视频录像机(NVR)编码;131-摄像机编码;132-网络摄像机(IPC)编码
if (channelType !== '111' && channelType !== '112' && channelType !== '118' && channelType !== '131' && channelType !== '132') {
type = -1;
// 1-球机;2-半球;3-固定枪机;4-遥控枪机
} else if (item.basicData.ptztype === 1) {
type = 4;
} else if (item.basicData.ptztype === 2) {
type = 5;
} else if (item.basicData.ptztype === 3 || item.basicData.ptztype === 4) {
type = 6;
}
} else {
if (item.basicData.subCount > 0 || item.basicData.parental === 1) {
type = 2;
}
}
}
let node = {
name: item.name || item.id,
isLeaf: true,
id: item.id,
deviceId: item.deviceId,
type: type,
online: item.status === 2,
userData: item.basicData,
};
if (channelType === '111' || channelType === '112' || channelType === '118' || channelType === '131' || channelType === '132') {
nodeList.push(node);
}
}
resolve(nodeList);
} else {
resolve([]);
}
},
reset: function () {
this.$forceUpdate();
},
},
destroyed() { },
};
</script>
<style>
.device-tree-main-box {
text-align: left;
}
.device-online {
color: #252525;
}
.device-offline {
color: #727272;
}
</style>

291
vue/src/views/components/player/deviceVideo.vue
View File

@@ -1,291 +0,0 @@
<template>
<div style="display: block; width: 1000px">
<div style="display: flex">
<el-row>
<span style="margin-left: 10px" prop="channelName">通道：</span>
<el-select v-model="channelId" placeholder="请选择" @change="changeChannel" style="width: 200px; margin-right: 10px" size="small">
<el-option v-for="option in channelList" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<span style="overflow: auto; margin-left: 10px">日期：</span>
<el-date-picker v-model="queryDate" type="date" size="small" value-format="yyyy-MM-dd" clearable placeholder="选择日期" style="width: 180px; margin-right: 10px" />
<el-button-group style="margin: 0">
<el-button size="mini" type="success" title="查看录像" @click="loadDevRecord()" :disabled="channelId === '' || !queryDate">
<i class="el-icon-video-camera" />
查看
</el-button>
</el-button-group>
<span style="margin-left: 82px; overflow: auto">时间：</span>
<el-button-group>
<el-time-picker
size="small"
is-range
align="left"
v-model="timeRange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@change="timePickerChange"
style="width: 200px"
:disabled="channelId === '' || !queryDate"
></el-time-picker>
</el-button-group>
<el-button-group style="margin: 0 0 0 10px">
<el-button size="mini" type="primary" title="下载选定录像" @click="downloadRecord()" :disabled="channelId === '' || !timeRange">
<i class="el-icon-download" />
转存
</el-button>
</el-button-group>
</el-row>
</div>
<player ref="playbacker" :playerinfo="playinfo" class="components-container"></player>
</div>
</template>
<script>
import player from '@/views/components/player/player.vue';
import { listChannel, playback, closeStream, playbackSeek } from '@/api/iot/channel';
import { getDevRecord, startDownloadRecord } from '@/api/iot/record';
export default {
name: 'DeviceVideo',
components: {
player,
},
data() {
return {
deviceId: '',
channelId: '',
streamId: '',
ssrc: '',
playurl: '',
queryDate: '',
playing: false,
vodData: {},
hisData: [],
playinfo: {},
channelList: [],
playbackinfo: {},
timeRange: null,
startTime: null,
endTime: null,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceSipId: null,
channelSipId: null,
},
};
},
props: {
device: {
type: Object,
default: null,
},
},
watch: {
// 获取到父组件传递的device后
device: function (newVal, oldVal) {
this.deviceInfo = newVal;
if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
this.deviceId = this.device.serialNumber;
}
},
},
created() {
this.queryParams.deviceSipId = this.device.serialNumber;
this.deviceId = this.device.serialNumber;
this.getList();
this.playinfo = {
playtype: 'playback',
deviceId: this.device.serialNumber,
};
},
beforeDestroy() {},
destroyed() {
this.closeStream();
},
methods: {
/** 查询监控设备通道信息列表 */
getList() {
this.loading = true;
listChannel(this.queryParams).then((response) => {
this.channelList = response.rows.map((item) => {
return { value: item.channelSipId, label: item.channelName };
});
});
},
// 改变通道
changeChannel() {
this.playinfo.channelId = this.channelId;
},
initUrl(data) {
if (data) {
this.streamId = data.ssrc;
this.ssrc = data.ssrc;
this.playurl = data.playurl;
} else {
this.streamId = '';
this.ssrc = '';
this.playurl = '';
}
},
getBeijingTime(queryDate) {
// 计算与UTC的时区差，对于北京时间来说是8小时
let offset = 8 * 60 * 60 * 1000;
// 加上时区差，得到北京时间
let beijingTime = new Date(new Date(queryDate).getTime() - offset);
return beijingTime.getTime();
},
// 录像控制
loadDevRecord() {
this.$refs.playbacker.registercallback('playbackSeek', this.seekPlay);
if (this.queryDate === '' || this.queryDate === null){
this.$message.error('请选择日期');
return;
}
if (this.deviceId && this.channelId) {
const date = this.getBeijingTime(this.queryDate);
const start = date / 1000;
const end = Math.floor((date + 24 * 60 * 60 * 1000 - 1) / 1000);
const query = {
start: start,
end: end,
};
this.vodData = {
start: start,
end: end,
base: start,
};
this.setTime(this.queryDate + ' 00:00:00', this.queryDate + ' 23:59:59');
getDevRecord(this.deviceId, this.channelId, query).then((res) => {
this.hisData = res.data.recordItems;
if (res.data.recordItems) {
const len = this.hisData.length;
if (len > 0) {
if (this.hisData[0].start < start) {
this.hisData[0].start = start;
this.vodData.start = start;
} else {
this.vodData.start = this.hisData[0].start;
}
if (this.hisData[0].end !== 0 &&this.hisData[0].end < end) {
this.vodData.end = this.hisData[0].end;
}
this.playback();
} else {
this.$message({
type: 'warning',
message: '请确认设备是否支持录像，或者设备SD卡是否正确插入！',
});
}
} else {
this.$message({
type: 'warning',
message: '请确认设备是否支持录像，或者设备SD卡是否正确插入！',
});
}
});
}
},
/**录像播放*/
playback() {
const query = {
start: this.vodData.start,
end: this.vodData.end,
};
if (this.ssrc) {
closeStream(this.deviceId, this.channelId, this.ssrc).then((res) => {
playback(this.deviceId, this.channelId, query)
.then((res) => {
this.initUrl(res.data);
})
.finally(() => {
this.triggerPlay(this.hisData);
});
});
} else {
playback(this.deviceId, this.channelId, query)
.then((res) => {
this.initUrl(res.data);
})
.finally(() => {
this.triggerPlay(this.hisData);
});
}
},
/**触发播放*/
triggerPlay(playTimes) {
this.$refs.playbacker.playback(this.playurl, playTimes);
this.playing = true;
},
/**录像播放*/
seekPlay(s) {
const curTime = this.vodData.base + s.hour * 3600 + s.min * 60 + s.second;
const seekRange = curTime - this.vodData.start;
if (this.ssrc) {
const query = {
seek: seekRange,
};
const _this = this;
playbackSeek(this.deviceId, this.channelId, this.streamId, query).then((res) => {
_this.$refs.playbacker.setPlaybackStartTime(curTime);
});
}
},
/**关闭播放流*/
closeStream() {
if (this.playing && this.streamId) {
closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
this.streamId = '';
this.ssrc = '';
this.playurl = '';
this.playing = false;
});
// this.$refs.playbacker.destroy();
}
},
/**销毁录像播放器*/
destroy() {
if (this.playing && this.streamId) {
this.$refs.playbacker.destroy();
}
},
closeDestroy() {
this.closeStream();
this.destroy();
},
/**设置时间*/
timePickerChange: function (val) {
this.setTime(val[0], val[1]);
},
setTime: function (startTime, endTime) {
this.startTime = startTime;
this.endTime = endTime;
this.timeRange = [startTime, endTime];
},
/**下载录像*/
downloadRecord: function () {
const start = new Date(this.startTime).getTime() / 1000;
const end = new Date(this.endTime).getTime() / 1000;
const query = {
startTime: start,
endTime: end,
speed: '4',
};
startDownloadRecord(this.deviceId, this.channelId, query).then((res) => {
console.log('开始转存到流服务器：' + this.deviceId + ' : ' + this.channelId);
if (res.code === 200 ) {
this.$message({
type: 'success',
message: '转存到流服务器,请前往视频中心->录像管理查看！',
});
}
});
},
},
};
</script>

363
vue/src/views/components/player/jessibuca.vue
View File

@@ -1,363 +0,0 @@
<template>
<div ref="container" @dblclick="fullscreenSwich"
style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
<div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i>
<i class="iconfont icon-stop jessibuca-btn" @click="destroy"></i>
<i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()"></i>
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()"></i>
</div>
<div class="buttons-box-right">
<span class="jessibuca-btn">{{ kBps }} kb/s</span>
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot"
style="font-size: 1rem !important"></i>
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i>
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i>
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i>
</div>
</div>
</div>
</template>
<script>
let jessibucaPlayer = {};
export default {
name: 'jessibuca',
data() {
return {
playing: false,
isNotMute: false,
quieting: false,
fullscreen: false,
loaded: false, // mute
speed: 0,
performance: "", // 工作情况
kBps: 0,
btnDom: null,
videoInfo: null,
volume: 1,
rotate: 0,
vod: true, // 点播
forceNoOffscreen: false,
};
},
props: ['videoUrl', 'error', 'hasAudio', 'height'],
mounted() {
window.onerror = (msg) => {
// console.error(msg)
};
console.log(this._uid)
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
this.updatePlayerDomSize()
window.onresize = () => {
this.updatePlayerDomSize()
}
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
this.btnDom = document.getElementById("buttonsBox");
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
})
},
watch: {
videoUrl(newData, oldData) {
this.play(newData)
},
immediate: true
},
methods: {
updatePlayerDomSize() {
let dom = this.$refs.container;
let width = dom.parentNode.clientWidth
let height = (9 / 16) * width
const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
if (height > clientHeight) {
height = clientHeight
width = (16 / 9) * height
}
dom.style.width = width + 'px';
dom.style.height = height + "px";
},
create() {
let options = {};
console.log("hasAudio " + this.hasAudio)
jessibucaPlayer[this._uid] = new window.JessibucaPro(Object.assign(
{
container: this.$refs.container,
autoWasm: true,
background: "",
controlAutoHide: false,
debug: false,
decoder: "/js/jessibuca-pro/decoder-pro.js",
forceNoOffscreen: true,
hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
hasVideo: true,
heartTimeout: 5,
heartTimeoutReplay: true,
heartTimeoutReplayTimes: 3,
hiddenAutoPause: false,
hotKey: false,
isFlv: false,
isFullResize: false,
isNotMute: this.isNotMute,
isResize: false,
keepScreenOn: false,
loadingText: "请稍等, 视频加载中......",
loadingTimeout: 10,
loadingTimeoutReplay: true,
loadingTimeoutReplayTimes: 3,
openWebglAlignment: false,
operateBtns: {
fullscreen: false,
screenshot: false,
play: false,
audio: false,
record: false
},
recordType: "webm",
rotate: 0,
showBandwidth: false,
supportDblclickFullscreen: false,
timeout: 10,
useMSE: location.hostname !== "localhost" && location.protocol !== "https:",
useOffscreen: false,
useWCS: location.hostname === "localhost" || location.protocol === "https",
useWebFullScreen: false,
videoBuffer: 0,
wasmDecodeAudioSyncVideo: true,
wasmDecodeErrorReplay: true,
wcsUseVideoRender: true
},
options
));
let jessibuca = jessibucaPlayer[this._uid];
let _this = this;
jessibuca.on("load", function () {
console.log("on load init");
});
jessibuca.on("log", function (msg) {
console.log("on log", msg);
});
jessibuca.on("record", function (msg) {
console.log("on record:", msg);
});
jessibuca.on("pause", function () {
_this.playing = false;
});
jessibuca.on("play", function () {
_this.playing = true;
});
jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
_this.fullscreen = msg
});
jessibuca.on("mute", function (msg) {
console.log("on mute", msg);
_this.isNotMute = !msg;
});
jessibuca.on("audioInfo", function (msg) {
console.log("audioInfo", msg);
});
jessibuca.on("bps", function (bps) {
// console.log('bps', bps);
});
let _ts = 0;
jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
});
jessibuca.on("videoInfo", function (info) {
console.log("videoInfo", info);
});
jessibuca.on("error", function (error) {
console.log("error", error);
});
jessibuca.on("timeout", function () {
console.log("timeout");
});
jessibuca.on('start', function () {
console.log('start');
})
jessibuca.on("performance", function (performance) {
let show = "卡顿";
if (performance === 2) {
show = "非常流畅";
} else if (performance === 1) {
show = "流畅";
}
_this.performance = show;
});
jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer);
})
jessibuca.on('stats', function (stats) {
// console.log('stats', stats);
})
jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps);
});
// 显示时间戳 PTS
jessibuca.on('videoFrame', function () {
})
//
jessibuca.on('metadata', function () {
});
},
playBtnClick: function (event) {
this.play(this.videoUrl)
},
play: function (url) {
if (jessibucaPlayer[this._uid]) {
this.destroy().then(() => {
jessibucaPlayer[this._uid].on("play", () => {
this.playing = true;
this.loaded = true;
});
if (jessibucaPlayer[this._uid].hasLoaded()) {
jessibucaPlayer[this._uid].play(url);
} else {
jessibucaPlayer[this._uid].on("load", () => {
console.log("load 播放")
jessibucaPlayer[this._uid].play(url);
});
}
});
} else {
this.create();
jessibucaPlayer[this._uid].on("play", () => {
this.playing = true;
this.loaded = true;
});
if (jessibucaPlayer[this._uid].hasLoaded()) {
jessibucaPlayer[this._uid].play(url);
} else {
jessibucaPlayer[this._uid].on("load", () => {
console.log("load 播放")
jessibucaPlayer[this._uid].play(url);
});
}
}
},
pause: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].pause();
}
this.playing = false;
this.err = "";
this.performance = "";
},
screenshot: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].screenshot();
}
},
mute: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].mute();
}
},
cancelMute: function () {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].cancelMute();
}
},
destroy: async function () {
if (jessibucaPlayer[this._uid]) {
await jessibucaPlayer[this._uid].destroy().then(() => {
this.create();
});
} else {
this.create();
}
if (document.getElementById("buttonsBox") == null) {
this.$refs.container.appendChild(this.btnDom)
}
jessibucaPlayer[this._uid] = null;
this.playing = false;
this.err = "";
this.performance = "";
},
eventcallbacK: function (type, message) {
// console.log("player 事件回调")
// console.log(type)
// console.log(message)
},
fullscreenSwich: function () {
let isFull = this.isFullscreen()
jessibucaPlayer[this._uid].setFullscreen(!isFull)
this.fullscreen = !isFull;
},
isFullscreen: function () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
},
destroyed() {
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
this.playing = false;
this.loaded = false;
this.performance = "";
},
}
</script>
<style>
@import '../css/iconfont.css';
.buttons-box {
width: 100%;
height: 28px;
background-color: rgba(43, 51, 63, 0.7);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
left: 0;
bottom: 0;
user-select: none;
z-index: 10;
}
.jessibuca-btn {
width: 20px;
color: rgb(255, 255, 255);
line-height: 27px;
margin: 0px 10px;
padding: 0px 2px;
cursor: pointer;
text-align: center;
font-size: 0.8rem !important;
}
.buttons-box-right {
position: absolute;
right: 0;
}
</style>

2
vue/src/views/components/player/player.vue
View File

@@ -70,7 +70,7 @@ export default {
initplayer() {
this.isPlaybackPause = false;
this.initconf();
jessibucaPlayer[this._uid] = new window.JessibucaPro({
jessibucaPlayer[this._uid] = new window.Jessibuca({
container: this.$refs.container,
decoder: '/js/jessibuca-pro/decoder-pro.js',
videoBuffer: Number(0.2), // 缓存时长

1
vue/src/views/components/player/public/jessibuca-pro-multi.js
View File

File diff suppressed because one or more lines are too long

1
vue/src/views/components/player/public/jessibuca-pro-talk.js
View File

File diff suppressed because one or more lines are too long

1
vue/src/views/components/player/public/web-player-pro-multi.js
View File

File diff suppressed because one or more lines are too long

1
vue/src/views/components/player/public/web-player-pro-talk.js
View File

File diff suppressed because one or more lines are too long

1
vue/src/views/components/player/public/web-player-pro.js
View File

File diff suppressed because one or more lines are too long

2
vue/src/views/iot/device/device-edit.vue
View File

@@ -278,7 +278,6 @@ import { deviceSynchronization, getDevice, addDevice, updateDevice, generatorDev
import { getDeviceRunningStatus } from '@/api/iot/device';
import { cacheJsonThingsModel } from '@/api/iot/model';
import { getDeviceTemp } from '@/api/iot/temp';
import deviceVideo from '@/views/components/player/deviceVideo.vue';
import deviceLiveStream from '@/views/components/player/deviceLiveStream';
import sipid from '../sip/sipidGen.vue';
import player from '@/views/components/player/player.vue';
@@ -301,7 +300,6 @@ export default {
deviceTimer,
JsonViewer,
vueQr,
deviceVideo,
deviceLiveStream,
player,
channel,

221
vue/src/views/iot/sip/splitview.vue
View File

@@ -1,221 +0,0 @@
<template>
<div style="padding: 6px">
<el-card id="devicePosition" style="width: 100vw; height: 91vh" :body-style="{ padding: '0px' }">
<el-container v-loading="loading" style="height: 91vh; " element-loading-text="拼命加载中">
<el-aside width="250px" style="background-color: #ffffff;">
<DeviceTree :clickEvent="clickEvent"></DeviceTree>
</el-aside>
<el-main style="padding: 0">
<div height="5vh" style="text-align: left; font-size: 17px; line-height: 5vh;margin-bottom: 10px;">
分屏:
<el-button type="success" style="margin-left: 10px;" :class="{ active: spilt == 1 }" @click="spilt = 1"
plain icon='el-icon-full-screen' size="mini">单屏 </el-button>
<el-button type="info" style="margin-left: 10px;" :class="{ active: spilt == 4 }" @click="spilt = 4"
icon="el-icon-menu" plain size="mini">四屏</el-button>
<el-button type="warning" style="margin-left: 10px;" :class="{ active: spilt == 9 }" @click="spilt = 9"
plain icon="el-icon-s-grid" size="mini">九屏</el-button>
</div>
<div style="height: 85vh; display: flex; flex-wrap: wrap">
<div v-for="i in spilt" :key="i" class="play-box" :style="liveStyle"
:class="{ redborder: playerIdx == i - 1 }" @click="playerIdx = i - 1">
<div v-if="!videoUrl[i - 1]" style="color: #ffffff; font-size: 30px; font-weight: bold">{{ i }}</div>
<player ref="player" v-else :videoUrl="videoUrl[i - 1]" fluent autoplay @screenshot="shot"
@destroy="destroy" class="player-wrap" />
</div>
</div>
</el-main>
</el-container>
</el-card>
</div>
</template>
<script>
import player from '@/views/components/player/jessibuca.vue';
import DeviceTree from '@/views/components/player/DeviceTree.vue';
import { startPlay } from '@/api/iot/channel';
export default {
name: 'SplitView',
components: {
player,
DeviceTree,
},
data() {
return {
videoUrl: [''],
spilt: 1, //分屏
playerIdx: 0, //激活播放器
updateLooper: 0, //数据刷新轮训标志
count: 15,
total: 0,
loading: false,
};
},
mounted() { },
created() {
this.checkPlayByParam();
},
computed: {
liveStyle() {
let style = { width: '81%', height: '99%' };
switch (this.spilt) {
case 4:
style = { width: '40%', height: '49%' };
break;
case 9:
style = { width: '27%', height: '32%' };
break;
}
this.$nextTick(() => {
for (let i = 0; i < this.spilt; i++) {
const player = this.$refs.player;
player && player[i] && player[i].updatePlayerDomSize();
}
});
return style;
},
},
watch: {
spilt(newValue) {
console.log('切换画幅;' + newValue);
let that = this;
for (let i = 1; i <= newValue; i++) {
if (!that.$refs['player' + i]) {
continue;
}
this.$nextTick(() => {
if (that.$refs['player' + i] instanceof Array) {
that.$refs['player' + i][0].resize();
} else {
that.$refs['player' + i].resize();
}
});
}
window.localStorage.setItem('split', newValue);
},
'$route.fullPath': 'checkPlayByParam',
},
destroyed() {
clearTimeout(this.updateLooper);
},
methods: {
destroy(idx) {
console.log(idx);
this.clear(idx.substring(idx.length - 1));
},
clickEvent: function (data) {
if (data.channelSipId) {
this.sendDevicePush(data);
}
},
//通知设备上传媒体流
sendDevicePush: function (itemData) {
this.save(itemData);
let deviceId = itemData.deviceSipId;
let channelId = itemData.channelSipId;
console.log('通知设备推流1：' + deviceId + ' : ' + channelId);
let idxTmp = this.playerIdx;
let that = this;
this.loading = true;
startPlay(deviceId, channelId)
.then((response) => {
console.log('开始播放：' + this.deviceId + ' : ' + this.channelId);
console.log('流媒体信息：' + response.data);
let res = response.data;
console.log('playurl：' + res.playurl);
itemData.playUrl = res.playurl;
itemData.streamId = res.streamId;
that.setPlayUrl(itemData.playUrl, idxTmp);
})
.finally(() => {
that.loading = false;
});
},
setPlayUrl(url, idx) {
this.$set(this.videoUrl, idx, url);
let _this = this;
setTimeout(() => {
window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl));
}, 100);
},
checkPlayByParam() {
let { deviceId, channelId } = this.$route.query;
if (deviceId && channelId) {
this.sendDevicePush({ deviceId, channelId });
}
},
shot(e) {
var base64ToBlob = function (code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType,
});
};
let aLink = document.createElement('a');
let blob = base64ToBlob(e); //new Blob([content]);
let evt = document.createEvent('HTMLEvents');
evt.initEvent('click', true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = '截图';
aLink.href = URL.createObjectURL(blob);
aLink.click();
},
save(item) {
let dataStr = window.localStorage.getItem('playData') || '[]';
let data = JSON.parse(dataStr);
data[this.playerIdx] = item;
window.localStorage.setItem('playData', JSON.stringify(data));
},
clear(idx) {
let dataStr = window.localStorage.getItem('playData') || '[]';
let data = JSON.parse(dataStr);
data[idx - 1] = null;
console.log(data);
window.localStorage.setItem('playData', JSON.stringify(data));
},
},
};
</script>
<style>
.btn {
margin: 0 10px;
}
.btn:hover {
color: #409eff;
}
.btn.active {
color: #409eff;
}
.redborder {
border: 2px solid red !important;
}
.play-box {
background-color: #000000;
border: 1px solid #505050;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
position: relative;
border-radius: 5px;
}
.player-wrap {
position: absolute;
top: 0px;
height: 100% !important;
}
</style>