| | |
| | | </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> |
| | |
| | | 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.stopPlayRecord(); |
| | | } |
| | | this.recordPlay = '' |
| | | if (this.broadcastStatus === 1) { |
| | | this.stopBroadcast() |
| | | } |
| | | }, |
| | | |
| | | copySharedInfo: function (data) { |
| | |
| | | }); |
| | | }, |
| | | 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', |
| | |
| | | } |
| | | }); |
| | | }else if (this.broadcastStatus === 1) { |
| | | this.broadcastRtc.close() |
| | | this.broadcastRtc = null; |
| | | this.broadcastStatus = -1; |
| | | this.stopBroadcast() |
| | | } |
| | | }, |
| | | startBroadcast(url){ |
| | |
| | | }); |
| | | this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,(e)=>{// offer anwser 交换失败 |
| | | console.log('状态改变',e) |
| | | if (e === "failed") { |
| | | this.broadcastStatus = -1; |
| | | }else if (e === "connecting") { |
| | | if (e === "connecting") { |
| | | this.broadcastStatus = 0; |
| | | }else{ |
| | | }else if (e === "connected") { |
| | | this.broadcastStatus = 1; |
| | | }else if (e === "disconnected") { |
| | | this.broadcastStatus = -1; |
| | | } |
| | | }); |
| | | this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,(e)=>{// offer anwser 交换失败 |
| | |
| | | type: 'error' |
| | | }); |
| | | }); |
| | | }, |
| | | stopBroadcast(){ |
| | | this.broadcastStatus = -2; |
| | | this.broadcastRtc = null; |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: '/api/play/broadcast/stop/' + this.deviceId + '/' + this.channelId |
| | | }).then( (res)=> { |
| | | if (res.data.code == 0) { |
| | | // this.broadcastStatus = -1; |
| | | // this.broadcastRtc.close() |
| | | }else { |
| | | this.$message({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: "error", |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | } |
| | | } |
| | | }; |