webrtc connection change.

src/component/internal/messages.ts

@@ -111,8 +111,10 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
   // Signal Events
   /////////////////////////////
 
-  protected [EVENT.SIGNAL_PROVIDE]({ event }: message.SignalProvide) {
+  protected [EVENT.SIGNAL_PROVIDE]({ event, video, videos }: message.SignalProvide) {
     this._log.debug('EVENT.SIGNAL_PROVIDE')
+    Vue.set(this.state.connection.webrtc, 'video', video)
+    Vue.set(this.state.connection.webrtc, 'videos', videos)
     // TODO: Handle.
   }
 
@@ -121,6 +123,11 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     // TODO: Handle.
   }
 
+  protected [EVENT.SIGNAL_VIDEO]({ event, video }: message.SignalVideo) {
+    this._log.debug('EVENT.SIGNAL_VIDEO')
+    Vue.set(this.state.connection.webrtc, 'video', video)
+  }
+
   /////////////////////////////
   // Member Events
   /////////////////////////////

src/component/main.vue

@@ -85,8 +85,12 @@
       connection: {
         authenticated: false,
         websocket: this.websocket.supported ? 'disconnected' : 'unavailable',
-        webrtc: this.webrtc.supported ? 'disconnected' : 'unavailable',
-        webrtc_stats: null,
+        webrtc: {
+          status: this.webrtc.supported ? 'disconnected' : 'unavailable',
+          stats: null,
+          video: null,
+          videos: [],
+        },
         type: 'none',
       },
       video: {
@@ -127,7 +131,7 @@
     }
 
     public get watching() {
-      return this.state.connection.webrtc == 'connected'
+      return this.state.connection.webrtc.status == 'connected'
     }
 
     public get controlling() {
@@ -264,6 +268,14 @@
       this.websocket.send('screen/set', { width, height, rate })
     }
 
+    public setWebRTCVideo(video: string) {
+      if (!this.state.connection.webrtc.videos.includes(video)) {
+        throw new Error('VideoID not found.')
+      }
+
+      this.websocket.send('signal/video', { video: video })
+    }
+
     public sendUnicast(receiver: string, subject: string, body: any) {
       this.websocket.send('send/unicast', { receiver, subject, body })
     }
@@ -373,20 +385,22 @@
         this.websocket.send('signal/candidate', candidate)
       })
       this.webrtc.on('stats', (stats: WebRTCStats) => {
-        Vue.set(this.state.connection, 'webrtc_stats', stats)
+        Vue.set(this.state.connection.webrtc, 'stats', stats)
       })
       this.webrtc.on('connecting', () => {
-        Vue.set(this.state.connection, 'webrtc', 'connecting')
+        Vue.set(this.state.connection.webrtc, 'status', 'connecting')
         this.events.emit('connection.webrtc', 'connecting')
       })
       this.webrtc.on('connected', () => {
-        Vue.set(this.state.connection, 'webrtc', 'connected')
+        Vue.set(this.state.connection.webrtc, 'status', 'connected')
         Vue.set(this.state.connection, 'type', 'webrtc')
         this.events.emit('connection.webrtc', 'connected')
       })
       this.webrtc.on('disconnected', () => {
-        Vue.set(this.state.connection, 'webrtc', 'disconnected')
-        Vue.set(this.state.connection, 'webrtc_stats', null)
+        Vue.set(this.state.connection.webrtc, 'status', 'disconnected')
+        Vue.set(this.state.connection.webrtc, 'stats', null)
+        Vue.set(this.state.connection.webrtc, 'video', null)
+        Vue.set(this.state.connection.webrtc, 'videos', [])
         Vue.set(this.state.connection, 'type', 'none')
         this.events.emit('connection.webrtc', 'disconnected')
 

src/component/types/events.ts

@@ -6,6 +6,7 @@ export const SIGNAL_REQUEST = 'signal/request'
 export const SIGNAL_ANSWER = 'signal/answer'
 export const SIGNAL_PROVIDE = 'signal/provide'
 export const SIGNAL_CANDIDATE = 'signal/candidate'
+export const SIGNAL_VIDEO = 'signal/video'
 
 export const MEMBER_CREATED = 'member/created'
 export const MEMBER_DELETED = 'member/deleted'

src/component/types/messages.ts

@@ -37,6 +37,8 @@ export interface SignalProvide {
   sdp: string
   lite: boolean
   ice: string[]
+  video: string
+  videos: string[]
 }
 
 export interface SignalCandidate extends RTCIceCandidateInit {
@@ -48,6 +50,11 @@ export interface SignalAnswer {
   sdp: string
 }
 
+export interface SignalVideo {
+  event: string | undefined
+  video: string
+}
+
 /////////////////////////////
 // Member
 /////////////////////////////

src/component/types/state.ts

@@ -13,11 +13,17 @@ export default interface State {
 export interface Connection {
   authenticated: boolean
   websocket: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
-  webrtc: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
-  webrtc_stats: WebRTCStats | null
+  webrtc: WebRTC
   type: 'webrtc' | 'fallback' | 'none'
 }
 
+export interface WebRTC {
+  status: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
+  stats: WebRTCStats | null
+  video: string | null
+  videos: string[]
+}
+
 export interface WebRTCStats {
   bitrate: number
   packetLoss: number