Add actions to video, disabled for now #147

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

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') <strong>{{ cleanBitrate(statBitrate[stream.key]) }}</strong>
                 span Packet Loss
                   v-chip.ma-2(color='red') <strong>{{ statPacketloss[stream.key] }}</strong>
-              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

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