|
@@ -0,0 +1,197 @@
|
|
|
|
+<template>
|
|
|
|
+ <ant-modal
|
|
|
|
+ modalWidth="1500"
|
|
|
|
+ modalHeight="600"
|
|
|
|
+ :visible="cameraOpen"
|
|
|
|
+ :modal-title="cameraTitle"
|
|
|
|
+ :adjust-size="true"
|
|
|
|
+ @cancel="cancel"
|
|
|
|
+ >
|
|
|
|
+ <div slot="content" style="padding: 10px;height: 100%;width: 100%;">
|
|
|
|
+ <a-row :gutter="2" style="height: 80%;width: 100%;" v-if="sysShipCameraList.length > 0">
|
|
|
|
+ <a-col :span="12" v-for="item in sysShipCameraList" :key="item.shipId +'_'+item.cameraDeviceSn">
|
|
|
|
+ <a-card :title="item.cameraDeviceName" :bordered="false">
|
|
|
|
+ <div class="videoPlayer">
|
|
|
|
+ <div class="play-videos">
|
|
|
|
+ <div :id="item.shipId +'_'+item.cameraDeviceSn" style="width: 100% !important;height: 100% !important; position:relative" class="xgPlayer"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <a-row :gutter="2" style="height: 80%;width: 100%;" v-else>
|
|
|
|
+ <a-col :span="12">
|
|
|
|
+ <a-card title="未绑定摄像头" :bordered="false">
|
|
|
|
+ <div class="videoPlayer">
|
|
|
|
+ <div class="play-videos">
|
|
|
|
+ <div class="xgPlayer">未绑定摄像头</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="12" >
|
|
|
|
+ <a-card title="未绑定摄像头" :bordered="false">
|
|
|
|
+ <div class="videoPlayer">
|
|
|
|
+ <div class="play-videos">
|
|
|
|
+ <div class="xgPlayer">未绑定摄像头</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </div>
|
|
|
|
+ <template slot="footer">
|
|
|
|
+ <a-button :disabled="disabled" @click="cancel">
|
|
|
|
+ 关闭
|
|
|
|
+ </a-button>
|
|
|
|
+ </template>
|
|
|
|
+ </ant-modal>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import AntModal from '@/components/pt/dialog/AntModal.vue'
|
|
|
|
+import { getShipCameraList } from '@/api/system/sysShip'
|
|
|
|
+import { getLive } from '@/api/camera/camera'
|
|
|
|
+import Player from 'xgplayer'
|
|
|
|
+import FlvPlugin from 'xgplayer-flv'
|
|
|
|
+import HlsPlugin from 'xgplayer-hls'
|
|
|
|
+import 'xgplayer/dist/index.min.css'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'SysShipCameraLive',
|
|
|
|
+ props: {
|
|
|
|
+ shipId: {
|
|
|
|
+ type: String,
|
|
|
|
+ required: true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ AntModal
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ cameraOpen: false,
|
|
|
|
+ closeDialog: true,
|
|
|
|
+ spinning: false,
|
|
|
|
+ delayTime: 100,
|
|
|
|
+ labelCol: { span: 2 },
|
|
|
|
+ wrapperCol: { span: 14 },
|
|
|
|
+ loading: false,
|
|
|
|
+ disabled: false,
|
|
|
|
+ total: 0,
|
|
|
|
+ cameraDeviceSn: '',
|
|
|
|
+ cameraTitle: '视频查看',
|
|
|
|
+ // 表单参数
|
|
|
|
+ sysShipCameraList: [],
|
|
|
|
+ player: null, // 实例
|
|
|
|
+ xOptions: {
|
|
|
|
+ id: '', // 播放器容器
|
|
|
|
+ isLive: true,
|
|
|
|
+ fluid: false,
|
|
|
|
+ fitVideoSize: 'auto',
|
|
|
|
+ videoFillMode: 'auto',
|
|
|
|
+ enableContextmenu: true,
|
|
|
|
+ loop: false, // 是否自动循环
|
|
|
|
+ lang: 'zh-cn', // 语言,'en', 'zh-cn', 'zh-tw'
|
|
|
|
+ screenShot: {// 是否允许截图(按钮)
|
|
|
|
+ saveImg: true,
|
|
|
|
+ quality: 0.92,
|
|
|
|
+ type: 'image/png',
|
|
|
|
+ format: '.png'
|
|
|
|
+ },
|
|
|
|
+ playsinline: false,
|
|
|
|
+ keyShortcut: 'true',
|
|
|
|
+ controls: {
|
|
|
|
+ autoHide: true,
|
|
|
|
+ mode: 'bottom'
|
|
|
|
+ },
|
|
|
|
+ cssullScreen: {
|
|
|
|
+ disable: true
|
|
|
|
+ },
|
|
|
|
+ ignores: ['cssfullscreen', 'playbackrate'],
|
|
|
|
+ playbackrate: {
|
|
|
|
+ disable: true
|
|
|
|
+ },
|
|
|
|
+ videoInit: true, // 自动预加载
|
|
|
|
+ volume: 0.7, // 初始化音量
|
|
|
|
+ autoplay: true,
|
|
|
|
+ url: ''
|
|
|
|
+ },
|
|
|
|
+ initVolume: 0.5
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ if (this.shipId) {
|
|
|
|
+ this.getShipCameraList()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ open() {
|
|
|
|
+ this.cameraOpen = true
|
|
|
|
+ },
|
|
|
|
+ cancel() {
|
|
|
|
+ this.cameraOpen = false
|
|
|
|
+ this.$emit('close')
|
|
|
|
+ },
|
|
|
|
+ getShipCameraList() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ this.sysShipCameraList = []
|
|
|
|
+ getShipCameraList(this.shipId).then(response => {
|
|
|
|
+ this.sysShipCameraList = response.data
|
|
|
|
+ this.loading = false
|
|
|
|
+ this.getLiveUrl()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getLiveUrl() {
|
|
|
|
+ this.sysShipCameraList.forEach(item => {
|
|
|
|
+ const param = {
|
|
|
|
+ deviceSn: item.cameraDeviceSn,
|
|
|
|
+ channelNo: 1
|
|
|
|
+ }
|
|
|
|
+ getLive(param).then((response) => {
|
|
|
|
+ // 初始话播放器
|
|
|
|
+ // item.videoUrl = response.data.url
|
|
|
|
+ this.initPlayer(response.data.url, item.shipId + '_' + item.cameraDeviceSn)
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // =========================1,设置播放器必要参数===================
|
|
|
|
+ initPlayer(url, id) {
|
|
|
|
+ console.log('初始化播放器!')
|
|
|
|
+ if (!url) return console.warn('url is not esist')
|
|
|
|
+ if (url) {
|
|
|
|
+ this.xOptions.url = url
|
|
|
|
+ if (this.url.toLowerCase().indexOf('.flv') > 0) {
|
|
|
|
+ this.xOptions.plugins = [FlvPlugin]
|
|
|
|
+ } else {
|
|
|
|
+ this.xOptions.plugins = [HlsPlugin]
|
|
|
|
+ }
|
|
|
|
+ this.xOptions.id = id
|
|
|
|
+ this.xOptions.volume = this.initVolume
|
|
|
|
+ this.player = new Player(this.xOptions)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style scoped>
|
|
|
|
+.videoPlayer{
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 10;
|
|
|
|
+ top: 18;
|
|
|
|
+ z-index: 99;
|
|
|
|
+}
|
|
|
|
+.play-videos {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 380px;
|
|
|
|
+ background: black;
|
|
|
|
+ margin: 5px auto 1px 0;
|
|
|
|
+ .xgPlayer .dplayer-video-wrap {
|
|
|
|
+ width: 100% !important;
|
|
|
|
+ height: 100% !important;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|