摄像头
This commit is contained in:
parent
2f71fcf2f5
commit
6b3aa3d709
|
@ -39,6 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
id="videoBox"
|
||||||
style="
|
style="
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 110px);
|
height: calc(100% - 110px);
|
||||||
|
@ -76,7 +77,7 @@ const props = defineProps({
|
||||||
hlsUriSsl: {
|
hlsUriSsl: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => {
|
default: () => {
|
||||||
return '';
|
return "";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -89,25 +90,52 @@ const data = reactive({
|
||||||
columns: [],
|
columns: [],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
});
|
});
|
||||||
|
const num = ref(false);
|
||||||
|
const hlsUriSslNow = ref("");
|
||||||
const gridData = [];
|
const gridData = [];
|
||||||
// 监听
|
// 监听
|
||||||
watch(
|
watch(
|
||||||
() => props.cameraShow,
|
() => props.cameraShow,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
cameraShow.value = newVal;
|
if (newVal) {
|
||||||
attachmentLink.value=props.hlsUriSsl;
|
if (hlsUriSslNow.value == "") {
|
||||||
nextTick(() => {
|
num.value = false;
|
||||||
loadVideo();
|
} else {
|
||||||
});
|
num.value = true;
|
||||||
|
}
|
||||||
|
// if (hlsUriSslNow.value != "" && props.hlsUriSsl != hlsUriSslNow.value)
|
||||||
|
cameraShow.value = newVal;
|
||||||
|
hlsUriSslNow.value = props.hlsUriSsl;
|
||||||
|
attachmentLink.value = hlsUriSslNow.value;
|
||||||
|
dp.value = null;
|
||||||
|
//当摄像头第二次打开时,要先创建dom
|
||||||
|
if (num.value) {
|
||||||
|
console.log(22222, document.getElementById("videoBox"));
|
||||||
|
insertVideo();
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
loadVideo();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
const insertVideo = () => {
|
||||||
|
const videoElement = document.createElement("video");
|
||||||
|
videoElement.id = "videoPlayer";
|
||||||
|
videoElement.className = "video-js vjs-default-skin";
|
||||||
|
videoElement.controls = true;
|
||||||
|
videoElement.crossOrigin = "anonymous";
|
||||||
|
videoElement.playsinline = true;
|
||||||
|
videoElement.autoplay = true;
|
||||||
|
const sourceElement = document.createElement("source");
|
||||||
|
sourceElement.src = attachmentLink.value;
|
||||||
|
sourceElement.type = "application/x-mpegURL";
|
||||||
|
videoElement.appendChild(sourceElement);
|
||||||
|
document.getElementById("videoBox").appendChild(videoElement);
|
||||||
|
};
|
||||||
const dp = ref(null);
|
const dp = ref(null);
|
||||||
const videoElement = ref(null);
|
const videohtml = ref("");
|
||||||
const attachmentLink = ref(
|
const attachmentLink = ref("");
|
||||||
""
|
|
||||||
);
|
|
||||||
const options = {
|
const options = {
|
||||||
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
playbackRates: [0.5, 1.0, 1.5, 2.0],
|
||||||
aspectRatio: "10:5",
|
aspectRatio: "10:5",
|
||||||
|
@ -129,6 +157,8 @@ const closeDialog = () => {
|
||||||
cameraShow.value = false;
|
cameraShow.value = false;
|
||||||
if (dp.value) {
|
if (dp.value) {
|
||||||
dp.value.dispose(); // dispose()会直接删除Dom元素
|
dp.value.dispose(); // dispose()会直接删除Dom元素
|
||||||
|
// dp.value.pause();
|
||||||
|
dp.value = null;
|
||||||
}
|
}
|
||||||
emit("close");
|
emit("close");
|
||||||
};
|
};
|
||||||
|
|
|
@ -103,7 +103,7 @@
|
||||||
<p>返回</p>
|
<p>返回</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- v-if="dataMyTag.camera" -->
|
<!-- v-if="dataMyTag.camera" -->
|
||||||
<div class="videoCamera" v-if="true" @click="openCamera()">
|
<div class="videoCamera" v-if="dataMyTag.camera" @click="openCamera()">
|
||||||
<img src="@/assets/images/sxt_detail.png" alt="" />
|
<img src="@/assets/images/sxt_detail.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -850,13 +850,12 @@ const oneCardSolution = () => {
|
||||||
};
|
};
|
||||||
// 打开摄像头
|
// 打开摄像头
|
||||||
const openCamera = () => {
|
const openCamera = () => {
|
||||||
getCameraUrl();
|
|
||||||
camera.show = true;
|
camera.show = true;
|
||||||
};
|
};
|
||||||
//获取摄像头地址
|
//获取摄像头地址
|
||||||
const getCameraUrl = () => {
|
const getCameraUrl = () => {
|
||||||
// camera.deviceCode = dataMyTag.camera.sbbm;
|
camera.deviceCode = dataMyTag.camera.sbbm;
|
||||||
camera.deviceCode = "3KSCP274757F2JU";
|
// camera.deviceCode = "3KSCP274757F2JU";
|
||||||
http
|
http
|
||||||
.get(`/api/ggfwyth/ysyzt/getPlayAddress?deviceCode=${camera.deviceCode}`)
|
.get(`/api/ggfwyth/ysyzt/getPlayAddress?deviceCode=${camera.deviceCode}`)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
|
@ -881,7 +880,9 @@ watch(
|
||||||
onClickTag2("出生", "出生");
|
onClickTag2("出生", "出生");
|
||||||
jump.value = "map";
|
jump.value = "map";
|
||||||
getshs();
|
getshs();
|
||||||
getCameraUrl();
|
if (dataMyTag.camera) {
|
||||||
|
getCameraUrl();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -894,7 +895,9 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
onClickTag2("出生", "出生");
|
onClickTag2("出生", "出生");
|
||||||
getshs();
|
getshs();
|
||||||
getCameraUrl();
|
if (dataMyTag.camera) {
|
||||||
|
getCameraUrl();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
jump.value = "map";
|
jump.value = "map";
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue