Sender specify target with a text field

handshake/src/main/java/se/su/dsv/sharingiscaringhandshake/SenderMessage.java

@@ -8,7 +8,7 @@ import com.fasterxml.jackson.annotation.JsonTypeInfo;
         @JsonSubTypes.Type(value = RTCMessage.Answer.class, name = "rtc_answer"),
         @JsonSubTypes.Type(value = RTCMessage.ICECandidate.class, name = "rtc_ice_candidate"),
         @JsonSubTypes.Type(value = RTCMessage.Offer.class, name = "rtc_offer"),
-        @JsonSubTypes.Type(value = ReceiverMessage.ReceiverReady.class, name = "sender_ready"),
+        @JsonSubTypes.Type(value = SenderMessage.SenderReady.class, name = "sender_ready"),
 })
 public sealed interface SenderMessage
         permits RTCMessage.Answer, RTCMessage.ICECandidate, RTCMessage.Offer, SenderMessage.SenderReady

receiver/src/App.tsx

@@ -1,8 +1,9 @@
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import './App.css'
 import {useWebRTC} from "./webrtc.ts";
 import useWebSocket from "react-use-websocket";
 import {RTCMessage} from "./rtcmessage.ts";
+import Video from "./Video.tsx";
 
 function App() {
   const origin = window.location.origin.replace('http', 'ws');
@@ -60,21 +61,35 @@ function App() {
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const [stream, setStream] = useState<MediaStream | undefined>(undefined);
+
   const shareScreen = async () => {
     const stream = await navigator.mediaDevices.getDisplayMedia({
       video: true,
       audio: true,
     });
 
-    for (const track of stream.getTracks()) {
-      console.log('adding track');
-      rtc.connection().addTrack(track, stream);
+    setStream(stream);
+  }
+
+  const [target, setTarget] = useState("");
+
+  const startSending = () => {
+    if (stream) {
+      sendJsonMessage({ type: 'sender_ready', id: target})
+      for (const track of stream.getTracks()) {
+        console.log('adding track');
+        rtc.connection().addTrack(track, stream);
+      }
     }
   }
 
   return (
     <>
-      <button onClick={shareScreen}>Share screen</button>
+      <button onClick={shareScreen}>Select something to share</button>
+      Send to: <input type="text" onInput={e => setTarget(e.currentTarget.value)}/>
+      <button onClick={startSending}>Send</button>
+      Preview: {stream && <Video stream={stream} />}
     </>
   )
 }