调整视频播放

main
jinna 2 years ago
parent ddc9b80b72
commit 1148d41866
  1. 642
      public/js/playctrl1simd/DecodeWorker.js
  2. 1
      public/js/playctrl1simd/Decoder.js
  3. 151
      src/views/components/h5Player/player.vue

@ -0,0 +1,642 @@
/**
* Created by wangweijie5 on 2016/12/5.
*/
(function (event) {
const AUDIO_TYPE = 0; // 音频
const VIDEO_TYPE = 1; // 视频
const PRIVT_TYPE = 2; // 私有帧
const PLAYM4_AUDIO_FRAME = 100; // 音频帧
const PLAYM4_VIDEO_FRAME = 101; // 视频帧
const PLAYM4_OK = 1;
const PLAYM4_ORDER_ERROR = 2;
const PLAYM4_DECODE_ERROR = 44 // 解码失败
const PLAYM4_NOT_KEYFRAME = 48; // 非关键帧
const PLAYM4_NEED_MORE_DATA = 31; // 需要更多数据才能解析
const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持
importScripts('Decoder.js');
Module.addOnPostRun(function () {
postMessage({ 'function': "loaded" });
});
var iStreamMode = 0; // 流模式
var bOpenMode = false;
var bOpenStream = false;
var funGetFrameData = null;
var funGetAudFrameData = null;
var bWorkerPrintLog = false;//worker层log开关
var g_nPort = -1;
var pInputData = null;
var inputBufferSize = 40960;
self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
let port = nPort;
let user = pUser;
let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
// console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
}
onmessage = function (event) {
var eventData = event.data;
var res = 0;
switch (eventData.command) {
case "printLog":
let downloadFlag = eventData.data;
if (downloadFlag === true) {
bWorkerPrintLog = true;
res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
}
else {
bWorkerPrintLog = false;
res = Module._SetPrintLogFlag(g_nPort, downloadFlag);
}
if (res !== PLAYM4_OK) {
console.log("DecodeWorker.js: PlayerSDK print log failed,res" + res);
postMessage({ 'function': "printLog", 'errorCode': res });
}
break;
case "SetPlayPosition":
let nFrameNumOrTime = eventData.data;
let enPosType = eventData.type;
// res = Module._SetPlayPosition(nFrameNumOrTime,enPosType);
// if (res !== PLAYM4_OK)
// {
// postMessage({'function': "SetPlayPosition", 'errorCode': res});
// return;
// }
// //有没有buffer需要清除
break;
case "SetStreamOpenMode":
//获取端口号
g_nPort = Module._GetPort();
//设置流打开模式
iStreamMode = eventData.data;
res = Module._SetStreamOpenMode(g_nPort, iStreamMode);
if (res !== PLAYM4_OK) {
postMessage({ 'function': "SetStreamOpenMode", 'errorCode': res });
return;
}
bOpenMode = true;
break;
case "OpenStream":
// 接收到的数据
var iHeadLen = eventData.dataSize;
var pHead = Module._malloc(iHeadLen + 4);
if (pHead === null) {
return;
}
var aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen);
aHead.set(new Uint8Array(eventData.data));
res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
postMessage({ 'function': "OpenStream", 'errorCode': res });
if (res !== PLAYM4_OK) {
//释放内存
Module._free(pHead);
pHead = null;
return;
}
bOpenStream = true;
break;
case "Play":
let resP = Module._Play(g_nPort);
if (resP !== PLAYM4_OK) {
return;
}
break;
case "InputData":
// 接收到的数据
var iLen = eventData.dataSize;
if (iLen > 0) {
if (pInputData == null || iLen > inputBufferSize) {
if (pInputData != null) {
Module._free(pInputData);
pInputData = null;
}
if (iLen > inputBufferSize) {
inputBufferSize = iLen;
}
pInputData = Module._malloc(inputBufferSize);
if (pInputData === null) {
return;
}
}
var inputData = new Uint8Array(eventData.data);
// var aInputData = Module.HEAPU8.subarray(pInputData, pInputData + iLen);
// aInputData.set(inputData);
Module.writeArrayToMemory(inputData, pInputData);
inputData = null;
res = Module._InputData(g_nPort, pInputData, iLen);
if (res !== PLAYM4_OK) {
let errorCode = Module._GetLastError(g_nPort);
let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
}
//Module._free(pInputData);
//pInputData = null;
} else {
let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
if (sourceRemain == 0) {
postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
return;
}
}
/////////////////////
// if (funGetFrameData === null) {
// funGetFrameData = Module.cwrap('GetFrameData', 'number');
// }
while (bOpenMode && bOpenStream) {
var ret = getFrameData();
// 直到获取视频帧或数据不足为止
if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret || || PLAYM4_NEED_NEET_LOOP === ret
{
break;
}
}
break;
case "SetSecretKey":
var keyLen = eventData.nKeyLen;
var pKeyData = Module._malloc(keyLen);
if (pKeyData === null) {
return;
}
var nKeySize = eventData.data.length
var bufData = stringToBytes(eventData.data);
var aKeyData = Module.HEAPU8.subarray(pKeyData, pKeyData + keyLen);
let u8array = new Uint8Array(keyLen);
aKeyData.set(u8array, 0);
aKeyData.set(new Uint8Array(bufData));
aKeyData = null;
u8array = null;
res = Module._SetSecretKey(g_nPort, eventData.nKeyType, pKeyData, keyLen);//, nKeySize
if (res !== PLAYM4_OK) {
postMessage({ 'function': "SetSecretKey", 'errorCode': res });
Module._free(pKeyData);
pKeyData = null;
return;
}
Module._free(pKeyData);
pKeyData = null;
break;
case "GetBMP":
var nBMPWidth = eventData.width;
var nBMPHeight = eventData.height;
var pYUVData = eventData.data;
var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
var oJpegCropRect = {
left: eventData.left,
top: eventData.top,
right: eventData.right,
bottom: eventData.bottom
};
var pDataYUV = Module._malloc(nYUVSize);
if (pDataYUV === null) {
return;
}
Module.writeArrayToMemory(new Uint8Array(pYUVData, 0, nYUVSize), pDataYUV);
// 分配BMP空间
var nBmpSize = nBMPWidth * nBMPHeight * 4 + 60;
var pBmpData = Module._malloc(nBmpSize);
var pBmpSize = Module._malloc(4);
if (pBmpData === null || pBmpSize === null) {
Module._free(pDataYUV);
pDataYUV = null;
if (pBmpData != null) {
Module._free(pBmpData);
pBmpData = null;
}
if (pBmpSize != null) {
Module._free(pBmpSize);
pBmpSize = null;
}
return;
}
//Module._memset(pBmpSize, nBmpSize, 4); // 防止bmp截图出现输入数据过大的错误码
Module.setValue(pBmpSize, nBmpSize, "i32");
res = Module._GetBMP(g_nPort, pDataYUV, nYUVSize, pBmpData, pBmpSize,
oBMPCropRect.left, oBMPCropRect.top, oBMPCropRect.right, oBMPCropRect.bottom);
if (res !== PLAYM4_OK) {
postMessage({ 'function': "GetBMP", 'errorCode': res });
Module._free(pDataYUV);
pDataYUV = null;
Module._free(pBmpData);
pBmpData = null;
Module._free(pBmpSize);
pBmpSize = null;
return;
}
// 获取BMP图片大小
var nBmpDataSize = Module.getValue(pBmpSize, "i32");
// 获取BMP图片数据
var aBmpData = new Uint8Array(nBmpDataSize);
aBmpData.set(Module.HEAPU8.subarray(pBmpData, pBmpData + nBmpDataSize));
postMessage({ 'function': "GetBMP", 'data': aBmpData, 'errorCode': res }, [aBmpData.buffer]);
aBmpData = null;
if (pDataYUV != null) {
Module._free(pDataYUV);
pDataYUV = null;
}
if (pBmpData != null) {
Module._free(pBmpData);
pBmpData = null;
}
if (pBmpSize != null) {
Module._free(pBmpSize);
pBmpSize = null;
}
break;
case "GetJPEG":
var nJpegWidth = eventData.width;
var nJpegHeight = eventData.height;
var pYUVData1 = eventData.data;
var nYUVSize1 = nJpegWidth * nJpegHeight * 3 / 2;
var oJpegCropRect = {
left: eventData.left,
top: eventData.top,
right: eventData.right,
bottom: eventData.bottom
};
var pDataYUV1 = Module._malloc(nYUVSize1);
if (pDataYUV1 === null) {
return;
}
Module.writeArrayToMemory(new Uint8Array(pYUVData1, 0, nYUVSize1), pDataYUV1);
// 分配JPEG空间
var pJpegData = Module._malloc(nYUVSize1);
var pJpegSize = Module._malloc(4);
if (pJpegData === null || pJpegSize === null) {
if (pJpegData != null) {
Module._free(pJpegData);
pJpegData = null;
}
if (pJpegSize != null) {
Module._free(pJpegSize);
pJpegSize = null;
}
if (pDataYUV1 != null) {
Module._free(pDataYUV1);
pDataYUV1 = null;
}
return;
}
Module.setValue(pJpegSize, nJpegWidth * nJpegHeight * 2, "i32"); // JPEG抓图,输入缓冲长度不小于当前帧YUV大小
res = Module._GetJPEG(g_nPort, pDataYUV1, nYUVSize1, pJpegData, pJpegSize,
oJpegCropRect.left, oJpegCropRect.top, oJpegCropRect.right, oJpegCropRect.bottom);
if (res !== PLAYM4_OK) {
postMessage({ 'function': "GetJPEG", 'errorCode': res });
if (pJpegData != null) {
Module._free(pJpegData);
pJpegData = null;
}
if (pJpegSize != null) {
Module._free(pJpegSize);
pJpegSize = null;
}
if (pDataYUV1 != null) {
Module._free(pDataYUV1);
pDataYUV1 = null;
}
return;
}
// 获取JPEG图片大小
var nJpegSize = Module.getValue(pJpegSize, "i32");
// 获取JPEG图片数据
var aJpegData = new Uint8Array(nJpegSize);
aJpegData.set(Module.HEAPU8.subarray(pJpegData, pJpegData + nJpegSize));
postMessage({ 'function': "GetJPEG", 'data': aJpegData, 'errorCode': res }, [aJpegData.buffer]);
nJpegSize = null;
aJpegData = null;
if (pDataYUV1 != null) {
Module._free(pDataYUV1);
pDataYUV1 = null;
}
if (pJpegData != null) {
Module._free(pJpegData);
pJpegData = null;
}
if (pJpegSize != null) {
Module._free(pJpegSize);
pJpegSize = null;
}
break;
case "SetDecodeFrameType":
var nFrameType = eventData.data;
res = Module._SetDecodeFrameType(g_nPort, nFrameType);
if (res !== PLAYM4_OK) {
postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
return;
}
break;
case "CloseStream":
//stop
let resS = Module._Stop(g_nPort);
if (resS !== PLAYM4_OK) {
postMessage({ 'function': "Stop", 'errorCode': res });
return;
}
//closeStream
res = Module._CloseStream(g_nPort);
if (res !== PLAYM4_OK) {
postMessage({ 'function': "CloseStream", 'errorCode': res });
return;
}
//freePort
let resF = Module._FreePort(g_nPort);
if (resF !== PLAYM4_OK) {
postMessage({ 'function': "FreePort", 'errorCode': res });
return;
}
if (pInputData != null) {
Module._free(pInputData);
pInputData = null;
}
break;
case "PlaySound":
let resPS = Module._PlaySound(g_nPort);
if (resPS !== PLAYM4_OK) {
console.log("PlaySound failed");
return;
}
break;
case "StopSound":
let resSS = Module._StopSound();
if (resSS !== PLAYM4_OK) {
console.log("StopSound failed");
return;
}
break;
case "SetVolume":
let resSV = Module._SetVolume(g_nPort, eventData.volume);
if (resSV !== PLAYM4_OK) {
console.log("Audio SetVolume failed");
return;
}
break;
case "GetVolume":
let volume = Module._GetVolume();
if (volume > 0) {
postMessage({ 'function': "GetVolume", 'volume': volume });
}
else {
console.log("Audio GetVolume failed");
return;
}
break;
case "OnlyPlaySound":
let resOPS = Module._OnlyPlaySound(g_nPort);
if (resOPS !== PLAYM4_OK) {
console.log("OnlyPlaySound failed");
return;
}
break;
case "Pause":
let resPa = Module._Pause(g_nPort, eventData.bPlay);
if (resPa !== PLAYM4_OK) {
console.log("Pause failed");
return;
}
case "PlayRate":
Module._SetPlayRate(g_nPort, eventData.playRate);
break;
case "SetIFrameDecInterval":
Module._SetIFrameDecInterval(g_nPort, eventData.data);
break;
case "SetLostFrameMode":
Module._SetLostFrameMode(g_nPort, eventData.data, 0);
break;
case "SetDemuxModel":
Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
break;
case "SkipErrorData":
Module._SkipErrorData(g_nPort, eventData.bSkip);
break;
case "SetDecodeERC":
Module._SetDecodeERC(g_nPort, eventData.nLevel);
break;
case "SetANRParam":
Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
break;
case "SetResampleValue":
Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
break;
case "GetLastError":
let errorCode = Module._GetLastError(g_nPort);
postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
break;
case "SetGlobalBaseTime":
Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
break;
case "SetRunTimeInfoCB":
Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
break;
default:
break;
}
};
function getOSDTime(oFrameInfo) {
var iYear = oFrameInfo.year;
var iMonth = oFrameInfo.month;
var iDay = oFrameInfo.day;
var iHour = oFrameInfo.hour;
var iMinute = oFrameInfo.minute;
var iSecond = oFrameInfo.second;
if (iMonth < 10) {
iMonth = "0" + iMonth;
}
if (iDay < 10) {
iDay = "0" + iDay;
}
if (iHour < 10) {
iHour = "0" + iHour;
}
if (iMinute < 10) {
iMinute = "0" + iMinute;
}
if (iSecond < 10) {
iSecond = "0" + iSecond;
}
return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
}
// 获取帧数据
function getFrameData() {
// function getFrameData() {
// 获取帧数据
var res = Module._GetFrameData();
//var res = fun();
if (res === PLAYM4_OK) {
var oFrameInfo = Module._GetFrameInfo();
switch (oFrameInfo.frameType) {
case AUDIO_TYPE:
var iSize = oFrameInfo.frameSize;
if (0 === iSize) {
return -1;
}
var pPCM = Module._GetFrameBuffer();
// var audioBuf = new ArrayBuffer(iSize);
var aPCMData = new Uint8Array(iSize);
aPCMData.set(Module.HEAPU8.subarray(pPCM, pPCM + iSize));
if (bWorkerPrintLog) {
console.log("<<<Worker: audio media Info: nSise:" + oFrameInfo.frameSize + ",nSampleRate:" + oFrameInfo.samplesPerSec + ',channel:' + oFrameInfo.channels + ',bitsPerSample:' + oFrameInfo.bitsPerSample);
}
postMessage({
'function': "GetFrameData", 'type': "audioType", 'data': aPCMData.buffer,
'frameInfo': oFrameInfo, 'errorCode': res
}, [aPCMData.buffer]);
oFrameInfo = null;
pPCM = null;
aPCMData = null;
return PLAYM4_AUDIO_FRAME;
case VIDEO_TYPE:
var szOSDTime = getOSDTime(oFrameInfo);
var iWidth = oFrameInfo.width;
var iHeight = oFrameInfo.height;
var iYUVSize = iWidth * iHeight * 3 / 2;
if (0 === iYUVSize) {
return -1;
}
var pYUV = Module._GetFrameBuffer();
// 图像数据渲染后压回,若从主码流切到子码流,存在数组大小与图像大小不匹配现象
var aYUVData = new Uint8Array(iYUVSize);
aYUVData.set(Module.HEAPU8.subarray(pYUV, pYUV + iYUVSize));
if (bWorkerPrintLog) {
console.log("<<<Worker: video media Info: Width:" + oFrameInfo.width + ",Height:" + oFrameInfo.height + ",timeStamp:" + oFrameInfo.timeStamp);
}
postMessage({
'function': "GetFrameData", 'type': "videoType", 'data': aYUVData.buffer,
'dataLen': aYUVData.length, 'osd': szOSDTime, 'frameInfo': oFrameInfo, 'errorCode': res
}, [aYUVData.buffer]);
oFrameInfo = null;
pYUV = null;
aYUVData = null;
return PLAYM4_VIDEO_FRAME;
case PRIVT_TYPE:
postMessage({
'function': "GetFrameData", 'type': "", 'data': null,
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
});
return PLAYM4_SYS_NOT_SUPPORT;
default:
postMessage({
'function': "GetFrameData", 'type': "", 'data': null,
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
});
return PLAYM4_SYS_NOT_SUPPORT;
}
}
else {
let errorCode = Module._GetLastError(g_nPort);
//解码失败返回裸数据
if (PLAYM4_DECODE_ERROR === errorCode) {
var rawInfo = Module._GetRawDataInfo();
var pRawData = Module._GetRawDataBuffer();
var aRawData = new Uint8Array(rawInfo.isize);
aRawData.set(Module.HEAPU8.subarray(pRawData, pRawData + rawInfo.isize));
postMessage({
'function': "GetRawData", 'type': "", 'data': aRawData.buffer,
'rawDataLen': rawInfo.isize, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
});
rawInfo = null;
pRawData = null;
aRawData = null;
}
//需要更多数据
if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
postMessage({
'function': "GetFrameData", 'type': "", 'data': null,
'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
});
}
return errorCode;
}
}
// 开始计算时间
function startTime() {
return new Date().getTime();
}
// 结束计算时间
function endTime() {
return new Date().getTime();
}
// 字母字符串转byte数组
function stringToBytes(str) {
var ch, st, re = [];
for (var i = 0; i < str.length; i++) {
ch = str.charCodeAt(i); // get char
st = []; // set up "stack"
do {
st.push(ch & 0xFF); // push byte to stack
ch = ch >> 8; // shift value down by 1 byte
}
while (ch);
// add stack contents to result
// done because chars have "wrong" endianness
re = re.concat(st.reverse());
}
// return an array of bytes
return re;
}
})();

File diff suppressed because one or more lines are too long

@ -1,11 +1,12 @@
<template> <template>
<div> <div class="container">
<div id="player"></div> <div id="player"></div>
<div class="form_box">
<el-form> <el-form>
<el-form-item label="当前选中摄像头"> <el-form-item label="当前选中摄像头">
{{ {{
this.playUrlList.length > 0 && this.player this.playUrlList.length > 0 && this.player
? this.playUrlList[this.player.currentWindowIndex].code ? this.playUrlList[this.player.currentWindowIndex].name
: "--" : "--"
}} }}
</el-form-item> </el-form-item>
@ -25,22 +26,41 @@
> >
</el-form-item> </el-form-item>
<el-form-item label="回放时间"> <el-form-item label="回放时间">
<e-date-picker <el-date-picker
show-time v-model="timeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
<!-- <el-date-picker
v-model="timeRange"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker> -->
<!-- <e-date-picker
placeholder="开始时间" placeholder="开始时间"
format="YYYY-MM-DD HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
v-model="playback.startTime" v-model="playback.startTime"
:value-format="playback.valueFormat" :value-format="playback.valueFormat"
> >
</e-date-picker> </e-date-picker>
<e-date-picker <e-date-picker
show-time
placeholder="结束时间" placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
v-model="playback.endTime" v-model="playback.endTime"
:value-format="playback.valueFormat" :value-format="playback.valueFormat"
> >
</e-date-picker> </e-date-picker> -->
</el-form-item> </el-form-item>
<el-form-item label="回放"> <el-form-item label="回放">
<el-button id="btn-playback" @click="playbackQuery">开始回放</el-button> <el-button id="btn-playback" @click="playbackQuery">开始回放</el-button>
@ -62,6 +82,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -95,8 +117,8 @@ export default {
"wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S", "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
}, },
playback: { playback: {
startTime: "2021-07-26T00:00:00", startTime: "2021-07-26 00:00:00",
endTime: "2021-07-26T23:59:59", endTime: "2021-07-26 23:59:59",
valueFormat: "", valueFormat: "",
seekStart: "2021-07-26T12:00:00", seekStart: "2021-07-26T12:00:00",
rate: "", rate: "",
@ -113,9 +135,12 @@ export default {
}, },
recordStartState: 0, recordStartState: 0,
recordStartText: "录像", recordStartText: "录像",
timeRange:[]
}; };
}, },
created() { created() {
console.log(this.getYestDayOrNextDay())
// this.timeRange = [this.getYestDayOrNextDay() + ' 00:00:00',new Date().toLocaleString()]
// h5 // h5
setTimeout(() => { setTimeout(() => {
this.init(); this.init();
@ -124,6 +149,14 @@ export default {
}); });
}, },
methods: { methods: {
getYestDayOrNextDay() {
//
const today = new Date();
//
const yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
return yesterday.toLocaleDateString();
},
// //
init() { init() {
// //
@ -187,27 +220,19 @@ export default {
this.queryLive(); this.queryLive();
}, },
arrangeWindow() { arrangeWindow() {
this.splitNum = // const splitNum = this.splitNum;
this.list.length > 1 console.log(this.splitNum)
? 2 console.log(this.player)
: this.list.length > 4
? 3 let splitNum = this.splitNum
: this.list.length > 9
? 4
: 4;
const splitNum = this.splitNum;
this.player.JS_ArrangeWindow(splitNum).then( this.player.JS_ArrangeWindow(splitNum).then(
() => { () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`); e => { console.error(e) }
}, )
(e) => {
console.error(e);
}
);
}, },
// //
// //
realplay(index, playUrl) { realplay(index, url) {
if (this.playUrlList.length === 0) { if (this.playUrlList.length === 0) {
this.$message.warning("当前没有可播放的摄像头"); this.$message.warning("当前没有可播放的摄像头");
return; return;
@ -229,8 +254,11 @@ export default {
// let index = this.player.currentWindowIndex; // let index = this.player.currentWindowIndex;
let mode = 0; let mode = 0;
// let playURL = this.playUrlList[player.currentWindowIndex].url; // let playURL = this.playUrlList[player.currentWindowIndex].url;
let playURL = url
console.log('playUrl ===>',playURL, {playURL,mode},index)
console.log(playURL, { playURL, mode }, index);
// console.log(playURL, { playURL, mode }, index);
this.player.JS_Play(playURL, { playURL, mode }, index).then( this.player.JS_Play(playURL, { playURL, mode }, index).then(
() => { () => {
// //
@ -247,7 +275,7 @@ export default {
() => { () => {
this.playback.rate = 0; this.playback.rate = 0;
console.log("stopAllPlay success"); console.log("stopAllPlay success");
this.closeVideoTree(); // this.closeVideoTree();
}, },
(e) => { (e) => {
console.error(e); console.error(e);
@ -294,10 +322,23 @@ export default {
queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => { queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
console.log('res ====>',res) console.log('res ====>',res)
if (res.data.code === 0 || res.data.code == 200) { if (res.data.code === 0 || res.data.code == 200) {
playUrlList.push({ code: code, url: res.data.url }); playUrlList.push({name:code.name, code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: res.data.data });
this.playUrlList = playUrlList; this.playUrlList = playUrlList;
this.realplay(index, res.data.url); this.splitNum =
this.playUrlList.length > 1
? 2
: this.playUrlList.length > 4
? 3
: this.playUrlList.length > 9
? 4
: 4;
this.realplay(index, res.data.data);
} }
// else{
// playUrlList.push({name:code.name, code: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code, url: 'ws://171.16.8.60:559/openUrl/QKCBP32' });
// this.playUrlList = playUrlList;
// this.realplay(index, 'ws://171.16.8.60:559/openUrl/QKCBP32');
// }
}); });
}); });
}, },
@ -307,12 +348,17 @@ export default {
let { player, mode, playback } = this, let { player, mode, playback } = this,
index = player.currentWindowIndex, index = player.currentWindowIndex,
{ startTime, endTime } = playback; { startTime, endTime } = playback;
let playUrl = this.playUrlList[index].playback; let playURL = this.playUrlList[index].playback;
startTime += "Z"; startTime += "Z";
endTime += "Z"; endTime += "Z";
let timeArr = JSON.parse(JSON.stringify(this.timeRange))
let time1 = timeArr[0].substring(0, 10) + 'T' + timeArr[0].substring(10 + 1) + "Z"
let time2 = timeArr[1].substring(0, 10) + 'T' + timeArr[1].substring(10 + 1) + 'Z'
console.log('index ===>',index,mode,playURL,time1,time2)
player player
.JS_Play(playURL, { playURL, mode }, index, startTime, endTime) .JS_Play(playURL, { playURL, mode }, index, time1, time2)
.then( .then(
() => { () => {
console.log("playbackStart success"); console.log("playbackStart success");
@ -349,26 +395,55 @@ export default {
this.$message.warning("当前没有可播放的摄像头"); this.$message.warning("当前没有可播放的摄像头");
return; return;
} }
console.log('payback ===>',this.playUrlList[this.player.currentWindowIndex].playback)
if ( if (
this.playUrlList[this.player.currentWindowIndex].playback != undefined this.playUrlList[this.player.currentWindowIndex].playback != undefined
) { ) {
this.playbackStart(); this.playbackStart();
return; return;
} }
console.log('currentWindowIndex ===>',this.player.currentWindowIndex)
queryLiveBack({ queryLiveBack({
cameraIndexCode: this.playUrlList[this.currentWindowIndex].code, cameraIndexCode: this.playUrlList[this.player.currentWindowIndex].code,
beginTime: this.playback.startTime, beginTime:this.timeRange[0],
endTime: this.playback.endTime, endTime: this.timeRange[1],
}).then((res) => { }).then((res) => {
if (res.data.code === 0 || res.data.code == 200) { if (res.data.code === 0 || res.data.code == 200) {
this.playUrlList[this.player.currentWindowIndex].playback = this.playUrlList[this.player.currentWindowIndex].playback =
res.data.url; res.data.data;
this.playbackStart(); this.playbackStart();
} }
// else{
// this.playUrlList[this.player.currentWindowIndex].playback =
// 'ws://171.16.8.60:559/openUrl/fJbYK9G';
// this.playbackStart();
// }
}); });
}, },
}, },
}; };
</script> </script>
<style></style> <style lang="scss" scoped>
.container{
display: flex;
// @media screen and (min-width: 992px){
#player {
width:65%;
height: calc((50vw - 8px) * 5 / 8);
}
// }
.form_box{
width: 35%;
display: flex;
// align-items: center;
justify-content: center;
.el-form{
width: 80%;
}
}
}
</style>

Loading…
Cancel
Save