解决tplink回放黑屏问题
This commit is contained in:
parent
e2b8c1dc71
commit
efe9156015
|
|
@ -6,13 +6,8 @@
|
|||
</a-col>
|
||||
<a-col :span="24" style="padding: 5px;">
|
||||
<span style="margin-left: 15px;">回放倍速
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="formData.scale"
|
||||
style="width: 120px"
|
||||
@focus="focus"
|
||||
@change="changeScale"
|
||||
>
|
||||
<a-select ref="select" v-model:value="formData.scale" style="width: 120px" @focus="focus"
|
||||
@change="changeScale">
|
||||
<a-select-option value="0.0625">0.0625</a-select-option>
|
||||
<a-select-option value="0.125">0.125</a-select-option>
|
||||
<a-select-option value="0.25">0.25</a-select-option>
|
||||
|
|
@ -30,159 +25,161 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import {
|
||||
getPlaybackUrlList,
|
||||
deletePlaybackChn
|
||||
} from "../camera.api";
|
||||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { getValueType } from '/@/utils';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import {
|
||||
getPlaybackUrlList,
|
||||
deletePlaybackChn
|
||||
} from "../camera.api";
|
||||
|
||||
const TumsPlayer = window['tums-player'].default;
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({})},
|
||||
formBpm: { type: Boolean, default: true }
|
||||
});
|
||||
const TumsPlayer = window['tums-player'].default;
|
||||
const props = defineProps({
|
||||
formDisabled: { type: Boolean, default: false },
|
||||
formData: { type: Object, default: () => ({}) },
|
||||
formBpm: { type: Boolean, default: true }
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const player = ref();
|
||||
const initContainerPlayback = ref(true);
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
//预览通道参数
|
||||
videoDevId: '',//设备索引
|
||||
storageDevId: '',//存储设备ID
|
||||
startTime: '',//回放开始时间
|
||||
endTime: '',//回放结束时间
|
||||
videoType: '',//回放录像类型
|
||||
scale: 1,//回放速率
|
||||
sessionId: ''//回放通道对应的sessionId
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const formRef = ref();
|
||||
const player = ref();
|
||||
const initContainerPlayback = ref(true);
|
||||
const useForm = Form.useForm;
|
||||
const emit = defineEmits(['register', 'ok']);
|
||||
const formData = reactive<Record<string, any>>({
|
||||
//预览通道参数
|
||||
videoDevId: '',//设备索引
|
||||
storageDevId: '',//存储设备ID
|
||||
startTime: '',//回放开始时间
|
||||
endTime: '',//回放结束时间
|
||||
videoType: '',//回放录像类型
|
||||
scale: 1,//回放速率
|
||||
sessionId: ''//回放通道对应的sessionId
|
||||
});
|
||||
const { createMessage } = useMessage();
|
||||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
|
||||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
//表单验证
|
||||
const validatorRules = reactive({
|
||||
});
|
||||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
||||
|
||||
// 表单禁用
|
||||
const disabled = computed(()=>{
|
||||
if(props.formBpm === true){
|
||||
if(props.formData.disabled === false){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
// 表单禁用
|
||||
const disabled = computed(() => {
|
||||
if (props.formBpm === true) {
|
||||
if (props.formData.disabled === false) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
}
|
||||
return props.formDisabled;
|
||||
});
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
async function edit(record) {
|
||||
await nextTick(() => {
|
||||
confirmLoading.value=true;
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if(record.hasOwnProperty(key)){
|
||||
tmpData[key] = record[key]
|
||||
}
|
||||
})
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
});
|
||||
//获取录像回放地址
|
||||
await getPlaybackUrlList({
|
||||
"videoDevId":formData.videoDevId,
|
||||
"storageDevId":formData.storageDevId,
|
||||
"videoType":formData.videoType,
|
||||
"scale":formData.scale,
|
||||
"startTime":formData.startTime,
|
||||
"endTime":formData.endTime,
|
||||
}).then(res=>{
|
||||
confirmLoading.value=false;
|
||||
const error = res.error;
|
||||
if(error==null||error==''){
|
||||
formData.sessionId = '';
|
||||
const list = res.data;
|
||||
list.forEach(item => {
|
||||
formData.sessionId += item.sessionId+","
|
||||
let startTime = item.startTime*1000;
|
||||
let endTime = item.endTime*1000;
|
||||
player.value = new TumsPlayer('video-container-playback', {
|
||||
"autoplay": true,
|
||||
"resolution": "HD",
|
||||
"streamType": "sdvod", // 回放类型
|
||||
"url": item.url, // 该url为一次性 需要通过接口实时获取
|
||||
"socket": item.wssUrl,
|
||||
"type": "rtsp",
|
||||
"decoderType": "wasm", // 硬软解类型
|
||||
"queryAddress": item.queryAddress,
|
||||
"videoSessionId": item.sessionId,
|
||||
"videoDevId": item.videoDevId, // 设备id
|
||||
// "useMultitrans": true,
|
||||
"storageDevId": item.storageDevId,
|
||||
"startTime": startTime, // 回放开始时间 13位
|
||||
"endTime": endTime, // 回放结束时间 13位
|
||||
"eventType": [1, 2], // 事件类型
|
||||
"scale": item.scale // 回放倍速
|
||||
});
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
async function edit(record) {
|
||||
await nextTick(() => {
|
||||
confirmLoading.value = true;
|
||||
resetFields();
|
||||
const tmpData = {};
|
||||
Object.keys(formData).forEach((key) => {
|
||||
if (record.hasOwnProperty(key)) {
|
||||
tmpData[key] = record[key]
|
||||
}
|
||||
})
|
||||
//赋值
|
||||
Object.assign(formData, tmpData);
|
||||
});
|
||||
//获取录像回放地址
|
||||
await getPlaybackUrlList({
|
||||
"videoDevId": formData.videoDevId,
|
||||
"storageDevId": formData.storageDevId,
|
||||
"videoType": formData.videoType,
|
||||
"scale": formData.scale,
|
||||
"startTime": formData.startTime,
|
||||
"endTime": formData.endTime,
|
||||
}).then(res => {
|
||||
confirmLoading.value = false;
|
||||
const error = res.error;
|
||||
if (error == null || error == '') {
|
||||
formData.sessionId = '';
|
||||
const list = res.data;
|
||||
console.log("🌊 ~ edit ~ list:", list)
|
||||
list.forEach(item => {
|
||||
formData.sessionId += item.sessionId + ","
|
||||
let startTime = item.startTime * 1000;
|
||||
let endTime = item.endTime * 1000;
|
||||
player.value = new TumsPlayer('video-container-playback', {
|
||||
"autoplay": true,
|
||||
"resolution": "VB",
|
||||
"streamType": "sdvod", // 回放类型
|
||||
"url": item.url, // 该url为一次性 需要通过接口实时获取
|
||||
"socket": item.wssUrl,
|
||||
"type": "rtsp",
|
||||
"decoderType": "wasm", // 硬软解类型
|
||||
"queryAddress": item.queryAddress,
|
||||
"videoSessionId": item.sessionId,
|
||||
"videoDevId": item.videoDevId, // 设备id
|
||||
// "useMultitrans": true,
|
||||
"storageDevId": item.storageDevId,
|
||||
"startTime": startTime, // 回放开始时间 13位
|
||||
"endTime": endTime, // 回放结束时间 13位
|
||||
"eventType": [1, 2], // 事件类
|
||||
"scale": item.scale // 回放倍速
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换回放倍
|
||||
*/
|
||||
function changeScale(){
|
||||
//需要释放通道，重启创建通道
|
||||
createMessage.info('切换回放倍速至'+formData.scale+'倍');
|
||||
let scale = parseInt(formData.scale) ;
|
||||
player.value.setPlaybackConfig({"scale":scale});
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
async function destroy(){
|
||||
if (player.value){
|
||||
deletePlaybackChn({
|
||||
"deviceIndex":formData.videoDevId,
|
||||
"sessionId":formData.sessionId
|
||||
}).then(res=>{
|
||||
});
|
||||
// player.value.destroy().then(() => { }); // 回放销毁时自动调用接口，跨域导致失败
|
||||
initContainerPlayback.value = false
|
||||
setTimeout(()=>{
|
||||
initContainerPlayback.value = true
|
||||
},1000)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
edit,
|
||||
destroy
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换回放倍
|
||||
*/
|
||||
function changeScale() {
|
||||
//需要释放通道，重启创建通道
|
||||
createMessage.info('切换回放倍速至' + formData.scale + '倍');
|
||||
let scale = parseInt(formData.scale);
|
||||
player.value.setPlaybackConfig({ "scale": scale });
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
async function destroy() {
|
||||
if (player.value) {
|
||||
deletePlaybackChn({
|
||||
"deviceIndex": formData.videoDevId,
|
||||
"sessionId": formData.sessionId
|
||||
}).then(res => {
|
||||
});
|
||||
// player.value.destroy().then(() => { }); // 回放销毁时自动调用接口，跨域导致失败
|
||||
initContainerPlayback.value = false
|
||||
setTimeout(() => {
|
||||
initContainerPlayback.value = true
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
edit,
|
||||
destroy
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
#video-container-playback {
|
||||
padding: 0px 25px;
|
||||
width: 600px;
|
||||
height: 550px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
#video-container-playback {
|
||||
padding: 0px 25px;
|
||||
width: 600px;
|
||||
height: 550px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -98,14 +98,14 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
|
|||
function handlePlayback(record: Recordable) {
|
||||
record.scale = props.data.scale;
|
||||
record.multitrans = props.data.multitrans;
|
||||
console.log(record.multitrans);
|
||||
if(record.multitrans=="1"){
|
||||
multitransModal.value.disableSubmit = true;
|
||||
multitransModal.value.edit(record);
|
||||
}else{
|
||||
console.log(123,record.multitrans);
|
||||
// if(record.multitrans=="1"){
|
||||
// multitransModal.value.disableSubmit = true;
|
||||
// multitransModal.value.edit(record);
|
||||
// }else{
|
||||
playbackModal.value.disableSubmit = true;
|
||||
playbackModal.value.edit(record);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue