index.vue

<template>
	<div class="extension-page">
		<div class="j-player-wrapper">
				<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :watermarkOpacity="params.watermarkOpacity" :hideControls="false" :showPtz="false" :isXCXPage="true" @magnificationChange="magnificationChange"/>
		</div>
		<!-- 时间线组件 -->
		<div class="extension-time-box">
			<videoTime ref="videoTimeRef" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey" @screenshot="screenshot"/>
		</div>
	</div>

</template>


<script>
import { getUrlParams } from './utils';
import vionPlayer from '@/components/vionPlayer';
import videoTime from './videoTime';
import moment from "moment";
import tourApi from '@/api';
var {CryptoJS} = require('./aes')
import {
		Toast
	} from 'vant';
/**
 * 此部分负责：
 * 1. iframe通信postmessage
 * 2. url获取参数window.location
 * 3. 对接小程序需求
 */
export default {
  name: 'JPlayerExtension',
  components: {
    vionPlayer,
		videoTime,
  },
  data() {
    return {
      isNoBack: true,
			datetimeRange: [],
      params: {
        gateUnid: '',
        watermarkText: '',
				watermarkOpacity:'',
				appKey:'',
				ptzEnable:'',
				gateName:'',
				terminalType:'',
				userKey:'',
				restaurantId:'',
				playbackTime:'',
      },
			panTiltList:{
				up:0,
				down:1,
				left:2,
				right:3,
				leftUp:4,
				leftDown:5,
				rightUp:6,
				rightDown:7,
				zoomExpand:8,
				zoomNarrow:9,
				focusNear:10,
				focusFar:11,
				stop:-1
			},
			nowPanTilt:'',
			terminalType:'',
			dateFormatType:'YYYY-MM-DD',
			magnification:1,
    }
  },
  created() {
    this.init();
  },
  mounted() {
		window.playWebVideo = this.playWebVideo;
    window.stopPlay = this.stopPlay;
    window.screenshot = this.screenshot;
	},
  methods: {
		// 播放倍率改变
		magnificationChange(val) {
			this.magnification = val
		},
		// 时间线改变
		videoTimeChange(val) {
			let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
			let nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
			if(valTime != nowTime){
				this.getVideoAddress(valTime,nowTime)
			} else {
				this.getVideoAddress()
			}
		},
		// 云台控制
		ptzControlClick(type) {
			console.log(type)
			let par = {
				direction:this.panTiltList[type],
				speed:2,
				gateUnid:this.params.gateUnid,
				appKey:this.params.appKey,
			}
			if(type != 'stop') {
				this.nowPanTilt = this.panTiltList[type]
			} else {
				par.direction = this.nowPanTilt
			}
			// 加密
			let parStr = this.aesEncrypt(par)
			if(type == 'stop') {
				tourApi.ptzStop({param:parStr}).then(res => {
					console.log(res)
				})
			} else {
				tourApi.ptzStart({param:parStr}).then(res => {
					console.log(res)
					if(res.data&&res.data.code != 200) {
						Toast.fail('云台当前操作失败');
					}
				})
			}
		},
		init() {
		  // 通过URL获取相关参数
		  const urlParamsMap = getUrlParams(window.location.hash);
		  console.log('urlParamsMap', urlParamsMap);
			urlParamsMap.playbackTime = urlParamsMap.playbackTime?moment(urlParamsMap.playbackTime*1).format('YYYY-MM-DD HH:mm:ss'):'';
		  Object.keys(this.params).forEach(key => {
		    if (urlParamsMap[key]) {
		      this.params[key] = urlParamsMap[key];
		    }
		  });
			console.log(this.params)
			// this.params = obj
			//利用iframe的onload事件刷新页面
			document.title = this.params.gateName||'视频详情'
			var iframe = document.createElement('iframe');
			iframe.style.visibility = 'hidden'; 
			iframe.style.width = '1px'; 
			iframe.style.height = '1px'; 
			iframe.onload = function () { 
				setTimeout(function () {
					document.body.removeChild(iframe); 
				}, 0); 
			}; 
			document.body.appendChild(iframe);
			this.params.ptzEnable = ''+this.params.ptzEnable
			this.terminalType = this.params.terminalType
			this.dateFormatType = this.terminalType == 'ios'||this.terminalType == 'mac' ? 'YYYY/MM/DD':'YYYY-MM-DD';
			if(this.params.gateUnid) {
				if(this.params.playbackTime) {
					let playbackTime = moment(this.params.playbackTime).format('YYYY-MM-DD HH:mm:ss')
					let nowTime = moment(this.params.playbackTime).format('YYYY-MM-DD 23:59:59')
					this.getVideoAddress(playbackTime,nowTime)
					this.$nextTick(()=>{
						this.$refs.videoTimeRef.initBackTime(playbackTime);
					})
				} else {
					this.getVideoAddress()
				}
			}
		},
    playWebVideo(obj) {
      // // 通过URL获取相关参数
      // const urlParamsMap = getUrlParams(window.location.hash);
      // console.log('urlParamsMap', urlParamsMap);
      // Object.keys(this.params).forEach(key => {
      //   if (urlParamsMap[key]) {
      //     this.params[key] = urlParamsMap[key];
      //   }
      // });
			this.params = obj
			this.getVideoAddress()
    },
		// 获取视频播放地址
		getVideoAddress(startTime,stopTime) {
			// let par = {
			// 	gateUnid: this.params.gateUnid,
			// 	// appKey: this.params.appKey,
			// 	// playbackSpeed: 1,
			// 	startTime:startTime?startTime:null,
			// 	stopTime:stopTime?stopTime:null,
			// }
			// 加密
			// let parStr = this.aesEncrypt(par)
			// tourApi.getLiveAndPlaybackAddress(par).then(res => {
			// 	if (res.data&&res.data.code == 200) {
			// 		this.$refs.vionPlayer.play(res.data.msg);
			// 	} else {
			// 		Toast.fail('取流失败');
			// 	}
			// })
			let par = {
				gateUnid: this.params.gateUnid,
				appKey: this.params.appKey,
				playbackSpeed: 1,
				startTime:startTime?startTime:null,
				stopTime:stopTime?stopTime:null,
			}
			// 加密
			let parStr = this.aesEncrypt(par)
			tourApi.getThroughVideoUrl({param:parStr}).then(res => {
				if (res.data&&res.data.code == 200) {
					let type = startTime?true:false
					this.$refs.vionPlayer.play(res.data.msg,type);
				} else {
					Toast.fail('取流失败');
				}
			})
		},
		//加密
		aesEncrypt (obj){
			let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
			return encrypted
		},
    // 暴露方法
		// 截图方法
    screenshot() {
      this.$refs.vionPlayer.screenshot().then(data => {
				// console.log(data)
				this.screenshotEnd(data)
				// wx.miniProgram.postMessage({ data:{src:data} })
				// Toast.success('截图成功');
      }).catch(err => {
      })
    },
		// 截图出口
		screenshotEnd (imgData){
			console.log(imgData)
			// let reg = new RegExp('data:image/jpeg;base64,');
			// let regPng = new RegExp('data:image/png;base64,');
			// let pic = imgData.replace(reg, '')
			// pic = pic.replace(regPng, '')
			const loading = this.$loading({
				lock: true,
				text: '加载中',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let par = {
				restaurantName:this.params.gateName,
				fileData:imgData,
			}
			// console.log(par)
			this.$axios({
			  method: 'post',
				url:process.env.NODE_ENV === 'production'?`https://openapi.huian365.com/api/v1/upload_images`:`/qxh/api/v1/upload_images`,
				data:par,
				headers:{
					accessKeyid:'ca8e162ca2c9263a8f32882feea9d506',
					sign:'99d20df345a9d58521279f85a55833ab'
				},
			}).then((res)=> {
				// console.log(res)
				if (res.data.code === 0) {
					setTimeout(() => {
						loading.close();
					}, 5000);
					// 跳转页面
					// 测试环境
					const strUrl = `http://dining-sit.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}` 
					// 生产环境
					// const strUrl = `https://dining.huian365.com/camera/CameraReport?userKey=${this.params.userKey}&restaurantId=${this.params.restaurantId}&imgUrl=${encodeURIComponent(res.data.data)}` 
					window.location.href = strUrl
				}else {
				  this.$message({
				    message: '截图失败',
				    type: "warning",
				  });
				}
			}).catch((error)=> {
			  console.log(error);
				this.$message({
				  message: '截图失败',
				  type: "warning",
				});
			});
		},
		// 关闭视频播放
    stopPlay() {
      this.$refs.vionPlayer.destroy();
    },
  },
}
</script>

<style lang="scss" scoped>
.j-player-wrapper {
  width: 100vw;
  height: 56vw;
  overflow: hidden;
	position: relative;
	z-index: 1;
}
.screen-shot-img{
	position: absolute;
	right:53px;
	bottom: 10px;
	width: 16px;
	height: 16px;
	z-index: 1000;
}

</style>