| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport { getUsersig, reserveConferenceList } from '@/api/home';\nimport { getWidth, getHeight, getWidthPhone, getModile } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport roomFooterPhone from \"./components/footerPhone.vue\";\nimport ASR from '../utils/asr.esm.js';\nimport TRTC from 'trtc-sdk-v5';\nlet trtc = null;\nexport default {\n name: 'App',\n components: {\n roomFooter,\n roomFooterPhone\n },\n data() {\n return {\n userClass: \"userVideo5\",\n userClassPhone: \"userVideoPhone\",\n userList: [],\n userHeight: '100%',\n userPhoneHeight: '92%',\n userSign: \"\",\n roomId: \"\",\n userId: null,\n showFlag: false,\n modileFlag: false,\n localStreamAsr: null\n };\n },\n methods: {\n // 鼠标滑过显示操作栏\n mouseHover() {\n this.showFlag = true;\n setTimeout(() => {\n this.showFlag = false;\n }, 4000);\n },\n async exitRoom() {\n // 关闭识别时\n this.localStreamAsr.stop();\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 },\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 if (this.modileFlag) {\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n } else {\n this.userClassPhone = getWidthPhone(this.userList);\n }\n setTimeout(() => {\n trtc.startRemoteVideo({\n userId,\n streamType,\n view: `${userId}`\n });\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 if (this.modileFlag) {\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n } else {\n this.userClassPhone = getWidthPhone(this.userList);\n }\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 // 判断设备类型\n this.modileFlag = getModile();\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({\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 this.$router.push({\n name: 'Home'\n });\n }\n this.localStreamAsr = new ASR({\n secretKey: 'INDrIXcT8YmomZBcsy0oNirnU0LTN4X7',\n secretId: 'AKID3xfHgroY4MQHvLXUXMwIQL1UjmbBX1Tv',\n appId: 1304001529,\n engine_model_type: '16k_zh',\n voice_format: 1,\n needvad: 1,\n audioTrack: trtc.getAudioTrack()\n });\n this.localStreamAsr.start();\n // 开始识别\n this.localStreamAsr.OnRecognitionStart = res => {\n console.log('本地流：开始识别', res);\n };\n this.localStreamAsr.OnError = res => {\n console.log('本地流：识别失败', res);\n };\n // 一句话结束\n this.localStreamAsr.OnSentenceEnd = res => {\n console.log('本地流：一句话结束', res);\n };\n },\n created() {\n trtc = TRTC.create();\n }\n};","map":{"version":3,"names":["getUsersig","reserveConferenceList","getWidth","getHeight","getWidthPhone","getModile","roomFooter","roomFooterPhone","ASR","TRTC","trtc","name","components","data","userClass","userClassPhone","userList","userHeight","userPhoneHeight","userSign","roomId","userId","showFlag","modileFlag","localStreamAsr","methods","mouseHover","setTimeout","exitRoom","stop","updateLocalVideo","publish","updateLocalAudio","destroy","$router","push","getPushVideo","on","EVENT","REMOTE_VIDEO_AVAILABLE","event","streamType","startRemoteVideo","view","deletePushVideo","REMOTE_VIDEO_UNAVAILABLE","hostId","alert","deleteIndex","indexOf","filter","item","splice","reserveConferenceListFn","then","res","userName","mounted","$route","query","caseId","sdkAppId","msg","enterRoom","Number","scene","userSig","startLocalVideo","document","getElementById","startLocalAudio","console","log","$message","message","type","error","secretKey","secretId","appId","engine_model_type","voice_format","needvad","audioTrack","getAudioTrack","start","OnRecognitionStart","OnError","OnSentenceEnd","created","create"],"sources":["src/views/room.vue"],"sourcesContent":["<template>\n <div class=\"page\">\n <div class=\"roompage\" @mouseover=\"mouseHover\" v-if=\"modileFlag\">\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\" v-if=\"!modileFlag\">\n <div class=\"header\">\n <roomFooterPhone @exitRoom=\"exitRoom\"></roomFooterPhone>\n </div>\n <div class=\"bodyVideo\">\n <div :class=\"userClassPhone\" id=\"localStream\">\n <div class=\"userNamePhone\">{{ userId }}</div>\n </div>\n <div :class=\"userClassPhone\" v-for=\"(item, index) in userList\" :key=\"index\" :id=\"item\">\n <div class=\"userNamePhone\">{{ item }}</div>\n </div>\n </div>\n </div>\n </div>\n</template>¡\n \n<script>\nimport { getUsersig, reserveConferenceList } from '@/api/home';\nimport { getWidth, getHeight, getWidthPhone, getModile } from \"@/utils/utils\";\nimport roomFooter from './components/roomFooter.vue';\nimport roomFooterPhone from \"./components/footerPhone.vue\";\nimport ASR from '../utils/asr.esm.js'\nimport TRTC from 'trtc-sdk-v5';\nlet trtc = null;\n\nexport default {\n name: 'App',\n components: {\n roomFooter,\n roomFooterPhone\n },\n data() {\n return {\n userClass: \"userVideo5\",\n userClassPhone: \"userVideoPhone\",\n userList: [],\n userHeight: '100%',\n userPhoneHeight: '92%',\n userSign: \"\",\n roomId: \"\",\n userId: null,\n showFlag: false,\n modileFlag: false,\n localStreamAsr:null,\n };\n },\n methods: {\n // 鼠标滑过显示操作栏\n mouseHover() {\n this.showFlag = true;\n setTimeout(() => {\n this.showFlag = false;\n }, 4000)\n },\n async exitRoom() {\n // 关闭识别时\n this.localStreamAsr.stop();\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 if (this.modileFlag) {\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n } else {\n this.userClassPhone = getWidthPhone(this.userList);\n }\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 if (this.modileFlag) {\n this.userClass = getWidth(this.userList);\n this.userHeight = getHeight(this.userList);\n } else {\n this.userClassPhone = getWidthPhone(this.userList);\n }\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 // 判断设备类型\n this.modileFlag = getModile();\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 this.localStreamAsr = new ASR({\n secretKey: 'INDrIXcT8YmomZBcsy0oNirnU0LTN4X7',\n secretId: 'AKID3xfHgroY4MQHvLXUXMwIQL1UjmbBX1Tv',\n appId: 1304001529,\n engine_model_type: '16k_zh',\n voice_format: 1,\n needvad:1,\n audioTrack: trtc.getAudioTrack(),\n });\n this.localStreamAsr.start();\n // 开始识别\n this.localStreamAsr.OnRecognitionStart = (res) => {\n console.log('本地流：开始识别', res);\n };\n this.localStreamAsr.OnError = (res) => {\n console.log('本地流：识别失败', res);\n };\n // 一句话结束\n this.localStreamAsr.OnSentenceEnd = (res) => {\n console.log('本地流：一句话结束', res);\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\n.userNamePhone {\n border-radius: 10px;\n min-width: 20%;\n height: 30px;\n line-height: 30px;\n text-align: center;\n background-color: black;\n font-size: 12px;\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 9;\n color: #ffffff;\n}\n\n.header {\n width: 100%;\n height: 8%;\n background-color: #716c6c;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n\n.roomPhone {\n width: 100%;\n height: 100vh;\n}\n\n.bodyVideo {\n width: 100%;\n height: 92%;\n display: flex;\n flex-wrap: wrap;\n /* justify-content: space-between; */\n}\n\n.userVideoPhone {\n width: 100%;\n height: 100%;\n background-color: yellow;\n position: relative;\n}\n\n.userVideoPhone1 {\n width: 50%;\n flex-basis: calc(33.333% - 3px);\n max-width: calc(33.333% - 3px);\n height: 200px;\n /* height: 0; */\n /* padding-bottom: calc(33.333% - 3px); */\n margin-bottom: 3px;\n position: relative;\n}\n</style>\n \n \n "],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
