vue中播放m3u8格式实时监控画面(取流)--调用后端接口
实现目标:点击按钮,出现弹窗,弹窗中为m3u8格式的监控实时画面。实现效果:1.index.html文件中:<!-- 取流 --><link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet"><script src="https://cdn.b
·
实现目标:点击按钮,出现弹窗,弹窗中为m3u8格式的监控实时画面。
实现效果:
1.index.html文件中:
<!-- 取流 -->
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
2.安装:
cnpm install --save video.js
cnpm install --save videojs-contrib-hls
3.main.js文件中引入相关样式(样式可修改):
import 'video.js/dist/video-js.css'
4.相应的vue文件中:
import videojs from "video.js";
import "videojs-contrib-hls";
弹窗样式(template中):
<el-dialog
title="预 览"
:visible.sync="dialogVisible"
width="35%"
class="video-box"
>
<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="600"
height="330"
data-setup="{}"
>
<source id="source" :src="srcPath" type="application/x-mpegURL" />
</video>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">确 定</el-button>
</span></el-dialog
>
点击出现弹窗的按钮样式(template 中):
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="preview(scope.row.cameraIndexCode)"
title="预览"
>
预览
</el-button>
</template>
methods中:
preview(cameraIndexCode) {
this.dialogVisible = true;
this.srcPath = "";
this.indexCodeCamera = cameraIndexCode;
let param = {
cameraIndexCode: this.indexCodeCamera
};
// 获取摄影监控实时画面--调用接口
videoPreview(param).then((res) => {
if (res.status == 200) {
this.srcPath = res.data.data.url;
setTimeout(() => {
if (myVideo) {
myVideo.src(this.srcPath);
myVideo.play();
} else {
myVideo = videojs("myVideo", {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
});
myVideo.src(this.srcPath);
myVideo.play();
}
// myVideo.pause();
});
} else {
this.$message.warning("请稍后再试");
}
});
}
后端的swagger中:
更多推荐
已为社区贡献15条内容
所有评论(0)