add bitrate switcher. (#15)

src/component/internal/connection.ts

@@ -164,12 +164,16 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
     this._reconnector.webrtc.config = this._state.webrtc.config
   }
 
-  public setVideo(video: string) {
-    if (!this._state.webrtc.videos.includes(video)) {
+  public setVideo(video: string, bitrate: number = 0) {
+    if (video != '' && !this._state.webrtc.videos.includes(video)) {
       throw new Error('video id not found')
     }
 
-    this.websocket.send(EVENT.SIGNAL_VIDEO, { video })
+    if (video == '' && bitrate == 0) {
+      throw new Error('video id and bitrate cannot be empty')
+    }
+
+    this.websocket.send(EVENT.SIGNAL_VIDEO, { video, bitrate })
   }
 
   public getLogger(scope?: string): Logger {

src/component/internal/messages.ts

@@ -194,9 +194,10 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     this.emit('connection.webrtc.sdp.candidate', 'remote', candidate)
   }
 
-  protected [EVENT.SIGNAL_VIDEO]({ video }: message.SignalVideo) {
-    this._localLog.debug(`EVENT.SIGNAL_VIDEO`, { video })
+  protected [EVENT.SIGNAL_VIDEO]({ video, bitrate }: message.SignalVideo) {
+    this._localLog.debug(`EVENT.SIGNAL_VIDEO`, { video, bitrate })
     Vue.set(this._state.connection.webrtc, 'video', video)
+    Vue.set(this._state.connection.webrtc, 'bitrate', bitrate)
   }
 
   protected [EVENT.SIGNAL_CLOSE]() {

src/component/main.vue

@@ -154,6 +154,7 @@
           },
           stats: null,
           video: null,
+          bitrate: null,
           videos: [],
         },
         screencast: true, // TODO: Should get by API call.
@@ -417,8 +418,8 @@
       this.connection.websocket.send(EVENT.SCREEN_SET, { width, height, rate })
     }
 
-    public setWebRTCVideo(video: string) {
-      this.connection.setVideo(video)
+    public setWebRTCVideo(video: string, bitrate: number = 0) {
+      this.connection.setVideo(video, bitrate)
     }
 
     public addTrack(track: MediaStreamTrack, ...streams: MediaStream[]): RTCRtpSender {

src/component/types/messages.ts

@@ -56,6 +56,7 @@ export interface SignalDescription {
 
 export interface SignalVideo {
   video: string
+  bitrate: number
 }
 
 /////////////////////////////

src/component/types/state.ts

@@ -38,6 +38,7 @@ export interface WebRTC {
   config: ReconnectorConfig
   stats: WebRTCStats | null
   video: string | null
+  bitrate: number | null
   videos: string[]
 }
 

src/page/components/events.vue

@@ -158,6 +158,9 @@
               {{ video }}
             </option>
           </select>
+          or
+          <input type="text" v-model="bitrate" style="width: 60px" placeholder="Bitrate" />
+          <button @click="neko.setWebRTCVideo('', Number(bitrate))">Set</button>
         </td>
       </tr>
       <tr>
@@ -446,7 +449,7 @@
 </style>
 
 <script lang="ts">
-  import { Vue, Component, Prop } from 'vue-property-decorator'
+  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
   import Neko from '~/component/main.vue'
 
   @Component({
@@ -456,6 +459,12 @@
     @Prop() readonly neko!: Neko
 
     clipboardText: string = ''
+    bitrate: number | null = null
+
+    @Watch('neko.state.connection.webrtc.bitrate')
+    onBitrateChange(val: number) {
+      this.bitrate = val
+    }
 
     shift = false
     get letters(): number[] {