|
|
|
|
@ -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 改为 1；GB28181 为 3；WebRTC 为 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({
|
|
|
|
|
const playVideo = () => {
|
|
|
|
|
player = TCPlayer('player-container-id', {
|
|
|
|
|
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, // 当true时，Video.js player将拥有流体大小，换句话说，它将按比例缩放以适应其容器
|
|
|
|
|
sources: [
|
|
|
|
|
{
|
|
|
|
|
type: 'rtmp/mp4', // 类型
|
|
|
|
|
src: 'rtmp://221.2.83.254:1935/live/2', // url地址，在使用本地的资源时，需要用require()引入，否则控制台会报错
|
|
|
|
|
src: 'http://221.2.83.254:7005/live/3.m3u8', // 播放地址
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
// notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息
|
|
|
|
|
controlBar: {
|
|
|
|
|
currentTimeDisplay: true,
|
|
|
|
|
progressControl: true, // 是否显示进度条
|
|
|
|
|
playbackRateMenuButton: true, // 是否显示调整播放倍速按钮
|
|
|
|
|
timeDivider: true, // 当前时间和持续时间的分隔符
|
|
|
|
|
durationDisplay: true, // 显示持续时间
|
|
|
|
|
remainingTimeDisplay: true, // 是否显示剩余时间功能
|
|
|
|
|
fullscreenToggle: true, // 是否显示全屏按钮
|
|
|
|
|
},
|
|
|
|
|
licenseUrl: 'http://221.2.83.254:7005/live/3.m3u8', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 视频播放
|
|
|
|
|
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 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);
|
|
|
|
|
|
