screenshare POC.

client/src/components/header.vue

@@ -5,6 +5,14 @@
       <span><b>n</b>.eko</span>
     </a>
     <ul class="menu">
+      <li>
+        <button class="btn" @click="startShareScreen" v-if="!mediaStream">
+          START SCREEN SHARE
+        </button>
+        <button class="btn" @click="stopShareScreen" v-else>
+          STOP SCREEN SHARE
+        </button>
+      </li>
       <li>
         <i
           :class="[{ disabled: !admin }, { locked: isLocked('control') }, 'fas', 'fa-mouse']"
@@ -207,5 +215,31 @@
 
       return this.$t(`locks.${resource}.` + (this.isLocked(resource) ? `locked` : `unlocked`))
     }
+
+    //
+    // Screen Share
+    //
+    mediaStream: MediaStream | null = null
+    mediaRtcpSender: RTCRtpSender | null = null
+    async startShareScreen() {
+      // get media stream from user's browser
+      this.mediaStream = await navigator.mediaDevices
+        .getDisplayMedia({
+          video: true,
+          audio: false,
+        })
+      const mediaTrack = this.mediaStream.getVideoTracks()[0];
+      this.mediaRtcpSender = this.$client.addTrack(mediaTrack, this.mediaStream)
+    }
+    async stopShareScreen() {
+      if (this.mediaStream) {
+        this.mediaStream.getTracks().forEach(track => track.stop())
+        this.mediaStream = null
+      }
+      if (this.mediaRtcpSender) {
+        this.$client.removeTrack(this.mediaRtcpSender)
+        this.mediaRtcpSender = null
+      }
+    }
   }
 </script>

client/src/neko/base.ts

@@ -313,6 +313,22 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
     this._peer.setRemoteDescription({ type: 'answer', sdp })
   }
 
+  public addTrack(track: MediaStreamTrack, ...streams: MediaStream[]): RTCRtpSender {
+    if (!this._peer) {
+      throw new Error('peer not connected')
+    }
+
+    return this._peer.addTrack(track, ...streams)
+  }
+
+  public removeTrack(sender: RTCRtpSender) {
+    if (!this._peer) {
+      throw new Error('peer not connected')
+    }
+
+    this._peer.removeTrack(sender)
+  }
+
   private async onMessage(e: MessageEvent) {
     const { event, ...payload } = JSON.parse(e.data) as WebSocketMessages