h5-webgl-program/src/components/krpanoVideo/index.vue

<template>
    <!-- @touchstart="touchstartFunc" -->
    <div class="panoramic-components">
        <!-- 刷新按钮 -->
        <!-- <div class="refresh-btn" @click="refreshPage">
            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
        </div> -->
        <!-- 引导用户  触屏图片 -->
        <div v-if="pvCurPageName!='webgl_clipImg'" class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
        </div>
        <!-- 封面引导 蒙层图 -->
        <div class="krpano-img-before" :class="videoBefore ? '' : 'hide'">
            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
        </div>
        <!-- <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
        </div> -->
        <!-- 免责声明 -->
        <!-- <div class="disclaimer">
            <a
                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
        </div> -->
        <!-- krpano -->
        <div id="panoramic-krpano" :style="{'height':canvasHeight+'px'}"></div>
    </div>
</template>

<script>
    // import BScroll from 'better-scroll';
    const panoramicXML = require("./panoramic.xml");
    const panoramicNODragXML = require("./panoramic_no_drag.xml");
	const util = require('@/utils/util.js').default;
    export default {
        data() {
            return {
                tabList: [],
                selectTabIndex: 0,
                isPayVoice: false,
                isPromptShow: true,
                sceneObj: { id: '', name: '' },
                isTouchstart: false, // 是否触屏一次
                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
                videoBefore: true,//显示引导蒙层图
				sceneLoaded:false,//场景是否加载完毕了
				peopleData:null,
				petData:null,
				redBoxData:null,
				bgMusicData:null,
				scale:1,
            }
        },
		props:{
			videoUrl: {
				type: String,
				default: '',
			},
			bgUrl: {
				type: String,
				default: '',
			},
			muted: {
				type: [Boolean,String],
				default: true,
			},
			// scale: {
			// 	type: [Number,String],
			// 	default: 1,
			// },
			coordinate: {
				type: String,
				default: '',
			},
		},
		watch: {
			videoUrl: {
				handler(newVal,oldVal) {
					if (newVal && newVal.length>0) {
						console.warn("***videoUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
						if(this.sceneLoaded){
							// this.playVideo(newVal)
						}
					}
				},
				immediate:true,
			},
			bgUrl: {
				handler(newVal,oldVal) {
					console.warn("***bgUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
					if(this.panoramicKrpano){
						this.setSphereUrl(newVal)
					}
				},
				immediate: true,
			},
			muted: {
				handler(newVal,oldVal) {
					console.warn("***muted-webgl_rxdz_krpanoVideo***", newVal,oldVal)
					if(this.panoramicKrpano){
						this.panoramicKrpano.call(`toggleMute(${newVal})`);
						let video = this.panoramicKrpano.get("hotspot[video]");
						if(video && video.visible){
							console.warn("**peopleAtv***",video.ath,video.atv)
						}
					}
				},
				immediate: true,
			},
			// coordinate: {
			// 	handler(newVal,oldVal) {
			// 		console.warn("***coordinate-webgl_rxdz_krpanoVideo***", newVal,oldVal)
			// 	},
			// 	immediate: true,
			// },
		},
        methods: {
			redBoxChange(type){
				// console.warn("**redBoxChange****",type)
				if(type=='add'){
					let url = "https://dm.static.elab-plus.com/miniProgram/redbox.mp4"
					if(this.$parent.isIOS){
						wx.config({
							debug: false,
							appId: '',
							timestamp: '',
							nonceStr: '',
							signature: '',
							jsApiList: []
						})
						wx.ready(()=> {
							// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
							this.panoramicKrpano.call(`showRedBox(${url})`);
						})
					}else{
						this.panoramicKrpano.call(`showRedBox(${url})`);
					}
				}else if(type=='canel'){
					this.panoramicKrpano.call(`hideRedBox()`);
				}
			},
			scaleChange(scale,tabIndex){
				console.warn("**scaleChange****",scale,tabIndex)
				if(tabIndex==0){//数字人
					this.panoramicKrpano.call(`scalePeopleChange(${scale})`);
					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
					if(image_hotspot){
						image_hotspot.scale = scale;
					}
					this.scale = scale;//缩放比例
				}else if(tabIndex==1){//数字宠物
					this.panoramicKrpano.call(`scalePetChange(${scale})`);
				}
			},
			initPeople(item){
				if(item.url){
					this.playVideo(item.url)
				}
				if(item.scale){
					this.panoramicKrpano.call(`scalePeopleChange(${item.scale})`);
					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
					if(image_hotspot){
						image_hotspot.scale = item.scale;
					}
					this.scale = item.scale;
				}
				if(item.ath){
					let object = this.panoramicKrpano.get("hotspot[video]");
					object.ath = item.ath;
					object.atv = item.atv;
					let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
					if(image_hotspot){
						image_hotspot.ath = item.ath;
						image_hotspot.atv = item.atv;
					}
					//移动视角到AI人物上
					this.panoramicKrpano.set('view.hlookat', item.ath);
					this.panoramicKrpano.set('view.vlookat', item.atv);
				}
				if(item.deg){
					this.panoramicKrpano.call(`rotateVideo(${item.deg})`);
				}
			},
			initPet(item){
				if(item.url){
					this.playPetVideo(item.url)
				}
				if(item.scale){
					this.panoramicKrpano.call(`scalePetChange(${item.scale})`);
				}
				if(item.ath){
					let object = this.panoramicKrpano.get("hotspot[petVideo]");
					object.ath = item.ath;
					object.atv = item.atv;
				}
			},
			initRedBox(item){
				if(item.url){
					this.redBoxChange('add')
				}
				if(item.ath){
					let object = this.panoramicKrpano.get("hotspot[redBox]");
					object.ath = item.ath;
					object.atv = item.atv;
				}
			},
			initbgMusic(item){
				if(item.url){
					this.playBgMusic(item.url)
				}
			},
			rotateVideo(deg){
				this.panoramicKrpano.call(`rotateVideo(${deg})`);
			},
			updataVideoSize(item){
				//如果存在视频尺寸
				if(!item.width || !item.height){
					item.width = 180;
					item.height = 320;
				}
				let object = this.panoramicKrpano.get("hotspot[video]");
				let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
        // this.scale = 1;//这里要注意，当2D模式下，绿幕视频隐射到canvas的关系暂不清楚，似乎会放的很大？所以这里使用了极小的缩放值
				if(Number(item.width)>= Number(item.height)){//横屏
					let realWidth = 350;
					let realHeight = item.height/(item.width/realWidth);
					object.width = realWidth;
					object.height = realHeight;
					object.scale = this.scale;
					if(image_hotspot){
						// let _scale = realWidth/640;
						image_hotspot.width = realWidth;
						image_hotspot.height = realHeight;
						image_hotspot.scale = this.scale;
						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow22.png';
					}
				}else{//竖直版视频
					let realWidth = 350;
					let realHeight = item.height/(item.width/realWidth);
					object.width = realWidth;
					object.height = realHeight;
					object.scale = this.scale;
					if(image_hotspot){
						// let _scale = realWidth/360;
						image_hotspot.width = realWidth;
						image_hotspot.height = realHeight;
						image_hotspot.scale = this.scale;
						image_hotspot.url = 'https://dm.static.elab-plus.com/miniProgram/shadow11.png';
					}
				}
				console.warn("**updataVideoSize****",item.width,item.height,Number(item.width)>= Number(item.height),object.width,object.height,this.scale);
			},
			aiChange(item,type,tabIndex){
				console.warn("**aiChange****",item,type,tabIndex)
				if(tabIndex==0){
					if(type=='add'){
						this.playVideo(item.url);
						this.updataVideoSize(item);
					}else if(type=='canel'){
						this.stopPeopleVideo()
					}
				}else if(tabIndex==1){
					if(type=='add'){
						this.playPetVideo(item.url)
					}else if(type=='canel'){
						this.stopPetVideo()
					}
				}else if(tabIndex==3){
					if(type=='add'){
						this.playBgMusic(item.url)
					}else if(type=='canel'){
						this.stopBgMusic()
					}
				}
			},
			playVideo(url){
				if(this.$parent.isIOS){
					wx.config({
						debug: false,
						appId: '',
						timestamp: '',
						nonceStr: '',
						signature: '',
						jsApiList: []
					})
					wx.ready(()=> {
						// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
						this.panoramicKrpano.call(`playSceneName(${url})`);
					})
				}else{
					this.panoramicKrpano.call(`playSceneName(${url})`);
				}
				console.warn("***playSceneName-playVideo***")
			},
			stopPeopleVideo(){
				this.panoramicKrpano.call(`stopPeopleVideo()`);
				console.warn("***playSceneName-stopPeopleVideo***")
			},
			playPetVideo(url){
				// this.panoramicKrpano.call(`playPetVideo(${url})`);
				if(this.$parent.isIOS){
					wx.config({
						debug: false,
						appId: '',
						timestamp: '',
						nonceStr: '',
						signature: '',
						jsApiList: []
					})
					wx.ready(()=> {
						// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
						this.panoramicKrpano.call(`playPetVideo(${url})`);
					})
				}else{
					this.panoramicKrpano.call(`playPetVideo(${url})`);
				}
				console.warn("***playSceneName-playPetVideo***")
			},
			stopPetVideo(){
				this.panoramicKrpano.call(`stopPetVideo()`);
				console.warn("***playSceneName-stopPetVideo***")
			},
            playBgMusic(url){
				this.panoramicKrpano.call(`playBgMusic(${url},${this.muted})`);
			},
			stopBgMusic(url){
				this.panoramicKrpano.call(`closeVoice()`);
			},
			panoramic() {
				console.warn("***panoramicKrpano***",this.videoUrl)
                this.panoramicKrpano = document.getElementById('panoramic');
				if(this.bgUrl){
					// 设置全景图的路径
					this.setSphereUrl(this.bgUrl)
				}
                // 场景加载完毕了
				window.sceneload = ()=>{
					console.warn("***sceneLoad***")
					this.videoBefore = false;
					this.sceneLoaded = true;
					// this.playVideo();//播放绿幕视频
					setTimeout(()=>{
						if(this.peopleData && this.peopleData.ath){
							this.initPeople(this.peopleData)
							this.updataVideoSize(this.peopleData);
						}
						if(this.petData && this.petData.ath){
							this.initPet(this.petData)
						}
						if(this.redBoxData && this.redBoxData.ath){
							this.initRedBox(this.redBoxData)
						}
						if(this.bgMusicData && this.bgMusicData.url){
							this.initbgMusic(this.bgMusicData)
						}
						console.warn("***sceneLoad1***",this.peopleData,this.petData,this.redBoxData,this.bgMusicData)
					},200)
					
				}
                // 视频加载完
                window.videoready = () => {
					console.warn("***videoready***",this.$parent.isIOS,this.isTouchstart)
                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
					if(this.$parent.isIOS){
						if (!this.isShowOneGuideMask) {
						    // 视频加载完
						    this.isTouchstart = true;
						}
					}
                };
                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
                window.videopausedFunc = () => {
                }
				//红包被点击中了，说明抢到了红包
				window.toggleRedBox = () => {
					console.warn("***winLottery***")
					this.$parent.winLottery();//中奖了
				}
				//截图成功了
				window.show_img = (shotImg='',shareImg='') => {
					console.warn("***show_img***",shotImg,shareImg)
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23121401', //点击ID
						clkName: 'webgl_cover_clk', //点击前往的页面名称
						clkParams: {
							locusName: "封面确认",
							locusValue: shotImg
						}
					};
					util.trackRequest(param);
					this.$parent.closeToast();
					if(window.__wxjs_environment === 'miniprogram'){
						wx.miniProgram.postMessage({data: {bgUrl:shotImg,shareImg:shareImg}})
						wx.miniProgram.navigateBack();
					}else{
						// window.location.href = shottingImg;
						window.open(shotImg)
					}
				}
				
				// 视频播放
				window.onvideoplay = () => {
					console.warn("***onvideoplay***")
				}
				//针对手机端的处理
				document.addEventListener("touchend", ()=> {
					if(this.isShowOneGuideMask==false){
						this.isShowOneGuideMask = true;
						this.isTouchstart = true;
					}
					// console.warn("***kpanoraTouch***",this.isTouchstart)
				})
				//针对PC端的处理
				document.addEventListener("click", ()=> {
					if(this.isShowOneGuideMask==false){
						this.isShowOneGuideMask = true;
						this.isTouchstart = true;
					}
					// console.warn("***kpanoraTouch***",this.isTouchstart)
				})
				window.getScaleHandle = (scale) => {
					console.warn("***getScaleHandle***",scale)
				}
            },
			makescreenshot(){
				// let screenshotcanvas = this.panoramicKrpano.webGL("krpano[webGL]");
				let pix = 1 || window.devicePixelRatio;
				let x = parseInt(this.$parent.bottomLeftX*pix);
				let y = parseInt(this.$parent.top*pix);
				let width = parseInt(this.$parent.width*pix);
				let height = parseInt(this.$parent.height*pix);
				let hasRedBox = this.redBoxData && this.redBoxData.ath?true:false;
				console.warn("***screenshotcanvas***",x,y,width,height,hasRedBox)
				this.panoramicKrpano.call("makescreenshot("
				+ x+','
				+ y+','
				+ width+','
				+ height+','
				+ hasRedBox+")");
			},
			// getScale(){
			// 	let video = this.panoramicKrpano.get("hotspot[video]");
			// 	console.warn("***getPeolpeScale***",video.scale);
			// },
			// getPetScale(){
			// 	let petVideo = this.panoramicKrpano.get("hotspot[petVideo]");
			// 	console.warn("***getPetScale***",petVideo.scale);
			// },
			getPosition(){
				let posi = {}
				let video = this.panoramicKrpano.get("hotspot[video]");
				if(video && video.visible){
					posi.peopleAth = video.ath;
					posi.peopleAtv = video.atv;
				}
				let petVideo = this.panoramicKrpano.get("hotspot[petVideo]");
				if(petVideo && petVideo.visible){
					posi.petAth = petVideo.ath;
					posi.petAtv = petVideo.atv;
				}
				let redBox = this.panoramicKrpano.get("hotspot[redBox]");
				if(redBox && redBox.visible){
					posi.redBoxAth = redBox.ath;
					posi.redBoxAtv = redBox.atv;
				}
				// console.warn("***getPosition***",posi);
				return posi
			},
			setPosition(position){
				let video = this.panoramicKrpano.get("hotspot[video]");
				let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
				video.ath = position.ath;
				video.atv = position.atv;
				if(image_hotspot){
					image_hotspot.ath = position.ath;
					image_hotspot.atv = position.atv;
				}
				//移动视角到AI人物上
				this.panoramicKrpano.set('view.hlookat', position.ath);
				this.panoramicKrpano.set('view.vlookat', position.atv);
				console.warn("***setPosition***",position);
			},
			//设置全景图图片地址
			setSphereUrl(url){
				if(!url){
					return false
				}
				this.panoramicKrpano.set("panorama_url",url)
				console.warn("***setSphereUrl***",url);
			},
			//设置视频地址
			// setVideoUrl(url){
			// 	if(!url){
			// 		return false
			// 	}
			// 	this.panoramicKrpano.set("video_url",url)
			// 	console.warn("***setVideoUrl***",url);
			// },
        },
        mounted() {
            embedpano({
                swf: "https://dm.static.elab-plus.com/krpano.swf",
                xml: this.$parent.pvCurPageName == 'add_AI_people' ? panoramicXML : panoramicNODragXML,
                bgcolor: "#fff",
                target: "panoramic-krpano",
                passQueryParameters: false,
                consolelog: true,
                id: "panoramic",
                mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
                onready: this.panoramic,
            });
			this.scale = this.$parent.peopleScale;
			// console.warn("***mounted***",this.$route.query.AIPeople,this.$route.query.bgMusic);
			// this.peopleData = this.$route.query.AIPeople ? JSON.parse(this.$route.query.AIPeople) : {};
			// this.petData = this.$route.query.AIPet ? JSON.parse(this.$route.query.AIPet) : {};
			// this.redBoxData = this.$route.query.bgMusic ? JSON.parse(this.$route.query.bgMusic) : {};
			// this.bgMusicData = this.$route.query.redBox ? JSON.parse(this.$route.query.redBox) : {};
        },
        created() {
			console.warn("***this.type***")
			let screenWidth = window.screen.width;
			let screenHeight = window.screen.height;
			if (window.innerWidth && window.screen.width) {
				screenWidth = Math.min(window.innerWidth, window.screen.width)
			}
			if (window.innerHeight && window.screen.height) {
				screenHeight = Math.min(window.innerHeight, window.screen.height)
			}
			this.canvasHeight = this.$parent.pvCurPageName == 'add_AI_people' ? screenWidth : screenHeight;
			this.pvCurPageName = this.$parent.pvCurPageName
            // // 监听屏幕大小变化
            // window.addEventListener('resize', ()=>{
            // });
        },
        beforeDestroy() {
            // this.panoramicKrpano.call(`closeVoice()`);
        }
    }
</script>
<style scoped lang="scss">
    @import "index.scss";
</style>