chendingwei
/
ar-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善视频录制功能

master
chendingwei 2 years ago
parent
ce8b40237e
commit
c23d5a04dc
1 changed files with 71 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 126
      src/views/page/cameraCenter.vue

126
src/views/page/cameraCenter.vue
View File

@ -6,13 +6,10 @@
@mousedown="mouseDownVideo">
</video> -->
<div id="videoPlayer" @mousedown="mouseDownVideo"></div>
<div v-for="item in labelList"
:class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
:key="item.id"
:id="item.id"
:style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
@click="itemClick(item)"
>
<div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
:key="item.id" :id="item.id"
:style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`"
@click="itemClick(item)">
<a-dropdown :trigger="['contextmenu']">
<div class="labels-item" v-if="item.groupName == '视频标签'">
<!-- <div class="labels-item" v-if="item.inFlag"> -->
@ -37,7 +34,7 @@
</a-dropdown>
</div>
<div class="labels lavels-build" v-if="addLabel.isAddLabel && addLabel.labelType == '建筑标签'"
:style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
:style="` pointer-events: none;top:${addLabelTop}px;left:${addLabelLeft}px`">
<div class="labels-item" alt="">
<img src="@/assets/images/buildLabelLine.png">
<div>
@ -47,7 +44,7 @@
</div>
</div>
<div class="labels lavels-video" v-if="addLabel.isAddLabel && addLabel.labelType == '视频标签'"
:style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
:style="`top:${addLabelTop}px;left:${addLabelLeft}px`">
<div class="labels-item">
<!-- <div class="labels-item" v-if="item.inFlag"> -->
<div>
@ -66,15 +63,15 @@
<script setup lang='ts'>
////@ts-nocheck
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {Modal} from 'ant-design-vue';
import {ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode} from "vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode } from "vue";
import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
import * as markSearchApi from '@/axios/core/markSearchApi';
import * as zlmApi from '@/axios/core/zlmApi';
import {useStore} from '@/store/index';
import {apiUrl} from "@/axios";
import {storeToRefs} from 'pinia';
import { useStore } from '@/store/index';
import { apiUrl } from "@/axios";
import { storeToRefs } from 'pinia';
import Msg from "@/utils/message";
import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
import CameraRightMenu from '@/views/page/Aside/cameraRightMenu.vue'
@ -83,7 +80,7 @@ import cameraWindow from '@/views/page/cameraWindow.vue'
import popup from "@/utils/popup";
import VideoControlSimple from './VideoControl/VideoControlSimple.vue';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
let piniaStore = useStore();
let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
let canvasWidth = ref(0)
@ -95,6 +92,7 @@ let isActiveChoose = ref(false)
let labelList = ref<any[]>([])
let addLabel = storeToRefs(piniaStore).addLabel
let screenshot = storeToRefs(piniaStore).screenshot
let record = storeToRefs(piniaStore).record
let addLabelLeft = ref(0);
let addLabelTop = ref(0);
var jessibuca = ref();
@ -106,21 +104,7 @@ onMounted(() => {
loadVideoCanvas();
}
})
watch(screenshot, (newVal, oldVal) => {
if (newVal) {
console.log(123);
//jessibuca.value.isPlaying() 判断是否正在播放
if (!jessibuca.value.isPlaying()) {
Msg.info("请先选择监控画面")
piniaStore.updateScreenshot(false)
return
}
jessibuca.value.screenshot("", "png", 1)
piniaStore.updateScreenshot(false)
}
})
watch(curSelectKey, (newVal, oldVal) => {
switchCamera(newVal)
})
@ -141,7 +125,33 @@ watch(addLabel, (newVal, oldVal) => {
}
}
})
watch(screenshot, (newVal, oldVal) => {
if (newVal) {
//jessibuca.value.isPlaying() 判断是否正在播放
if (!jessibuca.value.isPlaying()) {
Msg.info("请先选择监控画面")
piniaStore.updateScreenshot(false)
return
}
jessibuca.value.screenshot("", "png", 1)
piniaStore.updateScreenshot(false)
}
})
watch(record, (newVal, oldVal) => {
if (!jessibuca.value.isPlaying()) {
Msg.info("请先选择监控画面")
piniaStore.updateRecord(false)
return
}
if (newVal) {
jessibuca.value.startRecord()
Msg.info("开始录制")
} else {
jessibuca.value.stopRecordAndSave()
Msg.info("录制完毕")
}
})
function closeVideo() {
jessibuca.value.close();
labelList.value = []
@ -149,7 +159,7 @@ function closeVideo() {
//删除标签
function deleteLabel(id: number) {
markLabelApi.Delete({id}).then((res: any) => {
markLabelApi.Delete({ id }).then((res: any) => {
if (judgeResponse(res)) return;
let flag = res.data.data;
let msg = flag === true ? "删除成功" : "删除失败";
@ -167,7 +177,7 @@ function deleteLabel(id: number) {
//标签点击事件
function itemClick(item: any) {
// console.log("点击",item);
popup("监控画面", [h(cameraWindow, {windowData: item})], "cameraWindow");
popup("监控画面", [h(cameraWindow, { windowData: item })], "cameraWindow");
}
function loadVideoPlayer() {
@ -202,6 +212,11 @@ function loadVideoPlayer() {
jessibuca.value.onPlay = () => console.log('onPlay');
jessibuca.value.onFullscreen = (msg: any) => console.log('onFullscreen', msg);
jessibuca.value.onMute = (msg: any) => console.log('onMute', msg);
//监听录制结束
// jessibuca.value.on("recordEnd", function () {
// console.log("record end")
// piniaStore.updateRecord(false)
// })
}
function loadVideoCanvas() {
@ -215,7 +230,7 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
// console.log(`labelId: ${item.id}, menuKey: ${menuKey}`);
//防止添加多个key值，再次点击不能关闭。数组去重
if (menuKey == "edit") {
popup("编辑标签", [h(LabelEditModel, {modelData: item})], "editLabel");
popup("编辑标签", [h(LabelEditModel, { modelData: item })], "editLabel");
} else if (menuKey == "delete") {
Modal.confirm({
zIndex: 10000,
@ -224,11 +239,11 @@ const onContextMenuClick = (item: any, menuKey: string,) => {
content: () =>
h(
"span",
{style: {color: "black"}},
{ style: { color: "black" } },
"是否确认删除该标签？"
),
okText:
// () => h('span', { style: { color: 'black' } }, '确定'),
// () => h('span', { style: { color: 'black' } }, '确定'),
"确定",
// okType: 'primary',
cancelText: () => "取消",
@ -307,14 +322,14 @@ function mouseDownVideo(e: MouseEvent) {
}
labelList.value.push(obj)
isActiveChoose.value = false
piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
}
});
})
} else {
//右键取消
isActiveChoose.value = false
piniaStore.updateIsAddLabel({cmMarkGroupId: 0, labelType: "", isAddLabel: false})
piniaStore.updateIsAddLabel({ cmMarkGroupId: 0, labelType: "", isAddLabel: false })
}
}
@ -336,26 +351,26 @@ function switchCamera(cameraId: string) {
zlmApi.AddStreamProxy({
'cameraId': cameraObj.id
}).then((res: any) => {
if (judgeResponse(res)) return;
// step3, connect stream.
// closeVideo();
let connInfo = res.data.data;
let app = connInfo.app;
let stream = connInfo.stream;
let wsStreamUrl = apiUrl.ZlmWsStreamUrl;
wsStreamUrl = `${wsStreamUrl}/${app}/${stream}.live.flv`;
jessibuca.value.play(wsStreamUrl);
}
if (judgeResponse(res)) return;
// step3, connect stream.
// closeVideo();
let connInfo = res.data.data;
let app = connInfo.app;
let stream = connInfo.stream;
let wsStreamUrl = apiUrl.ZlmWsStreamUrl;
wsStreamUrl = `${wsStreamUrl}/${app}/${stream}.live.flv`;
jessibuca.value.play(wsStreamUrl);
}
);
console.log("step4, active camera searcher.");
console.log("step4, active camera searcher.");
// step4, active camera searcher.
markSearchApi.IsExistsSearcher({
'cameraId': cameraObj.id
}).then((res: any) => {
if (judgeResponse(res)) return;
let flag: boolean = res.data.data;
if (!flag) {
console.log('not exist searcher.');
markSearchApi.ActiveSearcher({
@ -381,8 +396,8 @@ function switchCamera(cameraId: string) {
}
function getLabel(cbCameraId: string | number) {
let str = JSON.stringify({cbCameraId})
markLabelApi.GetList({queryJson: str}).then((res: any) => {
let str = JSON.stringify({ cbCameraId })
markLabelApi.GetList({ queryJson: str }).then((res: any) => {
if (judgeResponse(res)) return;
labelList.value = res.data.data
labelList.value = labelList.value.map((item: any) => {
@ -398,7 +413,7 @@ function getLabel(cbCameraId: string | number) {
}
function loadMarkLabelsByLoop(cameraObj: any, ms: number = 1000) {
if (curSelectKey.value != cameraObj.id) {
console.log('load camera labels end.');
return;
@ -408,7 +423,7 @@ function loadMarkLabelsByLoop(cameraObj: any, ms: number = 1000) {
loadMarkLabelsByLoop(cameraObj, ms);
clearTimeout(timer)
console.log(new Date());
}, ms);
}
@ -479,7 +494,7 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
> div {
>div {
position: relative;
}
@ -488,6 +503,7 @@ onUnmounted(() => {
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
color: white;
}
img {

Write Preview
Loading…
Cancel
Save