{"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';\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 exitRoom() {\n      await trtc.exitRoom();\n      await trtc.updateLocalVideo({\n        publish: false\n      });\n      await trtc.updateLocalAudio({\n        publish: false\n      });\n      this.$router.push({\n        name: \"Home\"\n      });\n      // this.$router.go(-1)\n    }\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({\n          userId,\n          streamType,\n          view: `${userId}`\n        });\n      });\n    });\n    try {\n      await trtc.enterRoom({\n        roomId: Number(roomId),\n        scene: 'rtc',\n        sdkAppId,\n        userId,\n        userSig: this.userSign\n      });\n      await trtc.startLocalVideo({\n        view: document.getElementById('localStream') // 在 DOM 中的 elementId 为 localStream 的标签上预览视频。\n      });\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    }\n  },\n  created() {}\n};","map":{"version":3,"names":["getUsersig","getWidth","getHeight","roomFooter","TRTC","trtc","create","name","components","data","userClass","userList","userHeight","userSign","methods","exitRoom","updateLocalVideo","publish","updateLocalAudio","$router","push","mounted","roomId","$route","query","userId","sdkAppId","then","res","msg","on","EVENT","REMOTE_VIDEO_AVAILABLE","event","streamType","setTimeout","startRemoteVideo","view","enterRoom","Number","scene","userSig","startLocalVideo","document","getElementById","startLocalAudio","console","log","$message","message","type","error","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 @exitRoom=\"exitRoom\"></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        async exitRoom(){\n            await trtc.exitRoom();\n            await trtc.updateLocalVideo({publish:false});\n            await trtc.updateLocalAudio({publish:false});\n            this.$router.push({\n                name:\"Home\"\n            })\n            // this.$router.go(-1)\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            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        }\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;IACA,MAAAC,SAAA;MACA,MAAAV,IAAA,CAAAU,QAAA;MACA,MAAAV,IAAA,CAAAW,gBAAA;QAAAC,OAAA;MAAA;MACA,MAAAZ,IAAA,CAAAa,gBAAA;QAAAD,OAAA;MAAA;MACA,KAAAE,OAAA,CAAAC,IAAA;QACAb,IAAA;MACA;MACA;IACA;EACA;;EACA,MAAAc,QAAA;IACA,IAAAC,MAAA,QAAAC,MAAA,CAAAC,KAAA,CAAAF,MAAA;IACA,IAAAG,MAAA,QAAAF,MAAA,CAAAC,KAAA,CAAAC,MAAA;IACA,MAAAC,QAAA;IACA;IACA,MAAA1B,UAAA,CAAAyB,MAAA,EAAAE,IAAA,CAAAC,GAAA;MACA,KAAAf,QAAA,GAAAe,GAAA,CAAAC,GAAA;IACA;IACAxB,IAAA,CAAAyB,EAAA,CAAA1B,IAAA,CAAA2B,KAAA,CAAAC,sBAAA,EAAAC,KAAA;MACA,MAAAR,MAAA,GAAAQ,KAAA,CAAAR,MAAA;MACA,MAAAS,UAAA,GAAAD,KAAA,CAAAC,UAAA;MACA,KAAAvB,QAAA,CAAAS,IAAA,CAAAK,MAAA;MACA,KAAAf,SAAA,GAAAT,QAAA,MAAAU,QAAA;MACA;MACAwB,UAAA;QACA9B,IAAA,CAAA+B,gBAAA;UAAAX,MAAA;UAAAS,UAAA;UAAAG,IAAA,KAAAZ,MAAA;QAAA;MACA;IACA;IACA;MACA,MAAApB,IAAA,CAAAiC,SAAA;QAAAhB,MAAA,EAAAiB,MAAA,CAAAjB,MAAA;QAAAkB,KAAA;QAAAd,QAAA;QAAAD,MAAA;QAAAgB,OAAA,OAAA5B;MAAA;MACA,MAAAR,IAAA,CAAAqC,eAAA;QACAL,IAAA,EAAAM,QAAA,CAAAC,cAAA;MACA;;MACA,MAAAvC,IAAA,CAAAwC,eAAA;MACAC,OAAA,CAAAC,GAAA;MACA,KAAAC,QAAA;QACAC,OAAA;QACAC,IAAA;MACA;IACA,SAAAC,KAAA;MACAL,OAAA,CAAAK,KAAA,WAAAA,KAAA;MACA,KAAAH,QAAA;QACAC,OAAA;QACAC,IAAA;MACA;IACA;EACA;EACAE,QAAA,GAEA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}