飞行作业对接

main
刘妍 3 months ago
parent 6147718a3c
commit 19cb5395db

@ -1,186 +1,195 @@
<!doctype html>
<html lang="zh" id="htmlRoot">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<title><%= VITE_GLOB_APP_TITLE %></title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/hc/hc.css">
<link href="/mapboxgl/mapbox-gl.css" rel="stylesheet">
<script src="/mapboxgl/mapbox-gl.js"></script>
<!-- <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> -->
<script src="/public/turf/turf-7.0.0.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7.0.0/turf.min.js"></script> -->
<!-- 腾讯云视频直播 -->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
<!-- 引入海康插件内容 -->
<script type="text/javascript" src="./public/monitor/monitorHK/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./public/monitor/monitorHK/jsencrypt.min.js"></script>
<script type="text/javascript" src="./public/monitor/monitorHK/jsWebControl-1.0.0.min.js"></script>
<!-- 引入乐橙插件内容 -->
<script type="text/javascript" src="./public/monitor/monitorLC/imouPlayer.js"></script>
<!-- 引入青犀插件内容 -->
<script type="text/javascript" src="./public/monitor/monitorQX/EasyPlayer-element.min.js"></script>
</head>
<body>
<div id="app">
<style>
html {
/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
line-height: 1.15;
}
html[data-theme='dark'] .app-loading {
background-color: #2c344a;
}
html[data-theme='dark'] .app-loading .app-loading-title {
color: rgb(255 255 255 / 85%);
}
.app-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f4f7f9;
}
.app-loading .app-loading-wrap {
display: flex;
position: absolute;
top: 50%;
left: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate3d(-50%, -50%, 0);
}
.app-loading .dots {
display: flex;
align-items: center;
justify-content: center;
padding: 98px;
}
.app-loading .app-loading-title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
color: rgb(0 0 0 / 85%);
font-size: 30px;
}
.app-loading .app-loading-logo {
display: block;
width: 90px;
margin: 0 auto;
margin-bottom: 20px;
}
.dot {
display: inline-block;
position: relative;
box-sizing: border-box;
width: 48px;
height: 48px;
margin-top: 30px;
transform: rotate(45deg);
animation: ant-rotate 1.2s infinite linear;
font-size: 32px;
}
.dot i {
display: block;
position: absolute;
width: 20px;
height: 20px;
transform: scale(0.75);
transform-origin: 50% 50%;
animation: ant-spin-move 1s infinite linear alternate;
border-radius: 100%;
opacity: 0.3;
background-color: #0065cc;
}
.dot i:nth-child(1) {
top: 0;
left: 0;
}
.dot i:nth-child(2) {
top: 0;
right: 0;
animation-delay: 0.4s;
}
.dot i:nth-child(3) {
right: 0;
bottom: 0;
animation-delay: 0.8s;
}
.dot i:nth-child(4) {
bottom: 0;
left: 0;
animation-delay: 1.2s;
}
@keyframes ant-rotate {
to {
transform: rotate(405deg);
}
}
@keyframes ant-rotate {
to {
transform: rotate(405deg);
}
}
@keyframes ant-spin-move {
to {
opacity: 1;
}
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>
<%= VITE_GLOB_APP_TITLE %>
</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/hc/hc.css">
<link href="/mapboxgl/mapbox-gl.css" rel="stylesheet">
<script src="/mapboxgl/mapbox-gl.js"></script>
<!-- <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> -->
@keyframes ant-spin-move {
to {
opacity: 1;
}
}
</style>
<div class="app-loading">
<div class="app-loading-wrap">
<div class="app-loading-dots">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div>
<div class="app-loading-title"><%= VITE_GLOB_APP_TITLE %></div>
<script src="/public/turf/turf-7.0.0.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7.0.0/turf.min.js"></script> -->
<!-- 腾讯云视频直播 -->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
<link href="https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.min.css" rel="stylesheet" />
<!--播放器脚本文件-->
<script src="https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.v5.3.2.min.js"></script>
<!-- 引入海康插件内容 -->
<script type="text/javascript" src="./public/monitor/monitorHK/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./public/monitor/monitorHK/jsencrypt.min.js"></script>
<script type="text/javascript" src="./public/monitor/monitorHK/jsWebControl-1.0.0.min.js"></script>
<!-- 引入乐橙插件内容 -->
<script type="text/javascript" src="./public/monitor/monitorLC/imouPlayer.js"></script>
<!-- 引入青犀插件内容 -->
<script type="text/javascript" src="./public/monitor/monitorQX/EasyPlayer-element.min.js"></script>
</head>
<body>
<div id="app">
<style>
html {
/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
line-height: 1.15;
}
html[data-theme='dark'] .app-loading {
background-color: #2c344a;
}
html[data-theme='dark'] .app-loading .app-loading-title {
color: rgb(255 255 255 / 85%);
}
.app-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f4f7f9;
}
.app-loading .app-loading-wrap {
display: flex;
position: absolute;
top: 50%;
left: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate3d(-50%, -50%, 0);
}
.app-loading .dots {
display: flex;
align-items: center;
justify-content: center;
padding: 98px;
}
.app-loading .app-loading-title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
color: rgb(0 0 0 / 85%);
font-size: 30px;
}
.app-loading .app-loading-logo {
display: block;
width: 90px;
margin: 0 auto;
margin-bottom: 20px;
}
.dot {
display: inline-block;
position: relative;
box-sizing: border-box;
width: 48px;
height: 48px;
margin-top: 30px;
transform: rotate(45deg);
animation: ant-rotate 1.2s infinite linear;
font-size: 32px;
}
.dot i {
display: block;
position: absolute;
width: 20px;
height: 20px;
transform: scale(0.75);
transform-origin: 50% 50%;
animation: ant-spin-move 1s infinite linear alternate;
border-radius: 100%;
opacity: 0.3;
background-color: #0065cc;
}
.dot i:nth-child(1) {
top: 0;
left: 0;
}
.dot i:nth-child(2) {
top: 0;
right: 0;
animation-delay: 0.4s;
}
.dot i:nth-child(3) {
right: 0;
bottom: 0;
animation-delay: 0.8s;
}
.dot i:nth-child(4) {
bottom: 0;
left: 0;
animation-delay: 1.2s;
}
@keyframes ant-rotate {
to {
transform: rotate(405deg);
}
}
@keyframes ant-rotate {
to {
transform: rotate(405deg);
}
}
@keyframes ant-spin-move {
to {
opacity: 1;
}
}
@keyframes ant-spin-move {
to {
opacity: 1;
}
}
</style>
<div class="app-loading">
<div class="app-loading-wrap">
<div class="app-loading-dots">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div>
<div class="app-loading-title">
<%= VITE_GLOB_APP_TITLE %>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

@ -134,6 +134,7 @@
"showdown": "^2.1.0",
"shpjs": "^6.1.0",
"sortablejs": "^1.15.1",
"tcplayer.js": "^5.3.4",
"terraformer-wkt-parser": "^1.2.1",
"three": "^0.145.0",
"tinymce": "^5.10.9",

@ -0,0 +1,25 @@
import { defHttp } from '@/utils/http/axios';
import { StartLiveParams ,SetCameraVideoParams} from './model/index';
enum Api {
StartLive = '/api/AirportMaintenance/StartLive',
EndLive = '/api/AirportMaintenance/EndLive',
SetCameraVideo = '/api/AirportMaintenance/SetCameraVideo',
}
export const startLive = (params: StartLiveParams) =>
defHttp.post({
url: Api.StartLive,
params,
});
export const endLive = (params: StartLiveParams) =>
defHttp.post({
url: Api.EndLive,
params,
});
export const setCameraVideo = (params: SetCameraVideoParams) =>
defHttp.post({
url: Api.SetCameraVideo,
params,
});

@ -0,0 +1,16 @@
/**
* @description: Request list return value
*/
export interface StartLiveParams {
videoId?: string;
urlType?: number;
url?: string;
quality?: number;
}
/**
* @description: Request list return value
*/
export interface SetCameraVideoParams {
videoId?: string;
videoQuality?: number;
}

@ -16,7 +16,7 @@ import { router, setupRouter } from '@/router';
import { setupRouterGuard } from '@/router/guard';
import { setupStore } from '@/store';
import VideoPlayer from 'vue-video-player/src';
import VideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import App from './App.vue';

@ -65,10 +65,10 @@
getClient().on('message', (topic, message, packet) => {
const rs = JSON.parse(message);
console.log(rs);
airportAllVal.value = rs;
if (!rs.data.wind_speed) {
} else {
//
airportAllVal.value = rs;
}
//
// uavAllVal.value =

@ -3,17 +3,72 @@
<div class="airport-title">
<div class="title">机场直播</div>
<div class="title-icon">
<RedoOutlined />
<RedoOutlined @click="startLiveFun" />
<a-divider type="vertical" style="border-color: #4e5778" />
<ExpandOutlined />
<a-divider type="vertical" style="border-color: #4e5778" />
<PoweroffOutlined />
<PoweroffOutlined @click="closeLive" />
</div>
</div>
<div class="player">
<video
id="player-container-id"
width="414"
height="270"
preload="auto"
playsinline
webkit-playsinline
>
</video>
</div>
</div>
</template>
<script setup lang="ts">
import { RedoOutlined, ExpandOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
import { onMounted, onBeforeUnmount } from 'vue';
// import 'videojs-contrib-hls';
import { startLive, endLive } from '@/api/workmanagement/airportMaintenance';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css'; //
let player;
const startLiveFun = () => {
const querys = {
urlType: 1, // 0 = RTMP 1GB28181 3WebRTC 4
url: 'rtmp://221.2.83.254:1935/live/2',
//video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
videoId: '8UUXN5400A079H/165-0-7/normal-0',
quality: 1, // 0=1=2=3=4=
};
startLive(querys).then((res) => {
console.log(res);
player = TCPlayer('player-container-id', {
width: 360,
height: 200,
sources: [
{
src: 'http://221.2.83.254:7005/live/2.m3u8', //
},
],
licenseUrl: 'http://221.2.83.254:7005/live/2.m3u8', // license license licenseUrl
});
});
};
const closeLive = () => {
endLive({
videoId: '8UUXN5400A079H/165-0-7/normal-0',
}).then((res) => {
console.log(res);
});
};
onMounted(() => {
startLiveFun();
});
//
onBeforeUnmount(() => {
player.dispose();
player = null;
});
</script>
<style lang="less" scoped>
.airport-live {

@ -27,19 +27,20 @@
<a-divider type="vertical" style="border-color: #4e5778" />
<ExpandOutlined />
<a-divider type="vertical" style="border-color: #4e5778" />
<PoweroffOutlined />
<PoweroffOutlined @click="closeLive" />
</div>
</div>
<div class="live-type">广角</div>
<div class="player">
<video-player
ref="videoPlayer"
class="player-video"
:playsinline="false"
:options="playOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
/>
<video
id="player-container-id"
width="414"
height="270"
preload="auto"
playsinline
webkit-playsinline
>
</video>
</div>
</div>
</template>
@ -48,8 +49,11 @@
import { reactive, onMounted, ref } from 'vue';
import { buildGUID } from '@/utils/uuid';
import { getClient, createConnection } from '@/utils/mqtt';
import { startLive, endLive, setCameraVideo } from '@/api/workmanagement/airportMaintenance';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css'; //
const srcUrl = ref('rtmp://221.2.83.254:1935/live/2');
let player;
const selectVal = reactive({
camera: 1,
resolution: 1,
@ -89,44 +93,13 @@
],
});
const resolutionChange = (val: any) => {
console.log(val);
const requestData = {
bid: buildGUID(),
method: 'live_start_push',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {
url_type: 1, // 0 = RTMP 1GB28181 3WebRTC 4
url: 'rtmp://221.2.83.254:1935/live/2',
//video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
video_id: '8UUXN5400A079H/165-0-7/normal-0',
video_quality: val, // 0=1=2=3=4=
},
const querys = {
videoId: '1581F8HGX254V00A0BUY/165-0-7/normal-0',
videoQuality: val, // 0=1=2=3=4=
};
console.log(requestData);
const publish = {
topic: 'thing/product/8UUXN5400A079H/services',
qos: 0,
payload: JSON.stringify(requestData),
};
const { topic, qos, payload } = publish;
getClient().publish(topic, payload, { qos }, (error, res) => {
if (error) {
console.log('Publish error', error);
}
console.log('Publish success', res);
//
const timer = window.setInterval(() => {
if (getClient() != null) {
// Received
getClient().on('message', (topic, message, packet) => {
const rs = JSON.parse(message);
console.log(rs);
});
} else {
console.log('开启定时器接收数据2');
}
}, 5000);
setCameraVideo(querys).then((res) => {
console.log(res);
playVideo();
});
};
const cameraChange = (val: any) => {
@ -135,7 +108,7 @@
bid: buildGUID(),
data: {
camera_position: 0,
video_id: '8UUXN5400A079H/165-0-7/normal-0',
video_id: '1581F8HGX254V00A0BUY/165-0-7/normal-0',
},
method: 'live_camera_change',
tid: buildGUID(),
@ -146,66 +119,30 @@
qos: 0,
payload: JSON.stringify(requestData),
};
const { topic, qos, payload } = publish;
getClient().publish(topic, payload, { qos }, (error, res) => {
if (error) {
console.log('Publish error', error);
}
console.log('Publish success', res);
});
};
const data = reactive({
playedTime: 0,
currentTime: 0,
maxTime: 0,
});
const playOptions = ref({
width: 380,
height: 180,
// playbackRates: [1.0], //
autoplay: true, // true,
// muted: false, //
// loop: false, //
// preload: 'auto', // <video>auto,
// language: 'zh-CN',
// aspectRatio: '16:9', // 使 - "16:9""4:3"
// fluid: true, // trueVideo.js player
sources: [
{
type: 'rtmp/mp4', //
src: 'rtmp://221.2.83.254:1935/live/2', // url使require()
},
],
// notSupportedMessage: '', // Video.js
controlBar: {
currentTimeDisplay: true,
progressControl: true, //
playbackRateMenuButton: true, //
timeDivider: true, //
durationDisplay: true, //
remainingTimeDisplay: true, //
fullscreenToggle: true, //
},
});
//
const onPlayerPlay = (player) => {
console.log('播放了');
console.log(player);
let playTime = 0;
if (Number(Math.floor(data.playedTime)) === Number(Math.floor(player.duration()))) {
data.playedTime = 0;
playTime = 0;
} else if (Number(Math.floor(player.currentTime())) !== Number(Math.floor(data.playedTime))) {
playTime = data.playedTime;
player.currentTime(playTime);
}
const playVideo = () => {
player = TCPlayer('player-container-id', {
width: 380,
height: 180,
sources: [
{
src: 'http://221.2.83.254:7005/live/3.m3u8', //
},
],
licenseUrl: 'http://221.2.83.254:7005/live/3.m3u8', // license license licenseUrl
});
};
//
const onPlayerPause = (player) => {
console.log('暂停中');
console.log(player);
data.playedTime = player.currentTime();
const closeLive = () => {
endLive({
videoId: '8UUXN5400A079H/165-0-7/normal-0',
}).then((res) => {
console.log(res);
});
};
onMounted(() => {
resolutionChange(1);

Loading…
Cancel
Save