| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport { getUsersig } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport TRTC from 'trtc-sdk-v5';\nlet trtc = null;\nexport default {\n name: 'App',\n components: {\n roomFooter\n },\n data() {\n return {\n userClass: \"userVideo5\",\n userList: [],\n userHeight: '100%',\n userSign: \"\",\n roomId: \"\",\n showFlag: false\n };\n },\n methods: {\n // 鼠标滑过显示操作栏\n mouseHover() {\n this.showFlag = true;\n setTimeout(() => {\n this.showFlag = false;\n }, 4000);\n },\n async exitRoom() {\n await trtc.exitRoom();\n await trtc.updateLocalVideo({\n publish: false\n });\n await trtc.updateLocalAudio({\n publish: false\n });\n await trtc.destroy();\n this.$router.push({\n name: \"Home\"\n });\n // this.$router.go(-1)\n },\n\n getPushVideo() {\n trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, event => {\n const userId = event.userId;\n const streamType = event.streamType;\n this.userList.push(userId);\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n setTimeout(() => {\n trtc.startRemoteVideo({\n userId,\n streamType,\n view: `${userId}`\n });\n });\n });\n },\n deletePushVideo() {\n trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n const userId = event.userId;\n let deleteIndex = this.userList.indexOf(userId);\n this.userList = this.userList.filter(item => item !== userId);\n if (deleteIndex !== -1) {\n this.userList.splice(deleteIndex, 1);\n }\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n });\n }\n },\n async mounted() {\n let roomId = this.$route.query.roomId;\n this.roomId = this.$route.query.roomId;\n let userId = this.$route.query.userId;\n const sdkAppId = 1600011167;\n // 获取usersign\n await getUsersig(userId).then(res => {\n this.userSign = res.msg;\n });\n this.getPushVideo();\n this.deletePushVideo();\n // try {\n // await trtc.enterRoom({ roomId: Number(roomId), scene: 'rtc', sdkAppId, userId, userSig: this.userSign });\n // await trtc.startLocalVideo({\n // view: document.getElementById('localStream'), // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。\n // });\n // await trtc.startLocalAudio();\n // console.log('进房成功');\n // this.$message({\n // message: \"进房成功\",\n // type: 'success'\n // })\n // } catch (error) {\n // console.error('进房失败 ' + error);\n // this.$message({\n // message: \"进房失败\",\n // type: 'error'\n // });\n // this.$router.push({\n // name: 'Home'\n // })\n // }\n },\n\n created() {\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n trtc = TRTC.create();\n }\n};","map":{"version":3,"names":["getUsersig","getWidth","getHeight","roomFooter","TRTC","trtc","name","components","data","userClass","userList","userHeight","userSign","roomId","showFlag","methods","mouseHover","setTimeout","exitRoom","updateLocalVideo","publish","updateLocalAudio","destroy","$router","push","getPushVideo","on","EVENT","REMOTE_VIDEO_AVAILABLE","event","userId","streamType","startRemoteVideo","view","deletePushVideo","REMOTE_VIDEO_UNAVAILABLE","deleteIndex","indexOf","filter","item","splice","mounted","$route","query","sdkAppId","then","res","msg","created","create"],"sources":["src/views/room.vue"],"sourcesContent":["<template>\n <div class=\"roompage\" @mouseover=\"mouseHover\">\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\">\n <div class=\"userName\">111</div>\n </div>\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" v-for=\"(item, index) in userList\" :key=\"index\" :id=\"item\">\n </div>\n <div class=\"footer\" v-if=\"showFlag\">\n <roomFooter @exitRoom=\"exitRoom\" :roomId=\"roomId\"></roomFooter>\n </div>\n </div>\n</template>\n \n<script>\nimport { getUsersig } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport TRTC from 'trtc-sdk-v5';\nlet trtc = null;\nexport default {\n name: 'App',\n components: {\n roomFooter\n },\n data() {\n return {\n userClass: \"userVideo5\",\n userList: [],\n userHeight: '100%',\n userSign: \"\",\n roomId: \"\",\n showFlag:false,\n };\n },\n methods: {\n // 鼠标滑过显示操作栏\n mouseHover(){\n this.showFlag = true;\n setTimeout(()=>{\n this.showFlag = false;\n },4000)\n },\n async exitRoom() {\n await trtc.exitRoom();\n await trtc.updateLocalVideo({ publish: false });\n await trtc.updateLocalAudio({ publish: false });\n await trtc.destroy();\n this.$router.push({\n name: \"Home\"\n })\n // this.$router.go(-1)\n },\n getPushVideo() {\n trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, event => {\n const userId = event.userId;\n const streamType = event.streamType;\n this.userList.push(userId);\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n setTimeout(() => {\n trtc.startRemoteVideo({ userId, streamType, view: `${userId}` })\n })\n })\n },\n deletePushVideo() {\n trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n const userId = event.userId;\n let deleteIndex = this.userList.indexOf(userId);\n this.userList = this.userList.filter(item => item !== userId);\n if (deleteIndex !== -1) {\n this.userList.splice(deleteIndex, 1)\n }\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n })\n }\n },\n async mounted() {\n let roomId = this.$route.query.roomId;\n this.roomId = this.$route.query.roomId;\n let userId = this.$route.query.userId;\n const sdkAppId = 1600011167;\n // 获取usersign\n await getUsersig(userId).then(res => {\n this.userSign = res.msg;\n })\n this.getPushVideo();\n this.deletePushVideo();\n // try {\n // await trtc.enterRoom({ roomId: Number(roomId), scene: 'rtc', sdkAppId, userId, userSig: this.userSign });\n // await trtc.startLocalVideo({\n // view: document.getElementById('localStream'), // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。\n // });\n // await trtc.startLocalAudio();\n // console.log('进房成功');\n // this.$message({\n // message: \"进房成功\",\n // type: 'success'\n // })\n // } catch (error) {\n // console.error('进房失败 ' + error);\n // this.$message({\n // message: \"进房失败\",\n // type: 'error'\n // });\n // this.$router.push({\n // name: 'Home'\n // })\n // }\n },\n created() {\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n trtc = TRTC.create();\n },\n};\n</script>\n \n<style scoped>\n.roompage {\n width: 100%;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: space-around;\n flex-wrap: wrap;\n position: relative;\n}\n.userVideo,.userVideo1,.userVideo2,.userVideo3,.userVideo4,.userVideo5{\n position: relative;\n}\n.userVideo5 {\n width: 100%;\n background-color: yellow;\n}\n\n.userVideo {\n width: 48%;\n background-color: yellow;\n}\n\n.userVideo1 {\n width: 33%;\n background-color: yellow;\n}\n\n.userVideo2 {\n width: 33%;\n background-color: yellow;\n}\n\n.userVideo3 {\n width: 33%;\n background-color: yellow;\n}\n\n.userVideo4 {\n width: 100%;\n background-color: yellow;\n}\n\n.footer {\n width: 100%;\n height: 10%;\n background: rgb(46 43 43 / 90%);\n position: absolute;\n bottom: 0;\n}\n.userName{\n width: 90px;\n height: 40px;\n text-align: center;\n line-height: 40px;\n background-color: black;\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 99999;\n color: #ffffff;\n}\n</style>\n \n \n "],"mappings":";AAcA,SAAAA,UAAA;AACA,SAAAC,QAAA,EAAAC,SAAA;AACA,OAAAC,UAAA;AACA,OAAAC,IAAA;AACA,IAAAC,IAAA;AACA;EACAC,IAAA;EACAC,UAAA;IACAJ;EACA;EACAK,KAAA;IACA;MACAC,SAAA;MACAC,QAAA;MACAC,UAAA;MACAC,QAAA;MACAC,MAAA;MACAC,QAAA;IACA;EACA;EACAC,OAAA;IACA;IACAC,WAAA;MACA,KAAAF,QAAA;MACAG,UAAA;QACA,KAAAH,QAAA;MACA;IACA;IACA,MAAAI,SAAA;MACA,MAAAb,IAAA,CAAAa,QAAA;MACA,MAAAb,IAAA,CAAAc,gBAAA;QAAAC,OAAA;MAAA;MACA,MAAAf,IAAA,CAAAgB,gBAAA;QAAAD,OAAA;MAAA;MACA,MAAAf,IAAA,CAAAiB,OAAA;MACA,KAAAC,OAAA,CAAAC,IAAA;QACAlB,IAAA;MACA;MACA;IACA;;IACAmB,aAAA;MACApB,IAAA,CAAAqB,EAAA,CAAAtB,IAAA,CAAAuB,KAAA,CAAAC,sBAAA,EAAAC,KAAA;QACA,MAAAC,MAAA,GAAAD,KAAA,CAAAC,MAAA;QACA,MAAAC,UAAA,GAAAF,KAAA,CAAAE,UAAA;QACA,KAAArB,QAAA,CAAAc,IAAA,CAAAM,MAAA;QACA,KAAArB,SAAA,GAAAR,QAAA,MAAAS,QAAA;QACA,KAAAC,UAAA,GAAAT,SAAA,MAAAQ,QAAA;QACAO,UAAA;UACAZ,IAAA,CAAA2B,gBAAA;YAAAF,MAAA;YAAAC,UAAA;YAAAE,IAAA,KAAAH,MAAA;UAAA;QACA;MACA;IACA;IACAI,gBAAA;MACA7B,IAAA,CAAAqB,EAAA,CAAAtB,IAAA,CAAAuB,KAAA,CAAAQ,wBAAA,EAAAN,KAAA;QACA,MAAAC,MAAA,GAAAD,KAAA,CAAAC,MAAA;QACA,IAAAM,WAAA,QAAA1B,QAAA,CAAA2B,OAAA,CAAAP,MAAA;QACA,KAAApB,QAAA,QAAAA,QAAA,CAAA4B,MAAA,CAAAC,IAAA,IAAAA,IAAA,KAAAT,MAAA;QACA,IAAAM,WAAA;UACA,KAAA1B,QAAA,CAAA8B,MAAA,CAAAJ,WAAA;QACA;QACA,KAAA3B,SAAA,GAAAR,QAAA,MAAAS,QAAA;QACA,KAAAC,UAAA,GAAAT,SAAA,MAAAQ,QAAA;MACA;IACA;EACA;EACA,MAAA+B,QAAA;IACA,IAAA5B,MAAA,QAAA6B,MAAA,CAAAC,KAAA,CAAA9B,MAAA;IACA,KAAAA,MAAA,QAAA6B,MAAA,CAAAC,KAAA,CAAA9B,MAAA;IACA,IAAAiB,MAAA,QAAAY,MAAA,CAAAC,KAAA,CAAAb,MAAA;IACA,MAAAc,QAAA;IACA;IACA,MAAA5C,UAAA,CAAA8B,MAAA,EAAAe,IAAA,CAAAC,GAAA;MACA,KAAAlC,QAAA,GAAAkC,GAAA,CAAAC,GAAA;IACA;IACA,KAAAtB,YAAA;IACA,KAAAS,eAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EACA;;EACAc,QAAA;IACA,KAAAvC,SAAA,GAAAR,QAAA,MAAAS,QAAA;IACA,KAAAC,UAAA,GAAAT,SAAA,MAAAQ,QAAA;IACAL,IAAA,GAAAD,IAAA,CAAA6C,MAAA;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
