| | |
| | | </el-tab-pane> |
| | | <el-tab-pane label="语音对讲" name="broadcast" > |
| | | <div class="trank" style="text-align: center;"> |
| | | <el-button @click="broadcastStatusClick()" :type="getBroadcastStatus()" circle icon="el-icon-microphone" style="font-size: 32px; padding: 24px;margin-top: 24px;"/> |
| | | <el-button @click="broadcastStatusClick()" :type="getBroadcastStatus()" :disabled="broadcastStatus === -2" circle icon="el-icon-microphone" style="font-size: 32px; padding: 24px;margin-top: 24px;"/> |
| | | <p> |
| | | <span v-if="broadcastStatus === -2">正在释放资源</span> |
| | | <span v-if="broadcastStatus === -1">点击开始对讲</span> |
| | | <span v-if="broadcastStatus === 0">等待接通中...</span> |
| | | <span v-if="broadcastStatus === 1">请说话</span> |
| | |
| | | |
| | | <script> |
| | | import rtcPlayer from '../dialog/rtcPlayer.vue' |
| | | import crypto from 'crypto' |
| | | // import LivePlayer from '@liveqing/liveplayer' |
| | | // import player from '../dialog/easyPlayer.vue' |
| | | import jessibucaPlayer from '../common/jessibuca.vue' |
| | |
| | | showTimeText: "00:00:00", |
| | | streamInfo: null, |
| | | broadcastRtc: null, |
| | | broadcastStatus: -1, // -1 默认状态 0 等待接通 1 接通成功 |
| | | broadcastStatus: -1, // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功 |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId |
| | | }).then(function (res) { |
| | | that.tracksLoading = false; |
| | | if (res.data.code == 0 && res.data.online) { |
| | | if (res.data.code == 0 && res.data.tracks) { |
| | | that.tracks = res.data.tracks; |
| | | }else{ |
| | | that.tracksNotLoaded = true; |
| | |
| | | this.playFromStreamInfo(false, streamInfo) |
| | | }, |
| | | getUrlByStreamInfo(){ |
| | | console.log(this.streamInfo) |
| | | if (location.protocol === "https:") { |
| | | this.videoUrl = this.streamInfo[this.player[this.activePlayer][1]] |
| | | }else { |
| | |
| | | this.$refs[this.activePlayer].pause() |
| | | that.$axios({ |
| | | method: 'post', |
| | | url: '/api/gb_record/convert/' + that.streamId |
| | | url: '/api/play/convert/' + that.streamId |
| | | }).then(function (res) { |
| | | if (res.data.code == 0) { |
| | | if (res.data.code === 0) { |
| | | that.convertKey = res.data.key; |
| | | setTimeout(()=>{ |
| | | that.isLoging = false; |
| | |
| | | url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + |
| | | row.endTime |
| | | }).then(function (res) { |
| | | that.streamInfo = res.data; |
| | | if (res.data.code === 0) { |
| | | that.streamInfo = res.data.data; |
| | | that.app = that.streamInfo.app; |
| | | that.streamId = that.streamInfo.stream; |
| | | that.mediaServerId = that.streamInfo.mediaServerId; |
| | | that.ssrc = that.streamInfo.ssrc; |
| | | that.videoUrl = that.getUrlByStreamInfo(); |
| | | that.recordPlay = true; |
| | | } |
| | | that.recordPlay = true; |
| | | }); |
| | | } |
| | | }, |
| | |
| | | }); |
| | | }, |
| | | getBroadcastStatus() { |
| | | if (this.broadcastStatus == -2) { |
| | | return "primary" |
| | | } |
| | | if (this.broadcastStatus == -1) { |
| | | return "primary" |
| | | } |
| | |
| | | broadcastStatusClick() { |
| | | if (this.broadcastStatus == -1) { |
| | | // 默认状态, 开始 |
| | | this.broadcastStatus = 0 |
| | | // 发起语音对讲 |
| | | this.$axios({ |
| | | method: 'get', |
| | |
| | | } |
| | | }, |
| | | startBroadcast(url){ |
| | | // 获取推流鉴权KEY |
| | | console.log(this.$loginUser) |
| | | console.log(this.$loginUser.pushKey) |
| | | url += "&sign=" + crypto.createHash('md5').update(this.$loginUser.pushKey, "utf8").digest('hex') |
| | | console.log("开始语音对讲: " + url) |
| | | this.broadcastRtc = new ZLMRTCClient.Endpoint({ |
| | | debug: true, // 是否打印日志 |
| | |
| | | this.broadcastStatus = 0; |
| | | }else if (e === "connected") { |
| | | this.broadcastStatus = 1; |
| | | }else { |
| | | }else if (e === "disconnected") { |
| | | this.broadcastStatus = -1; |
| | | } |
| | | }); |
| | |
| | | }); |
| | | }, |
| | | stopBroadcast(){ |
| | | this.broadcastRtc.close() |
| | | this.broadcastStatus = -2; |
| | | this.broadcastRtc = null; |
| | | this.$axios({ |
| | | method: 'get', |
| | |
| | | }).then( (res)=> { |
| | | if (res.data.code == 0) { |
| | | // this.broadcastStatus = -1; |
| | | |
| | | // this.broadcastRtc.close() |
| | | }else { |
| | | this.$message({ |
| | | showClose: true, |