diff --git a/src/components/modules/config/ConfigVideo.vue b/src/components/modules/config/ConfigVideo.vue index 6f406c3..79fa969 100644 --- a/src/components/modules/config/ConfigVideo.vue +++ b/src/components/modules/config/ConfigVideo.vue @@ -111,7 +111,8 @@ export default { key: this.newitem.key, name: this.newitem.name, webrtcEndpoint: `${protocol}://${this.newitem.hostname}:${this.newitem.port}`, - enabled: false + enabled: false, + action: start } this.$store.commit('data/addVideoStream', {key: data.key, data: data}) }, diff --git a/src/components/modules/video/VideoModule.vue b/src/components/modules/video/VideoModule.vue index 79f43d5..03865de 100644 --- a/src/components/modules/video/VideoModule.vue +++ b/src/components/modules/video/VideoModule.vue @@ -32,7 +32,7 @@ v-content v-chip.ma-2(v-if="streamStatus[stream.key]=='playing'" color='green') v-icon(left) mdi-check-circle span Playing - v-chip.ma-2(v-else-if="streamStatus[stream.key]=='buffering'" color='amber') + v-chip.ma-2(v-else-if="streamStatus[stream.key]=='buffering' || stream.action == 'stop'" color='amber') v-icon(left) mdi-alert span Buffering v-chip.ma-2(v-else color='red') @@ -42,15 +42,15 @@ v-content v-chip.ma-2(color='blue') {{ cleanBitrate(statBitrate[stream.key]) }} span Packet Loss v-chip.ma-2(color='red') {{ statPacketloss[stream.key] }} - VideoStream(:config="{ url: stream.webrtcEndpoint }" :videostream="stream.key" :width="refWidth('layout-'+stream.key)" :stream="1" @status="updateStatus(stream.key, $event)" @packetloss="updatePacketloss(stream.key, $event)" @bitrate="updateBitrate(stream.key, $event)") - v-card-text + VideoStream(:config="{ url: stream.webrtcEndpoint }" :videostream="stream.key" :width="refWidth('layout-'+stream.key)" :stream="1" :action="stream.action" @status="updateStatus(stream.key, $event)" @packetloss="updatePacketloss(stream.key, $event)" @bitrate="updateBitrate(stream.key, $event)") + // v-card-text v-layout.d-flex.justify-space-between(flat) - div + // div v-btn-toggle.ma-2(v-model="actionState" shaped mandatory dense) - v-btn(color='green' value='start') + v-btn(color='green' @click="stream.action='start'") v-icon(left) mdi-play span Start - v-btn(color='red' value='stop') + v-btn(color='red' @click="stream.action='stop'") v-icon(left) mdi-stop span Stop // span BitRate diff --git a/src/components/modules/video/VideoStream.vue b/src/components/modules/video/VideoStream.vue index 33e258d..a9ca8f2 100644 --- a/src/components/modules/video/VideoStream.vue +++ b/src/components/modules/video/VideoStream.vue @@ -23,12 +23,32 @@ export default { videostream: { type: String, default: null + }, + action: { + type: String, + default: null } }, data () { return { - lastStats: null + lastStats: null, + streaming: null + } + }, + + watch: { + action: { + handler: function (newValue) { + this.logDebug(`action: ${newValue}, ${this.action}`) + if (this.action == 'start') { + this.streaming.start() + } else if (this.action == 'pause') { + this.stremaing.pause() + } else if (this.action == 'stop') { + this.streaming.stop() + } + } } }, @@ -39,7 +59,7 @@ export default { mounted () { let janus = this.janus = new Janus(this.config, console) - let streaming = new StreamingJanusPlugin(console, false) + this.streaming = new StreamingJanusPlugin(console, false) let peerConnection = new RTCPeerConnection() let bitrate = 0 let packetloss = 0 @@ -61,15 +81,15 @@ export default { this.$emit('status', 'init') janus.connect().then(() => { - return janus.addPlugin(streaming) + return janus.addPlugin(this.streaming) }).then(() => { // console.info('plugin added', janus) peerConnection.onicecandidate = (event) => { // console.log('@onicecandidate', event) if (!event.candidate || !event.candidate.candidate) { - streaming.candidate({completed: true}) + this.streaming.candidate({completed: true}) } else { - streaming.candidate({ + this.streaming.candidate({ candidate: event.candidate.candidate, sdpMid: event.candidate.sdpMid, sdpMLineIndex: event.candidate.sdpMLineIndex @@ -94,11 +114,11 @@ export default { } // streaming.on('webrtcState', (a, b) => { console.log('webrtcState', a, b) }) // streaming.on('mediaState', (a, b) => { console.log('mediaState', a, b) }) - streaming.on('statusChange', (status) => { + this.streaming.on('statusChange', (status) => { // console.log('statusChange', status) this.$emit('status', status) }) - return streaming.watch(this.stream) + return this.streaming.watch(this.stream) }).then((jsep) => { return peerConnection.setRemoteDescription(new RTCSessionDescription(jsep)) }).then(() => { @@ -107,7 +127,7 @@ export default { }).then(answer => { // console.log('answerCreated', answer) peerConnection.setLocalDescription(answer) - return streaming.start(answer) + return this.streaming.start(answer) }).then(({body, json}) => { // console.log('START', body, json) })