Skip to content

蒋秀川 / miniProject

Go to a project
Commit 77142096 by Tianqing Liu
Options

feat: 只有播放，才可以点击截图

1 parent a81a89f0
Inline Side-by-side
Showing 5 changed files with 58 additions and 16 deletions
h5/src/components/extension/index.vue
<template> <template>
<div class="extension-page"> <div class="extension-page">
<div class="j-player-wrapper"> <div class="j-player-wrapper">
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true" @magnificationChange="magnificationChange"/> <vion-player
ref="vionPlayer"
:watermarkText="params.watermarkText"
:hideControls="false"
:showPtz="false"
:isXCXPage="true"
@magnificationChange="magnificationChange"
@play-success="handlePlaySuccess"
/>
</div> </div>
<!-- 时间线组件 --> <!-- 时间线组件 -->
<div class="extension-time-box"> <div class="extension-time-box">
<videoTime v-if="params.gateUnid" ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid"/> <videoTime
v-if="params.gateUnid"
ref="videoTime"
@videoTimeChange="videoTimeChange"
@ptzControlClick="ptzControlClick"
:dateFormatType="dateFormatType"
:magnification="magnification"
:ptzEnable="params.ptzEnable"
:gateUnid="params.gateUnid"
/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getUrlParams } from './utils'; // import { getUrlParams } from './utils';
import vionPlayer from '../vionPlayer/index.vue'; import vionPlayer from '../vionPlayer/index.vue';
import videoTime from './videoTime.vue'; import videoTime from './videoTime.vue';
import moment from "moment"; import moment from "moment";
import tourApi from '@/api'; import tourApi from '@/api';
import { import { Toast } from 'vant';
Toast
} from 'vant';
/** /**
* 此部分负责： * 此部分负责：
* 1. iframe通信postmessage * 1. iframe通信postmessage
...@@ -73,6 +88,11 @@ export default { ...@@ -73,6 +88,11 @@ export default {
setPTZEnable(status) { setPTZEnable(status) {
this.$refs.videoTime.setPTZEnable(status) this.$refs.videoTime.setPTZEnable(status)
}, },
handlePlaySuccess() {
console.log('handlePlaySuccess-extension')
// 播放成功
this.$emit('play-success');
},
// 播放倍率改变 // 播放倍率改变
magnificationChange(val) { magnificationChange(val) {
this.magnification = val this.magnification = val
......
h5/src/components/vionPlayer/index.vue
...@@ -110,11 +110,12 @@ export default { ...@@ -110,11 +110,12 @@ export default {
this.player.height = data.height; this.player.height = data.height;
}); });
/* playerIns.on('play', (flag) => { playerIns.on('play', () => {
console.log('on-play', flag); console.log('on-play-success');
this.playing = true; this.$emit('play-success');
// this.playing = true;
}); });
playerIns.on('pause', (flag) => { /* playerIns.on('pause', (flag) => {
console.log('on-pause', flag); console.log('on-pause', flag);
this.playing = false; this.playing = false;
}); */ }); */
......
h5/src/views/video/controller.vue
...@@ -3,13 +3,20 @@ ...@@ -3,13 +3,20 @@
<van-action-bar> <van-action-bar>
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" /> <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
<van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" /> <van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" />
<van-action-bar-button type="danger" color="#387CF5" style="height: 44px" text="截图巡检" @click="onClickButton" /> <van-action-bar-button
type="danger"
color="#387CF5"
style="height: 44px"
text="截图巡检"
:disabled="!screenshotEnable"
@click="onClickButton"
/>
</van-action-bar> </van-action-bar>
</div> </div>
</template> </template>
<script setup> <script setup>
const props = defineProps(['ptzEnable']) const props = defineProps(['ptzEnable', 'screenshotEnable'])
const emit = defineEmits(['screenshot']) const emit = defineEmits(['screenshot'])
function onClickIcon(type) { function onClickIcon(type) {
......
h5/src/views/video/index.vue
...@@ -160,7 +160,11 @@ ...@@ -160,7 +160,11 @@
</div> </div>
</div> </div>
<div v-else> <div v-else>
<livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer> <livePlayer
ref="vionPlayer"
@play-success="handlePlaySuccess"
@screenshotEnd="screenshotEnd"
></livePlayer>
<!--TODO: 暂时不需要了--> <!--TODO: 暂时不需要了-->
<div style="display: none"> <div style="display: none">
<div class="tour-btns" v-if="paramObj.type == 'titem'"> <div class="tour-btns" v-if="paramObj.type == 'titem'">
...@@ -293,12 +297,14 @@ ...@@ -293,12 +297,14 @@
<VideoController <VideoController
v-if="originUser === 'record'" v-if="originUser === 'record'"
:ptz-enable="ptzEnableInController" :ptz-enable="ptzEnableInController"
:screenshotEnable="isAllowScreenshot"
@screenshot="handleScreenshot" @screenshot="handleScreenshot"
@showMonitor="navBack" @showMonitor="navBack"
@showPTZ="handleShowPTZ" @showPTZ="handleShowPTZ"
/> />
<ProcessingController <ProcessingController
v-else v-else
:screenshotEnable="isAllowScreenshot"
@screenshot="handleScreenshot" @screenshot="handleScreenshot"
@back="handleBack" @back="handleBack"
/> />
...@@ -320,8 +326,13 @@ import parse from "url-param-parser"; ...@@ -320,8 +326,13 @@ import parse from "url-param-parser";
// let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=8eaf1373-654b-4cf2-a3c7-f90d42cba574&type=undefined&id=632&name=会议室门口&mallId=9217&mallName=河南分公司&bookmark=false&channelNo=4&deviceSerial=F16423875&gateUnid=cf21f4a8-65c6-11ee-837e-00163e143ecd&ptzEnable=0&aiChannelId=&mallOrgName=办公室&accountId=337&terminalType=devtools&newLevel=' // 萤石 // let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=8eaf1373-654b-4cf2-a3c7-f90d42cba574&type=undefined&id=632&name=会议室门口&mallId=9217&mallName=河南分公司&bookmark=false&channelNo=4&deviceSerial=F16423875&gateUnid=cf21f4a8-65c6-11ee-837e-00163e143ecd&ptzEnable=0&aiChannelId=&mallOrgName=办公室&accountId=337&terminalType=devtools&newLevel=' // 萤石
const isAllowScreenshot = ref(false) const isAllowScreenshot = ref(false)
function handlePlaySuccess() {
console.log('handlePlaySuccess-video')
isAllowScreenshot.value = true;
}
function handleScreenshot() { function handleScreenshot() {
console.log('handleScreenshot') console.log('handleScreenshot-video')
isAllowScreenshot.value = false;
goCaptureImg() goCaptureImg()
} }
// const paramObj = parse(url).search || {} // const paramObj = parse(url).search || {}
...@@ -936,6 +947,9 @@ const goCaptureImg = () => { ...@@ -936,6 +947,9 @@ const goCaptureImg = () => {
}; };
// 截图出口 // 截图出口
const screenshotEnd = (imgData) => { const screenshotEnd = (imgData) => {
// 截图成功后，设置
isAllowScreenshot.value = true;
console.log(imgData); console.log(imgData);
let reg = new RegExp("data:image/jpeg;base64,"); let reg = new RegExp("data:image/jpeg;base64,");
let regPng = new RegExp("data:image/png;base64,"); let regPng = new RegExp("data:image/png;base64,");
......
h5/src/views/video/processingController.vue
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<div class="processing-container"> <div class="processing-container">
<van-button type="default" size="normal" style="margin-right: 10px;" @click="handleBack">返回</van-button> <van-button type="default" size="normal" style="margin-right: 10px;" @click="handleBack">返回</van-button>
<!--icon="plus"--> <!--icon="plus"-->
<van-button type="primary" size="normal" @click="handleScreenshot">截图反馈</van-button> <van-button type="primary" size="normal" :disabled="!screenshotEnable" @click="handleScreenshot">截图反馈</van-button>
</div> </div>
</template> </template>
<script setup> <script setup>
const props = defineProps(['originUser']) // processing origin const props = defineProps(['originUser', 'screenshotEnable']) // processing origin
const emit = defineEmits(['screenshot', 'back']) const emit = defineEmits(['screenshot', 'back'])
function handleScreenshot(type) { function handleScreenshot(type) {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!