|
|
@@ -85,6 +85,9 @@
|
|
|
</el-col>
|
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
</el-row>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
<div class=" infinite-list" :style="dynamicStyle">
|
|
|
<el-row :gutter="10" v-if="warnManageList.length !=0" style="width: 100%;margin-left: 0;">
|
|
|
<el-col :span="6" v-for="(item,index) in warnManageList" :key="index" style="cursor: pointer;">
|
|
|
@@ -115,7 +118,7 @@
|
|
|
<!-- + baseUrl -->
|
|
|
<!-- <source :src="item.videoAddress " />
|
|
|
</video> -->
|
|
|
- <div ref="videoPlayer" style="width: 100%;height: 150px;" class="video-player"></div>
|
|
|
+
|
|
|
<!-- <h265-player url="http://192.168.9.240:5010/prod-api/profile/videoRecored/recording_20250627_092541_357_离岗.mp4" @error="handleError"></h265-player> -->
|
|
|
</div>
|
|
|
|
|
|
@@ -269,8 +272,11 @@ const defaultSettings = require("@/settings.js");
|
|
|
import videojs from 'video.js';
|
|
|
import 'video.js/dist/video-js.css';
|
|
|
import H265Player from 'vue-h265-player';
|
|
|
+import 'videojs-flash'
|
|
|
import mqttHandle from "../../../utils/mqttHandler.js"
|
|
|
import mqtt from 'mqtt';
|
|
|
+// import flvjs from 'flv.js/dist/flv.min.js'
|
|
|
+import flvjs from "flv.js";
|
|
|
import { MqttClient } from 'mqtt'
|
|
|
// 状态变量
|
|
|
const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
|
|
|
@@ -354,11 +360,14 @@ export default {
|
|
|
staffTrainTimeList:[],
|
|
|
tableMaxHeight:'200',
|
|
|
receiveNews: "",
|
|
|
+ videoShow: false,
|
|
|
+ flvPlayer:null,
|
|
|
+ player: null,
|
|
|
player: null,
|
|
|
options: {
|
|
|
// 视频源
|
|
|
sources: [{
|
|
|
- src: 'http://192.168.9.240:5010/prod-api/profile/videoRecored/recording_20250627_092541_357_离岗.mp4',
|
|
|
+ src: '../../../assets/images/recording_20250626_210102_169_离岗.png',
|
|
|
type: 'video/mp4'
|
|
|
}],
|
|
|
// 其他配置选项...
|
|
|
@@ -417,15 +426,16 @@ export default {
|
|
|
this.changeTableMaxHeight()
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+ // this.init('../../../assets/images/recording_20250626_210102_169_离岗.mp4')
|
|
|
// this.createMqtt() // 建立mqtt通信
|
|
|
+ // this.fullScreen()
|
|
|
window.onresize = () => {
|
|
|
this.changeTableMaxHeight()
|
|
|
}
|
|
|
this.changeTableMaxHeight()
|
|
|
- this.player = videojs(this.$refs.videoPlayer, this.options, () => {
|
|
|
- console.log('player is ready');
|
|
|
- });
|
|
|
+ // this.player = videojs(this.$refs.videoPlayer, this.options, () => {
|
|
|
+ // console.log('player is ready');
|
|
|
+ // });
|
|
|
},
|
|
|
|
|
|
|
|
|
@@ -482,24 +492,7 @@ export default {
|
|
|
this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
- // 创mqtt最终版
|
|
|
- mqttzz(){
|
|
|
- // 创建一个连接到MQTT broker的客户端实例
|
|
|
- // 连接成功后，订阅一个主题
|
|
|
- client.on('connect', function () {
|
|
|
- client.subscribe('test/topic', function (err) {
|
|
|
- if (!err) {
|
|
|
- console.log('成功订阅 test/topic 主题！')
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
|
|
|
- // 监听订阅主题上的消息
|
|
|
- client.on('message', function (topic, message) {
|
|
|
- // 处理接收到的消息
|
|
|
- console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
|
|
|
- })
|
|
|
- },
|
|
|
isac(val){
|
|
|
console.log(5,val)
|
|
|
val.isnum = !val.isnum
|
|
|
@@ -527,6 +520,49 @@ export default {
|
|
|
}
|
|
|
|
|
|
},
|
|
|
+ init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
|
|
|
+ setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
|
|
|
+ var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
|
|
|
+ this.isshiwa = true
|
|
|
+ if (flvjs.isSupported()) {
|
|
|
+ //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
|
|
|
+ if (this.player !== null) {
|
|
|
+ this.player.pause();
|
|
|
+ this.player.unload();
|
|
|
+ this.player.detachMediaElement();
|
|
|
+ this.player.destroy();
|
|
|
+ this.player = null;
|
|
|
+ }
|
|
|
+ this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
|
|
|
+ {
|
|
|
+ type: "mp4",
|
|
|
+ url: val, //你的url地址
|
|
|
+ isLive: true, //数据源是否为直播流
|
|
|
+ hasAudio: false, //数据源是否包含有音频
|
|
|
+ hasVideo: true, //数据源是否包含有视频
|
|
|
+ enableStashBuffer: true, //是否启用缓存区
|
|
|
+ },
|
|
|
+ {
|
|
|
+ enableWorker: false, //不启用分离线程
|
|
|
+ enableStashBuffer: false, //关闭IO隐藏缓冲区
|
|
|
+ autoCleanupSourceBuffer: true, //自动清除缓存
|
|
|
+ lazyLoad: false,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.isshoe = true
|
|
|
+ this.player.attachMediaElement(videoElement); //放到dom中去
|
|
|
+
|
|
|
+ //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
|
|
|
+ // setTimeout(this.player.play(), 48000);
|
|
|
+ setTimeout(() =>{
|
|
|
+ //到时间时只执行一次就停止
|
|
|
+ this.player.load();//准备完成
|
|
|
+ this.player.play()
|
|
|
+ console.log('播放')
|
|
|
+ },900)
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
/** 查询通道管理列表 */
|
|
|
getListt() {
|
|
|
this.loading = true
|
wangmengwei