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)
})