| 1 |
- {"ast":null,"code":"import { getUsersig } from '@/api/home';\nimport { getWidth, getHeight } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport TRTC from 'trtc-sdk-v5';\nconst trtc = TRTC.create();\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 };\n },\n methods: {},\n // async mounted() {\n // let 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 // 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 // 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 // } catch (error) {\n // console.error('进房失败 ' + error);\n // }\n // },\n created() {}\n};","map":{"version":3,"names":["getUsersig","getWidth","getHeight","roomFooter","TRTC","trtc","create","name","components","data","userClass","userList","userHeight","userSign","methods","created"],"sources":["src/views/room.vue"],"sourcesContent":["<template>\n <div class=\"roompage\">\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" id=\"localStream\"></div>\n <div :class=\"userClass\" :style=\"{ height: userHeight }\" v-for=\"(item, index) in userList\" :key=\"index\" :id=\"item\">\n </div>\n <div class=\"footer\">\n <roomFooter></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';\nconst trtc = TRTC.create();\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 };\n },\n methods: {\n\n },\n // async mounted() {\n // let 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 // 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 // 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 // } catch (error) {\n // console.error('进房失败 ' + error);\n // }\n // },\n created() {\n \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.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.footer{\n width: 100%;\n height: 10%;\n background: rgb(46 43 43 / 90%);\n position: absolute;\n bottom: 0;\n}\n</style>\n \n \n "],"mappings":"AAYA,SAAAA,UAAA;AACA,SAAAC,QAAA,EAAAC,SAAA;AACA,OAAAC,UAAA;AACA,OAAAC,IAAA;AACA,MAAAC,IAAA,GAAAD,IAAA,CAAAE,MAAA;AACA;EACAC,IAAA;EACAC,UAAA;IACAL;EACA;EACAM,KAAA;IACA;MACAC,SAAA;MACAC,QAAA;MACAC,UAAA;MACAC,QAAA;IACA;EACA;EACAC,OAAA,GAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACAC,QAAA,GAEA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
