index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. <template>
  2. <!-- @touchstart="touchstartFunc" -->
  3. <div class="panoramic-components">
  4. <!-- 刷新按钮 -->
  5. <!-- <div class="refresh-btn" @click="refreshPage">
  6. <img src="https://dm.static.elab-plus.com/refresh-btn.png">
  7. </div> -->
  8. <!-- 引导用户 触屏图片 -->
  9. <div v-if="pvCurPageName!='webgl_clipImg'" class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
  10. <img src="https://dm.static.elab-plus.com/guide-mask.png" />
  11. </div>
  12. <!-- 封面引导 蒙层图 -->
  13. <div class="krpano-img-before" :class="videoBefore ? '' : 'hide'">
  14. <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
  15. </div>
  16. <!-- <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
  17. <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
  18. </div> -->
  19. <!-- 免责声明 -->
  20. <!-- <div class="disclaimer">
  21. <a
  22. href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
  23. </div> -->
  24. <!-- krpano -->
  25. <div id="panoramic-krpano" :style="{'height':canvasHeight+'px'}"></div>
  26. </div>
  27. </template>
  28. <script>
  29. // import BScroll from 'better-scroll';
  30. const panoramicXML = require("./panoramic.xml");
  31. const panoramicNODragXML = require("./panoramic_no_drag.xml");
  32. const util = require('@/utils/util.js').default;
  33. export default {
  34. data() {
  35. return {
  36. tabList: [],
  37. selectTabIndex: 0,
  38. isPayVoice: false,
  39. isPromptShow: true,
  40. sceneObj: { id: '', name: '' },
  41. isTouchstart: false, // 是否触屏一次
  42. isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
  43. videoBefore: true,//显示引导蒙层图
  44. sceneLoaded:false,//场景是否加载完毕了
  45. peopleData:null,
  46. petData:null,
  47. redBoxData:null,
  48. bgMusicData:null,
  49. }
  50. },
  51. props:{
  52. videoUrl: {
  53. type: String,
  54. default: '',
  55. },
  56. bgUrl: {
  57. type: String,
  58. default: '',
  59. },
  60. muted: {
  61. type: [Boolean,String],
  62. default: true,
  63. },
  64. // scale: {
  65. // type: [Number,String],
  66. // default: 1,
  67. // },
  68. coordinate: {
  69. type: String,
  70. default: '',
  71. },
  72. },
  73. watch: {
  74. videoUrl: {
  75. handler(newVal,oldVal) {
  76. if (newVal && newVal.length>0) {
  77. console.warn("***videoUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
  78. if(this.sceneLoaded){
  79. // this.playVideo(newVal)
  80. }
  81. }
  82. },
  83. immediate:true,
  84. },
  85. bgUrl: {
  86. handler(newVal,oldVal) {
  87. console.warn("***bgUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
  88. if(this.panoramicKrpano){
  89. this.setSphereUrl(newVal)
  90. }
  91. },
  92. immediate: true,
  93. },
  94. muted: {
  95. handler(newVal,oldVal) {
  96. console.warn("***muted-webgl_rxdz_krpanoVideo***", newVal,oldVal)
  97. if(this.panoramicKrpano){
  98. this.panoramicKrpano.call(`toggleMute(${newVal})`);
  99. }
  100. },
  101. immediate: true,
  102. },
  103. // coordinate: {
  104. // handler(newVal,oldVal) {
  105. // console.warn("***coordinate-webgl_rxdz_krpanoVideo***", newVal,oldVal)
  106. // },
  107. // immediate: true,
  108. // },
  109. },
  110. methods: {
  111. redBoxChange(type){
  112. // console.warn("**redBoxChange****",type)
  113. if(type=='add'){
  114. let url = "https://dm.static.elab-plus.com/miniProgram/redbox.mp4"
  115. if(this.$parent.isIOS){
  116. wx.config({
  117. debug: false,
  118. appId: '',
  119. timestamp: '',
  120. nonceStr: '',
  121. signature: '',
  122. jsApiList: []
  123. })
  124. wx.ready(()=> {
  125. // 在这里面进行操作即可,估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
  126. this.panoramicKrpano.call(`showRedBox(${url})`);
  127. })
  128. }else{
  129. this.panoramicKrpano.call(`showRedBox(${url})`);
  130. }
  131. }else if(type=='canel'){
  132. this.panoramicKrpano.call(`hideRedBox()`);
  133. }
  134. },
  135. scaleChange(scale,tabIndex){
  136. console.warn("**scaleChange****",scale,tabIndex)
  137. if(tabIndex==0){//数字人
  138. this.panoramicKrpano.call(`scalePeopleChange(${scale})`);
  139. }else if(tabIndex==1){//数字宠物
  140. this.panoramicKrpano.call(`scalePetChange(${scale})`);
  141. }
  142. },
  143. initPeople(item){
  144. if(item.url){
  145. this.playVideo(item.url)
  146. }
  147. if(item.scale){
  148. this.panoramicKrpano.call(`scalePeopleChange(${item.scale})`);
  149. }
  150. if(item.ath){
  151. let object = this.panoramicKrpano.get("hotspot[video]");
  152. object.ath = item.ath;
  153. object.atv = item.atv;
  154. //移动视角到AI人物上
  155. this.panoramicKrpano.set('view.hlookat', item.ath);
  156. this.panoramicKrpano.set('view.vlookat', item.atv);
  157. }
  158. },
  159. initPet(item){
  160. if(item.url){
  161. this.playPetVideo(item.url)
  162. }
  163. if(item.scale){
  164. this.panoramicKrpano.call(`scalePetChange(${item.scale})`);
  165. }
  166. if(item.ath){
  167. let object = this.panoramicKrpano.get("hotspot[petVideo]");
  168. object.ath = item.ath;
  169. object.atv = item.atv;
  170. }
  171. },
  172. initRedBox(item){
  173. if(item.url){
  174. this.redBoxChange('add')
  175. }
  176. if(item.ath){
  177. let object = this.panoramicKrpano.get("hotspot[redBox]");
  178. object.ath = item.ath;
  179. object.atv = item.atv;
  180. }
  181. },
  182. initbgMusic(item){
  183. if(item.url){
  184. this.playBgMusic(item.url)
  185. }
  186. },
  187. aiChange(item,type,tabIndex){
  188. console.warn("**aiChange****",item,type,tabIndex)
  189. if(tabIndex==0){
  190. if(type=='add'){
  191. this.playVideo(item.url)
  192. }else if(type=='canel'){
  193. this.stopPeopleVideo()
  194. }
  195. }else if(tabIndex==1){
  196. if(type=='add'){
  197. this.playPetVideo(item.url)
  198. }else if(type=='canel'){
  199. this.stopPetVideo()
  200. }
  201. }else if(tabIndex==3){
  202. if(type=='add'){
  203. this.playBgMusic(item.url)
  204. }else if(type=='canel'){
  205. this.stopBgMusic()
  206. }
  207. }
  208. },
  209. playVideo(url){
  210. if(this.$parent.isIOS){
  211. wx.config({
  212. debug: false,
  213. appId: '',
  214. timestamp: '',
  215. nonceStr: '',
  216. signature: '',
  217. jsApiList: []
  218. })
  219. wx.ready(()=> {
  220. // 在这里面进行操作即可,估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
  221. this.panoramicKrpano.call(`playSceneName(${url})`);
  222. })
  223. }else{
  224. this.panoramicKrpano.call(`playSceneName(${url})`);
  225. }
  226. console.warn("***playSceneName-playVideo***")
  227. },
  228. stopPeopleVideo(){
  229. this.panoramicKrpano.call(`stopPeopleVideo()`);
  230. console.warn("***playSceneName-stopPeopleVideo***")
  231. },
  232. playPetVideo(url){
  233. // this.panoramicKrpano.call(`playPetVideo(${url})`);
  234. if(this.$parent.isIOS){
  235. wx.config({
  236. debug: false,
  237. appId: '',
  238. timestamp: '',
  239. nonceStr: '',
  240. signature: '',
  241. jsApiList: []
  242. })
  243. wx.ready(()=> {
  244. // 在这里面进行操作即可,估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
  245. this.panoramicKrpano.call(`playPetVideo(${url})`);
  246. })
  247. }else{
  248. this.panoramicKrpano.call(`playPetVideo(${url})`);
  249. }
  250. console.warn("***playSceneName-playPetVideo***")
  251. },
  252. stopPetVideo(){
  253. this.panoramicKrpano.call(`stopPetVideo()`);
  254. console.warn("***playSceneName-stopPetVideo***")
  255. },
  256. playBgMusic(url){
  257. this.panoramicKrpano.call(`playBgMusic(${url})`);
  258. },
  259. stopBgMusic(url){
  260. this.panoramicKrpano.call(`closeVoice()`);
  261. },
  262. panoramic() {
  263. console.warn("***panoramicKrpano***",this.videoUrl)
  264. this.panoramicKrpano = document.getElementById('panoramic');
  265. if(this.bgUrl){
  266. // 设置全景图的路径
  267. this.setSphereUrl(this.bgUrl)
  268. }
  269. // 场景加载完毕了
  270. window.sceneload = ()=>{
  271. console.warn("***sceneLoad***")
  272. this.videoBefore = false;
  273. this.sceneLoaded = true;
  274. // this.playVideo();//播放绿幕视频
  275. if(this.peopleData && this.peopleData.ath){
  276. this.initPeople(this.peopleData)
  277. }
  278. if(this.petData && this.petData.ath){
  279. this.initPet(this.petData)
  280. }
  281. if(this.redBoxData && this.redBoxData.ath){
  282. this.initRedBox(this.redBoxData)
  283. }
  284. if(this.bgMusicData && this.bgMusicData.url){
  285. this.initbgMusic(this.bgMusicData)
  286. }
  287. }
  288. // 视频加载完
  289. window.videoready = () => {
  290. console.warn("***videoready***",this.$parent.isIOS,this.isTouchstart)
  291. // 兼容苹果手机, 当视频加载完也算触屏了, 显示引导用户触屏
  292. if(this.$parent.isIOS){
  293. if (!this.isShowOneGuideMask) {
  294. // 视频加载完
  295. this.isTouchstart = true;
  296. }
  297. }
  298. };
  299. // 视频暂停了,自动刷新页面, 并且保存,当前的参数
  300. window.videopausedFunc = () => {
  301. }
  302. //截图成功了
  303. window.show_img = (shottingImg) => {
  304. console.warn("***show_img***",shottingImg)
  305. let param = {
  306. type: 'CLK', //埋点类型
  307. clkId: 'clk_2cmina_23121401', //点击ID
  308. clkName: 'webgl_cover_clk', //点击前往的页面名称
  309. clkParams: {
  310. locusName: "封面确认",
  311. locusValue: shottingImg
  312. }
  313. };
  314. util.trackRequest(param);
  315. if(window.__wxjs_environment === 'miniprogram'){
  316. wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
  317. wx.miniProgram.navigateBack();
  318. }else{
  319. window.location.href = shottingImg
  320. }
  321. }
  322. // 视频播放
  323. window.onvideoplay = () => {
  324. console.warn("***onvideoplay***")
  325. }
  326. document.addEventListener("touchend", ()=> {
  327. if(this.isShowOneGuideMask==false){
  328. this.isShowOneGuideMask = true;
  329. this.isTouchstart = true;
  330. }
  331. // console.warn("***kpanoraTouch***",this.isTouchstart)
  332. })
  333. window.getScaleHandle = (scale) => {
  334. console.warn("***getScaleHandle***",scale)
  335. }
  336. },
  337. makescreenshot(){
  338. // let screenshotcanvas = this.panoramicKrpano.webGL("krpano[webGL]");
  339. let pix = 1 || window.devicePixelRatio;
  340. let x = parseInt(this.$parent.bottomLeftX*pix);
  341. let y = parseInt(this.$parent.top*pix);
  342. let width = parseInt(this.$parent.width*pix);
  343. let height = parseInt(this.$parent.height*pix);
  344. console.warn("***screenshotcanvas***",x,y,width,height)
  345. this.panoramicKrpano.call("makescreenshot("
  346. + x+','
  347. + y+','
  348. + width+','
  349. + height+")");
  350. },
  351. // getScale(){
  352. // let video = this.panoramicKrpano.get("hotspot[video]");
  353. // console.warn("***getPeolpeScale***",video.scale);
  354. // },
  355. // getPetScale(){
  356. // let petVideo = this.panoramicKrpano.get("hotspot[petVideo]");
  357. // console.warn("***getPetScale***",petVideo.scale);
  358. // },
  359. getPosition(){
  360. let posi = {}
  361. let video = this.panoramicKrpano.get("hotspot[video]");
  362. if(video && video.visible){
  363. posi.peopleAth = video.ath;
  364. posi.peopleAtv = video.atv;
  365. }
  366. let petVideo = this.panoramicKrpano.get("hotspot[petVideo]");
  367. if(petVideo && petVideo.visible){
  368. posi.petAth = petVideo.ath;
  369. posi.petAtv = petVideo.atv;
  370. }
  371. let redBox = this.panoramicKrpano.get("hotspot[redBox]");
  372. if(redBox && redBox.visible){
  373. posi.redBoxAth = redBox.ath;
  374. posi.redBoxAtv = redBox.atv;
  375. }
  376. // console.warn("***getPosition***",posi);
  377. return posi
  378. },
  379. setPosition(position){
  380. let video = this.panoramicKrpano.get("hotspot[video]");
  381. let image_hotspot = this.panoramicKrpano.get("hotspot[image_hotspot]");
  382. video.ath = position.ath;
  383. video.atv = position.atv;
  384. if(image_hotspot){
  385. image_hotspot.ath = position.ath;
  386. image_hotspot.atv = position.atv;
  387. }
  388. //移动视角到AI人物上
  389. this.panoramicKrpano.set('view.hlookat', position.ath);
  390. this.panoramicKrpano.set('view.vlookat', position.atv);
  391. console.warn("***setPosition***",position);
  392. },
  393. //设置全景图图片地址
  394. setSphereUrl(url){
  395. if(!url){
  396. return false
  397. }
  398. this.panoramicKrpano.set("panorama_url",url)
  399. console.warn("***setSphereUrl***",url);
  400. },
  401. //设置视频地址
  402. // setVideoUrl(url){
  403. // if(!url){
  404. // return false
  405. // }
  406. // this.panoramicKrpano.set("video_url",url)
  407. // console.warn("***setVideoUrl***",url);
  408. // },
  409. },
  410. mounted() {
  411. embedpano({
  412. swf: "https://dm.static.elab-plus.com/krpano.swf",
  413. xml: this.$parent.pvCurPageName == 'add_AI_people' ? panoramicXML : panoramicNODragXML,
  414. bgcolor: "#fff",
  415. target: "panoramic-krpano",
  416. passQueryParameters: false,
  417. consolelog: true,
  418. id: "panoramic",
  419. mobilescale: 0.5, //移动设备缩放,1表示不缩放,默认0.5
  420. onready: this.panoramic,
  421. });
  422. },
  423. created() {
  424. console.warn("***this.type***")
  425. let screenWidth = window.screen.width;
  426. let screenHeight = window.screen.height;
  427. if (window.innerWidth && window.screen.width) {
  428. screenWidth = Math.min(window.innerWidth, window.screen.width)
  429. }
  430. if (window.innerHeight && window.screen.height) {
  431. screenHeight = Math.min(window.innerHeight, window.screen.height)
  432. }
  433. this.canvasHeight = this.$parent.pvCurPageName == 'add_AI_people' ? screenWidth : screenHeight;
  434. this.pvCurPageName = this.$parent.pvCurPageName
  435. // // 监听屏幕大小变化
  436. // window.addEventListener('resize', ()=>{
  437. // });
  438. },
  439. beforeDestroy() {
  440. // this.panoramicKrpano.call(`closeVoice()`);
  441. }
  442. }
  443. </script>
  444. <style scoped lang="scss">
  445. @import "index.scss";
  446. </style>