| 1 |
- {"ast":null,"code":"// import { getUsersig, reserveConferenceList } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\n// import TRTC from 'trtc-sdk-v5';\n// let trtc = null;\nexport default {\n name: 'App',\n components: {\n roomFooter\n },\n data() {\n return {\n userClass: \"userVideo5\",\n userList: [1, 2, 3, 4, 5],\n userHeight: '100%',\n userSign: \"\",\n roomId: \"\",\n userId: null,\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 // },\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 // 删除退出会议人员列表\n // deletePushVideo() {\n // trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n // const userId = event.userId;\n // if (this.hostId == userId) {\n // alert('主持人已经解散会议')\n // this.$router.push({\n // name: 'Home'\n // })\n // this.userList = [];\n // return\n // }\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 // 根据caseId查询房间相关信息\n // reserveConferenceListFn(data) {\n // reserveConferenceList(data).then(res => {\n // this.hostId = res.data[0].userName;\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 // this.userId = this.$route.query.userId;\n // this.caseId = this.$route.query.caseId;\n // // 获取主持人的userId\n // this.reserveConferenceListFn(this.caseId)\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 // trtc = TRTC.create();\n }\n};","map":{"version":3,"names":["getWidth","getHeight","roomFooter","name","components","data","userClass","userList","userHeight","userSign","roomId","userId","showFlag","methods","mounted","created"],"sources":["src/views/room.vue"],"sourcesContent":["<template>\n <div class=\"page\">\n <!-- <div class=\"roompage\" @mouseover=\"mouseHover\">\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\">\n <div class=\"userName\">{{ userId }}</div>\n </div>\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" v-for=\"(item, index) in userList\" :key=\"index\"\n :id=\"item\">\n <div class=\"userName\">{{ item }}</div>\n </div>\n <div class=\"footer\" v-show=\"showFlag\">\n <roomFooter @exitRoom=\"exitRoom\" :roomId=\"roomId\"></roomFooter>\n </div>\n </div> -->\n <div class=\"roomPhone\">\n <div class=\"header\">\n <div>\n <el-button type=\"danger\">退出房间</el-button>\n\n </div>\n </div>\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\">\n <div class=\"userName\">{{ userId }}</div>\n </div>\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" v-for=\"(item, index) in userList\" :key=\"index\"\n :id=\"item\">\n <div class=\"userName\">{{ item }}</div>\n </div>\n <div class=\"footer\" v-show=\"showFlag\">\n <roomFooter @exitRoom=\"exitRoom\" :roomId=\"roomId\"></roomFooter>\n </div>\n </div>\n </div>\n</template>\n \n<script>\n// import { getUsersig, reserveConferenceList } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\n// import TRTC from 'trtc-sdk-v5';\n// let trtc = null;\nexport default {\n name: 'App',\n components: {\n roomFooter\n },\n data() {\n return {\n userClass: \"userVideo5\",\n userList: [1,2,3,4,5],\n userHeight: '100%',\n userSign: \"\",\n roomId: \"\",\n userId: null,\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 // },\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 // 删除退出会议人员列表\n // deletePushVideo() {\n // trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {\n // const userId = event.userId;\n // if (this.hostId == userId) {\n // alert('主持人已经解散会议')\n // this.$router.push({\n // name: 'Home'\n // })\n // this.userList = [];\n // return\n // }\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 // 根据caseId查询房间相关信息\n // reserveConferenceListFn(data) {\n // reserveConferenceList(data).then(res => {\n // this.hostId = res.data[0].userName;\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 // this.userId = this.$route.query.userId;\n // this.caseId = this.$route.query.caseId;\n // // 获取主持人的userId\n // this.reserveConferenceListFn(this.caseId)\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 // 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\n.userVideo,\n.userVideo1,\n.userVideo2,\n.userVideo3,\n.userVideo4,\n.userVideo5 {\n position: relative;\n}\n\n.userVideo5 {\n width: 100%;\n}\n\n.userVideo {\n width: 48%;\n}\n\n.userVideo1 {\n width: 33%;\n}\n\n.userVideo2 {\n width: 33%;\n}\n\n.userVideo3 {\n width: 33%;\n}\n\n.userVideo4 {\n width: 100%;\n}\n\n.footer {\n width: 100%;\n height: 10%;\n background: rgb(46 43 43 / 90%);\n position: absolute;\n bottom: 0;\n z-index: 10;\n}\n\n.userName {\n border-radius: 10px;\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: 9;\n color: #ffffff;\n}\n.header{\n width: 100%;\n height: 8%;\n background-color: #b41818;\n}\n.roomPhone{\n width: 100%;\n height: 100vh;\n}\n</style>\n \n \n "],"mappings":"AAoCA;AACA,SAAAA,QAAA,EAAAC,SAAA;AACA,OAAAC,UAAA;AACA;AACA;AACA;EACAC,IAAA;EACAC,UAAA;IACAF;EACA;EACAG,KAAA;IACA;MACAC,SAAA;MACAC,QAAA;MACAC,UAAA;MACAC,QAAA;MACAC,MAAA;MACAC,MAAA;MACAC,QAAA;IACA;EACA;EACAC,OAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EAAA,CACA;EACA,MAAAC,QAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EAAA,CACA;EACAC,QAAA;IACA;EAAA;AAEA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
