From f857808497f27e94cf6e1bea587b6480be999bf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Thu, 5 Nov 2020 18:44:36 +0100
Subject: [PATCH] webrtc with video.

---
 src/Neko.vue | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/Neko.vue b/src/Neko.vue
index c58dcad4..b2bf366b 100644
--- a/src/Neko.vue
+++ b/src/Neko.vue
@@ -1,14 +1,17 @@
 <template>
   <div>
-    <h1>Hello world, Neko.</h1>
     <button @click="connect()">Connect</button>
     <button @click="disconnect()">Disonnect</button>
-    <button @click="send()">Send</button>
+    <button @click="send()">Send</button><br />
+    websocket_state: {{ websocket_state }}<br />
+    webrtc_state: {{ webrtc_state }}<br />
+
+    <video ref="video" />
   </div>
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Ref } from 'vue-property-decorator'
+  import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
   import { NekoWebSocket } from './internal/websocket'
   import { NekoWebRTC } from './internal/webrtc'
 
@@ -16,9 +19,14 @@
     name: 'neko',
   })
   export default class extends Vue {
+    @Ref('video') readonly _video!: HTMLVideoElement
+
     protected _websocket?: NekoWebSocket
     protected _webrtc?: NekoWebRTC
 
+    websocket_state = 'disconnected'
+    webrtc_state = 'disconnected'
+
     public connect() {
       try {
         this._websocket?.connect('ws://192.168.1.20:3000/', 'admin')
@@ -37,7 +45,7 @@
       this._websocket = new NekoWebSocket()
       this._webrtc = new NekoWebRTC()
 
-      this._websocket?.on('message', async (event, payload) => {
+      this._websocket?.on('message', async (event: string, payload: any) => {
         if (event == 'signal/provide') {
           try {
             let sdp = await this._webrtc?.connect(payload.sdp, payload.lite, payload.ice)
@@ -47,9 +55,42 @@
           console.log(event, payload)
         }
       })
+      this._websocket?.on('connecting', () => {
+        this.websocket_state = 'connecting'
+      })
+      this._websocket?.on('connected', () => {
+        this.websocket_state = 'connected'
+      })
       this._websocket?.on('disconnected', () => {
+        this.websocket_state = 'disconnected'
         this._webrtc?.disconnect()
       })
+
+      this._webrtc?.on('track', (event: RTCTrackEvent) => {
+        const { track, streams } = event
+        if (track.kind === 'audio') {
+          return
+        }
+
+        // Create stream
+        if ('srcObject' in this._video) {
+          this._video.srcObject = streams[0]
+        } else {
+          // @ts-ignore
+          this._video.src = window.URL.createObjectURL(streams[0]) // for older browsers
+        }
+
+        this._video.play()
+      })
+      this._webrtc?.on('connecting', () => {
+        this.webrtc_state = 'connecting'
+      })
+      this._webrtc?.on('connected', () => {
+        this.webrtc_state = 'connected'
+      })
+      this._webrtc?.on('disconnected', () => {
+        this.webrtc_state = 'disconnected'
+      })
     }
   }
 </script>