LAPTOP-S9HJSOEB\昊天
11 months ago
parent
ab54e66297
commit
c028f200aa
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
id="app"
|
||||||
|
class="parent"
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
style="width: 100%; height: 100%; object-fit: fill;"
|
||||||
|
ref="video"
|
||||||
|
muted
|
||||||
|
autoplay
|
||||||
|
>
|
||||||
|
</video>
|
||||||
|
<!-- <ptz v-if="ptzShow" :cameraId="cameraId" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ZLMRTCClient } from "../camera/ZLMediaKit-Webrtc-Vue/ZLMRTCClient";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
cameraId: {
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
|
ptzShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
video: null,
|
||||||
|
selfVideo: null,
|
||||||
|
url: null,
|
||||||
|
simulcast: null,
|
||||||
|
useCamera: null,
|
||||||
|
audioEnable: null,
|
||||||
|
videoEnable: null,
|
||||||
|
datachannel: null,
|
||||||
|
msgsend: null,
|
||||||
|
msgrecv: "",
|
||||||
|
streamUrl: "",
|
||||||
|
player: null,
|
||||||
|
recvOnly: true,
|
||||||
|
resolutions: [],
|
||||||
|
resolution: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cameraId(newCameraId, oldCameraId) {
|
||||||
|
console.log(newCameraId);
|
||||||
|
if (newCameraId !== oldCameraId) {
|
||||||
|
this.getHttp()
|
||||||
|
this.startVideo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.video = this.$refs.video;
|
||||||
|
|
||||||
|
this.getHttp()
|
||||||
|
ZLMRTCClient.GetAllScanResolution().forEach((r, i) => {
|
||||||
|
let text = r.label + "(" + r.width + "x" + r.height + ")";
|
||||||
|
this.resolutions.push({
|
||||||
|
text: text,
|
||||||
|
value: r,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.resolution = this.resolutions[0].text;
|
||||||
|
this.startVideo();
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.stopVideo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getHttp(){
|
||||||
|
this.streamUrl =
|
||||||
|
|
||||||
|
"http://127.0.0.1:8096/index/api/webrtc?app=live&stream=camera" +
|
||||||
|
this.cameraId +
|
||||||
|
"&type=play";
|
||||||
|
},
|
||||||
|
radioChange(value) {
|
||||||
|
let urlObj = new URL(this.streamUrl);
|
||||||
|
urlObj.searchParams.set("type", value);
|
||||||
|
this.streamUrl = urlObj.href;
|
||||||
|
|
||||||
|
if (value == "play") {
|
||||||
|
this.recvOnly = true;
|
||||||
|
} else if (value == "echo") {
|
||||||
|
this.recvOnly = false;
|
||||||
|
} else {
|
||||||
|
this.recvOnly = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeResolution(e) {
|
||||||
|
this.resolution = e.target.options[e.target.selectedIndex].text;
|
||||||
|
},
|
||||||
|
start_play() {
|
||||||
|
console.log(this.cameraId);
|
||||||
|
let res = this.resolution.match(/\d+/g);
|
||||||
|
let h = parseInt(res.pop());
|
||||||
|
let w = parseInt(res.pop());
|
||||||
|
|
||||||
|
this.player = new ZLMRTCClient.Endpoint({
|
||||||
|
element: this.video,
|
||||||
|
debug: false,
|
||||||
|
zlmsdpUrl: this.streamUrl,
|
||||||
|
simulecast: false,
|
||||||
|
useCamera: false,
|
||||||
|
audioEnable: false,
|
||||||
|
videoEnable: true,
|
||||||
|
recvOnly: this.recvOnly,
|
||||||
|
usedatachannel: false,
|
||||||
|
resolution: {
|
||||||
|
w: "100px",
|
||||||
|
h: "100px",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,
|
||||||
|
(e) => {
|
||||||
|
console.log("ICE 协商出错");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,
|
||||||
|
(e) => {
|
||||||
|
console.log("播放成功", e.streams);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
|
||||||
|
(e) => {
|
||||||
|
console.log("offer anwser 交换失败", e);
|
||||||
|
this.stopVideo();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
|
||||||
|
this.selfVideo.srcObject = s;
|
||||||
|
this.selfVideo.muted = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (s) => {
|
||||||
|
console.log("获取本地流失败");
|
||||||
|
});
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
|
||||||
|
(state) => {
|
||||||
|
console.log("当前状态==>", state);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,
|
||||||
|
(event) => {
|
||||||
|
console.log("rtc datachannel 打开 :", event);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,
|
||||||
|
(event) => {
|
||||||
|
console.log("rtc datachannel 消息 :", event.data);
|
||||||
|
this.msgrecv = event.data;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,
|
||||||
|
(event) => {
|
||||||
|
console.log("rtc datachannel 错误 :", event);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.player.on(
|
||||||
|
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,
|
||||||
|
(event) => {
|
||||||
|
console.log("rtc datachannel 关闭 :", event);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
startVideo() {
|
||||||
|
this.stopVideo();
|
||||||
|
let res = this.resolution.match(/\d+/g);
|
||||||
|
let h = "50%";
|
||||||
|
let w = "50%";
|
||||||
|
this.start_play();
|
||||||
|
},
|
||||||
|
stopVideo() {
|
||||||
|
if (this.player) {
|
||||||
|
this.player.close();
|
||||||
|
this.player = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
send() {
|
||||||
|
if (this.player) {
|
||||||
|
this.player.sendMsg(this.msgsend);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
if (this.player) {
|
||||||
|
this.player.closeDataChannel();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.parent {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-item img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.direction-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-item img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ptz-control">
|
||||||
|
<div class="direction-list">
|
||||||
|
<div class="operation-item">
|
||||||
|
<Icon
|
||||||
|
:icon="zoomSubIcon"
|
||||||
|
alt="Zoom In"
|
||||||
|
@mousedown="handleControl('zoomSub', 'start')"
|
||||||
|
@mouseup="handleControl('zoomSub', 'stop')"
|
||||||
|
@mouseleave="handleControl('zoomSub', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span>变倍</span>
|
||||||
|
<div class="operation-item">
|
||||||
|
<Icon
|
||||||
|
:icon="zoomAddIcon"
|
||||||
|
alt="Zoom Out"
|
||||||
|
@mousedown="handleControl('zoomAdd', 'start')"
|
||||||
|
@mouseup="handleControl('zoomAdd', 'stop')"
|
||||||
|
@mouseleave="handleControl('zoomAdd', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="operation-item">
|
||||||
|
<Icon
|
||||||
|
:icon="focusSubIcon"
|
||||||
|
alt="Focus In"
|
||||||
|
@mousedown="handleControl('focusSub', 'start')"
|
||||||
|
@mouseup="handleControl('focusSub', 'stop')"
|
||||||
|
@mouseleave="handleControl('focusSub', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span>变焦</span>
|
||||||
|
<div class="operation-item">
|
||||||
|
<Icon
|
||||||
|
:icon="focusAddIcon"
|
||||||
|
alt="Focus Out"
|
||||||
|
@mousedown="handleControl('focusAdd', 'start')"
|
||||||
|
@mouseup="handleControl('focusAdd', 'stop')"
|
||||||
|
@mouseleave="handleControl('focusAdd', 'stop')"
|
||||||
|
/>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="operation-item">
|
||||||
|
<Icon
|
||||||
|
:icon="irisSubIcon"
|
||||||
|
alt="Iris Open"
|
||||||
|
@mousedown="handleControl('irisSub', 'start')"
|
||||||
|
@mouseup="handleControl('irisSub', 'stop')"
|
||||||
|
@mouseleave="handleControl('irisSub', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span>光圈</span>
|
||||||
|
<div class="operation-item">
|
||||||
|
<Icon
|
||||||
|
:icon="irisAddIcon"
|
||||||
|
alt="Iris Close"
|
||||||
|
@mousedown="handleControl('irisAdd', 'start')"
|
||||||
|
@mouseup="handleControl('irisAdd', 'stop')"
|
||||||
|
@mouseleave="handleControl('irisAdd', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="leftUpIcon"
|
||||||
|
alt="Left Up"
|
||||||
|
@mousedown="handleControl('leftUp', 'start')"
|
||||||
|
@mouseup="handleControl('leftUp', 'stop')"
|
||||||
|
@mouseleave="handleControl('leftUp', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="upIcon"
|
||||||
|
alt="Up"
|
||||||
|
@mousedown="handleControl('up', 'start')"
|
||||||
|
@mouseup="handleControl('up', 'stop')"
|
||||||
|
@mouseleave="handleControl('up', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="rightUpIcon"
|
||||||
|
alt="Right Up"
|
||||||
|
@mousedown="handleControl('rightUp', 'start')"
|
||||||
|
@mouseup="handleControl('rightUp', 'stop')"
|
||||||
|
@mouseleave="handleControl('rightUp', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="leftIcon"
|
||||||
|
alt="Left"
|
||||||
|
@mousedown="handleControl('left', 'start')"
|
||||||
|
@mouseup="handleControl('left', 'stop')"
|
||||||
|
@mouseleave="handleControl('left', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="centerIcon"
|
||||||
|
alt="Center"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="rightIcon"
|
||||||
|
alt="Right"
|
||||||
|
@mousedown="handleControl('right', 'start')"
|
||||||
|
@mouseup="handleControl('right', 'stop')"
|
||||||
|
@mouseleave="handleControl('right', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="leftDownIcon"
|
||||||
|
alt="Left Down"
|
||||||
|
@mousedown="handleControl('leftDown', 'start')"
|
||||||
|
@mouseup="handleControl('leftDown', 'stop')"
|
||||||
|
@mouseleave="handleControl('leftDown', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="downIcon"
|
||||||
|
alt="Down"
|
||||||
|
@mousedown="handleControl('down', 'start')"
|
||||||
|
@mouseup="handleControl('down', 'stop')"
|
||||||
|
@mouseleave="handleControl('down', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="direction-item">
|
||||||
|
<Icon
|
||||||
|
:icon="rightDownIcon"
|
||||||
|
alt="Right Down"
|
||||||
|
@mousedown="handleControl('rightDown', 'start')"
|
||||||
|
@mouseup="handleControl('rightDown', 'stop')"
|
||||||
|
@mouseleave="handleControl('rightDown', 'stop')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios' // 确保 axios 已经安装并引入
|
||||||
|
import { config } from '@/config/axios/config'
|
||||||
|
import {CameraControlApi} from '@/api/cameraControl/camera'
|
||||||
|
|
||||||
|
const { result_code, base_url, request_timeout } = config
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
cameraId: {
|
||||||
|
default: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
console.log(props.cameraId)
|
||||||
|
// 定义响应式数据
|
||||||
|
const zoomSubIcon = ref('ep:zoom-out') // 替换为实际的图标名称
|
||||||
|
const zoomAddIcon = ref('ep:zoom-in') // 替换为实际的图标名称
|
||||||
|
const focusSubIcon = ref('ep:minus') // 替换为实际的图标名称
|
||||||
|
const focusAddIcon = ref('ep:plus') // 替换为实际的图标名称
|
||||||
|
const irisSubIcon = ref('ep:minus') // 替换为实际的图标名称
|
||||||
|
const irisAddIcon = ref('ep:plus') // 替换为实际的图标名称
|
||||||
|
const leftUpIcon = ref('ep:top-left') // 替换为实际的图标名称
|
||||||
|
const upIcon = ref('ep:arrow-up') // 替换为实际的图标名称
|
||||||
|
const rightUpIcon = ref('ep:top-right') // 替换为实际的图标名称
|
||||||
|
const leftIcon = ref('ep:arrow-left') // 替换为实际的图标名称
|
||||||
|
const centerIcon = ref('ep:aim') // 替换为实际的图标名称
|
||||||
|
const rightIcon = ref('ep:arrow-right') // 替换为实际的图标名称
|
||||||
|
const leftDownIcon = ref('ep:bottom-left') // 替换为实际的图标名称
|
||||||
|
const downIcon = ref('ep:arrow-down') // 替换为实际的图标名称
|
||||||
|
const rightDownIcon = ref('ep:bottom-right') // 替换为实际的图标名称
|
||||||
|
|
||||||
|
const activeIcons = {
|
||||||
|
zoomSub: 'ep:zoom-out-active',
|
||||||
|
zoomAdd: 'ep:zoom-in-active',
|
||||||
|
focusSub: 'ep:minus-active',
|
||||||
|
focusAdd: 'ep:plus-active',
|
||||||
|
irisSub: 'ep:minus-active',
|
||||||
|
irisAdd: 'ep:plus-active',
|
||||||
|
leftUp: 'ep:top-left-active',
|
||||||
|
up: 'ep:arrow-up-active',
|
||||||
|
rightUp: 'ep:top-right-active',
|
||||||
|
left: 'ep:arrow-left-active',
|
||||||
|
center: 'ep:aim-active',
|
||||||
|
right: 'ep:arrow-right-active',
|
||||||
|
leftDown: 'ep:bottom-left-active',
|
||||||
|
down: 'ep:arrow-down-active',
|
||||||
|
rightDown: 'ep:bottom-right-active'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义控制方法
|
||||||
|
const handleControl = (action, state) => {
|
||||||
|
console.log(`${action}-${state}`)
|
||||||
|
const iconRef = `${action}Icon`
|
||||||
|
if (state === 'start') {
|
||||||
|
if (activeIcons[action]) {
|
||||||
|
eval(`${iconRef}.value = activeIcons[action]`)
|
||||||
|
}
|
||||||
|
} else if (state === 'stop') {
|
||||||
|
eval(`${iconRef}.value = '${eval(iconRef).value.replace('-active', '')}'`)
|
||||||
|
}
|
||||||
|
const data ={"id":props.cameraId}
|
||||||
|
CameraControlApi.cameraControl(`/camera/control/${action}/${state}`,data)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
// 关闭控制面板的逻辑
|
||||||
|
console.log('关闭控制面板')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
zoomSubIcon,
|
||||||
|
zoomAddIcon,
|
||||||
|
focusSubIcon,
|
||||||
|
focusAddIcon,
|
||||||
|
irisSubIcon,
|
||||||
|
irisAddIcon,
|
||||||
|
leftUpIcon,
|
||||||
|
upIcon,
|
||||||
|
rightUpIcon,
|
||||||
|
leftIcon,
|
||||||
|
centerIcon,
|
||||||
|
rightIcon,
|
||||||
|
leftDownIcon,
|
||||||
|
downIcon,
|
||||||
|
rightDownIcon,
|
||||||
|
handleControl,
|
||||||
|
close
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ptz-control-panel {
|
||||||
|
position: relative; /* 改为绝对定位 */
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
z-index: 1000; /* 确保浮在最上层 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-item img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 40px);
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction-item img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue