From 10cbb13c2600e41cb6dd63ca23ca7352cff36ba1 Mon Sep 17 00:00:00 2001
From: Stanislav Dmitrenko <7953703+avently@users.noreply.github.com>
Date: Sun, 5 Nov 2023 00:59:07 +0800
Subject: [PATCH] desktop: screen sharing in video calls (#3310)

* desktop: screen sharing

* use async function

* fit/fill of the video

* disconnect camera button from screen share

* enable video on audio call

* temp

* Revert "temp"

This reverts commit 8f8a2f7f8820852253c1258234c51e33108424dd.

* Revert "enable video on audio call"

This reverts commit 120068d09afd78d65d14b1063d8f7bb9a6b04695.

* different logic

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
---
 .../simplex/common/views/chat/ChatView.kt     | 47 +++++++----
 .../resources/assets/www/android/call.html    |  1 +
 .../commonMain/resources/assets/www/call.js   | 77 ++++++++++++++++-
 .../resources/assets/www/desktop/call.html    |  6 +-
 .../www/desktop/images/ic_screen_share.svg    |  1 +
 .../desktop/images/ic_stop_screen_share.svg   |  1 +
 .../resources/assets/www/desktop/ui.js        | 23 ++++-
 .../simplex-chat-webrtc/src/android/call.html |  1 +
 packages/simplex-chat-webrtc/src/call.ts      | 83 ++++++++++++++++++-
 .../simplex-chat-webrtc/src/desktop/call.html |  6 +-
 .../src/desktop/images/ic_screen_share.svg    |  1 +
 .../desktop/images/ic_stop_screen_share.svg   |  1 +
 .../simplex-chat-webrtc/src/desktop/ui.ts     | 23 ++++-
 13 files changed, 243 insertions(+), 28 deletions(-)
 create mode 100644 apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_screen_share.svg
 create mode 100644 apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_stop_screen_share.svg
 create mode 100644 packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg
 create mode 100644 packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg

diff --git a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/ChatView.kt b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/ChatView.kt
index e724dfd7cb..2e46a13870 100644
--- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/ChatView.kt
+++ b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/ChatView.kt
@@ -589,18 +589,30 @@ fun ChatInfoToolbar(
   if (chat.chatInfo is ChatInfo.Direct && chat.chatInfo.contact.allowsFeature(ChatFeature.Calls)) {
     if (activeCall == null) {
       barButtons.add {
-        IconButton(
-          {
+        if (appPlatform.isAndroid) {
+          IconButton({
             showMenu.value = false
             startCall(CallMediaType.Audio)
-          },
-          enabled = chat.chatInfo.contact.ready && chat.chatInfo.contact.active
-        ) {
-          Icon(
-            painterResource(MR.images.ic_call_500),
-            stringResource(MR.strings.icon_descr_more_button),
-            tint = if (chat.chatInfo.contact.ready && chat.chatInfo.contact.active) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
-          )
+          }, enabled = chat.chatInfo.contact.ready && chat.chatInfo.contact.active
+          ) {
+            Icon(
+              painterResource(MR.images.ic_call_500),
+              stringResource(MR.strings.icon_descr_audio_call).capitalize(Locale.current),
+              tint = if (chat.chatInfo.contact.ready && chat.chatInfo.contact.active) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
+            )
+          }
+        } else {
+          IconButton({
+            showMenu.value = false
+            startCall(CallMediaType.Video)
+          }, enabled = chat.chatInfo.contact.ready && chat.chatInfo.contact.active
+          ) {
+            Icon(
+              painterResource(MR.images.ic_videocam),
+              stringResource(MR.strings.icon_descr_video_call).capitalize(Locale.current),
+              tint = if (chat.chatInfo.contact.ready && chat.chatInfo.contact.active) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
+            )
+          }
         }
       }
     } else if (activeCall?.contact?.id == chat.id) {
@@ -634,10 +646,17 @@ fun ChatInfoToolbar(
     }
     if (chat.chatInfo.contact.ready && chat.chatInfo.contact.active && activeCall == null) {
       menuItems.add {
-        ItemAction(stringResource(MR.strings.icon_descr_video_call).capitalize(Locale.current), painterResource(MR.images.ic_videocam), onClick = {
-          showMenu.value = false
-          startCall(CallMediaType.Video)
-        })
+        if (appPlatform.isAndroid) {
+          ItemAction(stringResource(MR.strings.icon_descr_video_call).capitalize(Locale.current), painterResource(MR.images.ic_videocam), onClick = {
+            showMenu.value = false
+            startCall(CallMediaType.Video)
+          })
+        } else {
+          ItemAction(stringResource(MR.strings.icon_descr_audio_call).capitalize(Locale.current), painterResource(MR.images.ic_call_500), onClick = {
+            showMenu.value = false
+            startCall(CallMediaType.Audio)
+          })
+        }
       }
     }
   } else if (chat.chatInfo is ChatInfo.Group && chat.chatInfo.groupInfo.canAddMembers) {
diff --git a/apps/multiplatform/common/src/commonMain/resources/assets/www/android/call.html b/apps/multiplatform/common/src/commonMain/resources/assets/www/android/call.html
index 46910bfaf1..7b51a05151 100644
--- a/apps/multiplatform/common/src/commonMain/resources/assets/www/android/call.html
+++ b/apps/multiplatform/common/src/commonMain/resources/assets/www/android/call.html
@@ -11,6 +11,7 @@
       autoplay
       playsinline
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      onclick="javascript:toggleRemoteVideoFitFill()"
     ></video>
     <video
       id="local-video-stream"
diff --git a/apps/multiplatform/common/src/commonMain/resources/assets/www/call.js b/apps/multiplatform/common/src/commonMain/resources/assets/www/call.js
index 62c9ca7fbe..6092eb39e5 100644
--- a/apps/multiplatform/common/src/commonMain/resources/assets/www/call.js
+++ b/apps/multiplatform/common/src/commonMain/resources/assets/www/call.js
@@ -14,6 +14,7 @@ var VideoCamera;
 // for debugging
 // var sendMessageToNative = ({resp}: WVApiMessage) => console.log(JSON.stringify({command: resp}))
 var sendMessageToNative = (msg) => console.log(JSON.stringify(msg));
+var toggleScreenShare = async () => { };
 // Global object with cryptrographic/encoding functions
 const callCrypto = callCryptoFunction();
 var TransformOperation;
@@ -24,6 +25,7 @@ var TransformOperation;
 let activeCall;
 let answerTimeout = 30000;
 var useWorker = false;
+var isDesktop = false;
 var localizedState = "";
 var localizedDescription = "";
 const processCommand = (function () {
@@ -106,8 +108,24 @@ const processCommand = (function () {
         const remoteStream = new MediaStream();
         const localCamera = VideoCamera.User;
         const localStream = await getLocalMediaStream(mediaType, localCamera);
+        if (isDesktop) {
+            localStream
+                .getTracks()
+                .filter((elem) => elem.kind == "video")
+                .forEach((elem) => (elem.enabled = false));
+        }
         const iceCandidates = getIceCandidates(pc, config);
-        const call = { connection: pc, iceCandidates, localMedia: mediaType, localCamera, localStream, remoteStream, aesKey };
+        const call = {
+            connection: pc,
+            iceCandidates,
+            localMedia: mediaType,
+            localCamera,
+            localStream,
+            remoteStream,
+            aesKey,
+            screenShareEnabled: false,
+            cameraEnabled: true,
+        };
         await setupMediaStreams(call);
         let connectionTimeout = setTimeout(connectionHandler, answerTimeout);
         pc.addEventListener("connectionstatechange", connectionStateChange);
@@ -430,12 +448,31 @@ const processCommand = (function () {
         if (!videos)
             throw Error("no video elements");
         const pc = call.connection;
+        const oldAudioTracks = call.localStream.getAudioTracks();
+        const audioWasEnabled = oldAudioTracks.some((elem) => elem.enabled);
+        let localStream;
+        try {
+            localStream = call.screenShareEnabled ? await getLocalScreenCaptureStream() : await getLocalMediaStream(call.localMedia, camera);
+        }
+        catch (e) {
+            if (call.screenShareEnabled) {
+                call.screenShareEnabled = false;
+            }
+            return;
+        }
         for (const t of call.localStream.getTracks())
             t.stop();
         call.localCamera = camera;
-        const localStream = await getLocalMediaStream(call.localMedia, camera);
-        replaceTracks(pc, localStream.getVideoTracks());
-        replaceTracks(pc, localStream.getAudioTracks());
+        const audioTracks = localStream.getAudioTracks();
+        const videoTracks = localStream.getVideoTracks();
+        if (!audioWasEnabled && oldAudioTracks.length > 0) {
+            audioTracks.forEach((elem) => (elem.enabled = false));
+        }
+        if (!call.cameraEnabled && !call.screenShareEnabled) {
+            videoTracks.forEach((elem) => (elem.enabled = false));
+        }
+        replaceTracks(pc, audioTracks);
+        replaceTracks(pc, videoTracks);
         call.localStream = localStream;
         videos.local.srcObject = localStream;
     }
@@ -472,6 +509,21 @@ const processCommand = (function () {
         const constraints = callMediaConstraints(mediaType, facingMode);
         return navigator.mediaDevices.getUserMedia(constraints);
     }
+    function getLocalScreenCaptureStream() {
+        const constraints /* DisplayMediaStreamConstraints */ = {
+            video: {
+                frameRate: 24,
+                //width: {
+                //min: 480,
+                //ideal: 720,
+                //max: 1280,
+                //},
+                //aspectRatio: 1.33,
+            },
+            audio: true,
+        };
+        return navigator.mediaDevices.getDisplayMedia(constraints);
+    }
     function callMediaConstraints(mediaType, facingMode) {
         switch (mediaType) {
             case CallMediaType.Audio:
@@ -526,9 +578,23 @@ const processCommand = (function () {
         const tracks = media == CallMediaType.Video ? s.getVideoTracks() : s.getAudioTracks();
         for (const t of tracks)
             t.enabled = enable;
+        if (media == CallMediaType.Video && activeCall) {
+            activeCall.cameraEnabled = enable;
+        }
     }
+    toggleScreenShare = async function () {
+        const call = activeCall;
+        if (!call)
+            return;
+        call.screenShareEnabled = !call.screenShareEnabled;
+        await replaceMedia(call, call.localCamera);
+    };
     return processCommand;
 })();
+function toggleRemoteVideoFitFill() {
+    const remote = document.getElementById("remote-video-stream");
+    remote.style.objectFit = remote.style.objectFit != "contain" ? "contain" : "cover";
+}
 function toggleMedia(s, media) {
     let res = false;
     const tracks = media == CallMediaType.Video ? s.getVideoTracks() : s.getAudioTracks();
@@ -536,6 +602,9 @@ function toggleMedia(s, media) {
         t.enabled = !t.enabled;
         res = t.enabled;
     }
+    if (media == CallMediaType.Video && activeCall) {
+        activeCall.cameraEnabled = res;
+    }
     return res;
 }
 // Cryptography function - it is loaded both in the main window and in worker context (if the worker is used)
diff --git a/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/call.html b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/call.html
index 5e945ffe64..dd1193babf 100644
--- a/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/call.html
+++ b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/call.html
@@ -12,6 +12,7 @@
       autoplay
       playsinline
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      onclick="javascript:toggleRemoteVideoFitFill()"
     ></video>
     <video
       id="local-video-stream"
@@ -29,6 +30,9 @@
       <img src="/desktop/images/ic_phone_in_talk.svg" />
     </div>
     <p id="manage-call">
+      <button id="toggle-screen" style="display: none" onclick="javascript:toggleScreenManually()">
+        <img src="/desktop/images/ic_screen_share.svg" />
+      </button>
       <button id="toggle-audio" style="display: none" onclick="javascript:toggleAudioManually()">
         <img src="/desktop/images/ic_mic.svg" />
       </button>
@@ -39,7 +43,7 @@
         <img src="/desktop/images/ic_volume_up.svg" />
       </button>
       <button id="toggle-video" style="display: none" onclick="javascript:toggleVideoManually()">
-        <img src="/desktop/images/ic_videocam_filled.svg" />
+        <img src="/desktop/images/ic_videocam_off.svg" />
       </button>
     </p>
   </body>
diff --git a/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_screen_share.svg b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_screen_share.svg
new file mode 100644
index 0000000000..979af2b073
--- /dev/null
+++ b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_screen_share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path fill="white" d="M335.5-388H393v-89q0-23.875 16.35-40.438Q425.7-534 450.175-534H530v68l97-96.5-97-97v68h-80.077q-47.756 0-81.09 33.396Q335.5-524.708 335.5-477v89ZM74-126q-12.25 0-20.625-8.425Q45-142.851 45-154.925 45-167 53.375-175.25T74-183.5h812.5q11.675 0 20.088 8.463Q915-166.574 915-154.825q0 12.325-8.412 20.575Q898.175-126 886.5-126H74Zm68.5-117q-22.969 0-40.234-17.266Q85-277.531 85-300.5V-777q0-22.969 17.266-40.234Q119.531-834.5 142.5-834.5h675q22.969 0 40.234 17.266Q875-799.969 875-777v476.5q0 22.969-17.266 40.234Q840.469-243 817.5-243h-675Zm0-57.5h675V-777h-675v476.5Zm0 0V-777v476.5Z"/></svg>
\ No newline at end of file
diff --git a/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_stop_screen_share.svg b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_stop_screen_share.svg
new file mode 100644
index 0000000000..92e1ff338c
--- /dev/null
+++ b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_stop_screen_share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path fill="white" d="m549-484.5-107-107h88v-68l97 97-78 78ZM799.5-233 741-291.5h70.5V-771h-550L204-828.5h607.5q22.969 0 40.234 17.266Q869-793.969 869-771v479.53q0 26.088-20.25 43.779Q828.5-230 799.5-233Zm36 200.5L737-131H45v-57.5h635L634.5-234h-485q-22.969 0-40.234-17.266Q92-268.531 92-291.5v-481.25q0-2.75.5-3.75l-56-55L78-873 877-74l-41.5 41.5ZM393-475.5v88h-57.5V-477q0-10 2.25-22.5t7.25-23.534L149.5-719v427.5H577l-184-184ZM502-532Zm-138 26.5Z"/></svg>
\ No newline at end of file
diff --git a/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/ui.js b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/ui.js
index 2514a24117..6cf711b790 100644
--- a/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/ui.js
+++ b/apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/ui.js
@@ -1,6 +1,7 @@
 "use strict";
 // Override defaults to enable worker on Chrome and Safari
 useWorker = typeof window.Worker !== "undefined";
+isDesktop = true;
 // Create WebSocket connection.
 const socket = new WebSocket(`ws://${location.host}`);
 socket.addEventListener("open", (_event) => {
@@ -42,11 +43,28 @@ function toggleSpeakerManually() {
 }
 function toggleVideoManually() {
     if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.localMedia) {
-        document.getElementById("toggle-video").innerHTML = toggleMedia(activeCall.localStream, CallMediaType.Video)
+        let res;
+        if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled) {
+            activeCall.cameraEnabled = !activeCall.cameraEnabled;
+            res = activeCall.cameraEnabled;
+        }
+        else {
+            res = toggleMedia(activeCall.localStream, CallMediaType.Video);
+        }
+        document.getElementById("toggle-video").innerHTML = res
             ? '<img src="/desktop/images/ic_videocam_filled.svg" />'
             : '<img src="/desktop/images/ic_videocam_off.svg" />';
     }
 }
+async function toggleScreenManually() {
+    const was = activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled;
+    await toggleScreenShare();
+    if (was != (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled)) {
+        document.getElementById("toggle-screen").innerHTML = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled)
+            ? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
+            : '<img src="/desktop/images/ic_screen_share.svg" />';
+    }
+}
 function reactOnMessageFromServer(msg) {
     var _a;
     switch ((_a = msg.command) === null || _a === void 0 ? void 0 : _a.type) {
@@ -57,8 +75,9 @@ function reactOnMessageFromServer(msg) {
         case "start":
             document.getElementById("toggle-audio").style.display = "inline-block";
             document.getElementById("toggle-speaker").style.display = "inline-block";
-            if (msg.command.media == "video") {
+            if (msg.command.media == CallMediaType.Video) {
                 document.getElementById("toggle-video").style.display = "inline-block";
+                document.getElementById("toggle-screen").style.display = "inline-block";
             }
             document.getElementById("info-block").className = msg.command.media;
             break;
diff --git a/packages/simplex-chat-webrtc/src/android/call.html b/packages/simplex-chat-webrtc/src/android/call.html
index 46910bfaf1..7b51a05151 100644
--- a/packages/simplex-chat-webrtc/src/android/call.html
+++ b/packages/simplex-chat-webrtc/src/android/call.html
@@ -11,6 +11,7 @@
       autoplay
       playsinline
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      onclick="javascript:toggleRemoteVideoFitFill()"
     ></video>
     <video
       id="local-video-stream"
diff --git a/packages/simplex-chat-webrtc/src/call.ts b/packages/simplex-chat-webrtc/src/call.ts
index 2a55b26717..7afdbe1003 100644
--- a/packages/simplex-chat-webrtc/src/call.ts
+++ b/packages/simplex-chat-webrtc/src/call.ts
@@ -165,6 +165,7 @@ interface ConnectionInfo {
 // for debugging
 // var sendMessageToNative = ({resp}: WVApiMessage) => console.log(JSON.stringify({command: resp}))
 var sendMessageToNative = (msg: WVApiMessage) => console.log(JSON.stringify(msg))
+var toggleScreenShare = async () => {}
 
 // Global object with cryptrographic/encoding functions
 const callCrypto = callCryptoFunction()
@@ -193,6 +194,8 @@ interface Call {
   localCamera: VideoCamera
   localStream: MediaStream
   remoteStream: MediaStream
+  screenShareEnabled: boolean
+  cameraEnabled: boolean
   aesKey?: string
   worker?: Worker
   key?: CryptoKey
@@ -201,6 +204,7 @@ interface Call {
 let activeCall: Call | undefined
 let answerTimeout = 30_000
 var useWorker = false
+var isDesktop = false
 var localizedState = ""
 var localizedDescription = ""
 
@@ -308,8 +312,24 @@ const processCommand = (function () {
     const remoteStream = new MediaStream()
     const localCamera = VideoCamera.User
     const localStream = await getLocalMediaStream(mediaType, localCamera)
+    if (isDesktop) {
+      localStream
+        .getTracks()
+        .filter((elem) => elem.kind == "video")
+        .forEach((elem) => (elem.enabled = false))
+    }
     const iceCandidates = getIceCandidates(pc, config)
-    const call = {connection: pc, iceCandidates, localMedia: mediaType, localCamera, localStream, remoteStream, aesKey}
+    const call = {
+      connection: pc,
+      iceCandidates,
+      localMedia: mediaType,
+      localCamera,
+      localStream,
+      remoteStream,
+      aesKey,
+      screenShareEnabled: false,
+      cameraEnabled: true,
+    }
     await setupMediaStreams(call)
     let connectionTimeout: number | undefined = setTimeout(connectionHandler, answerTimeout)
     pc.addEventListener("connectionstatechange", connectionStateChange)
@@ -626,11 +646,31 @@ const processCommand = (function () {
     const videos = getVideoElements()
     if (!videos) throw Error("no video elements")
     const pc = call.connection
+    const oldAudioTracks = call.localStream.getAudioTracks()
+    const audioWasEnabled = oldAudioTracks.some((elem) => elem.enabled)
+    let localStream: MediaStream
+    try {
+      localStream = call.screenShareEnabled ? await getLocalScreenCaptureStream() : await getLocalMediaStream(call.localMedia, camera)
+    } catch (e: any) {
+      if (call.screenShareEnabled) {
+        call.screenShareEnabled = false
+      }
+      return
+    }
     for (const t of call.localStream.getTracks()) t.stop()
     call.localCamera = camera
-    const localStream = await getLocalMediaStream(call.localMedia, camera)
-    replaceTracks(pc, localStream.getVideoTracks())
-    replaceTracks(pc, localStream.getAudioTracks())
+
+    const audioTracks = localStream.getAudioTracks()
+    const videoTracks = localStream.getVideoTracks()
+    if (!audioWasEnabled && oldAudioTracks.length > 0) {
+      audioTracks.forEach((elem) => (elem.enabled = false))
+    }
+    if (!call.cameraEnabled && !call.screenShareEnabled) {
+      videoTracks.forEach((elem) => (elem.enabled = false))
+    }
+
+    replaceTracks(pc, audioTracks)
+    replaceTracks(pc, videoTracks)
     call.localStream = localStream
     videos.local.srcObject = localStream
   }
@@ -671,6 +711,22 @@ const processCommand = (function () {
     return navigator.mediaDevices.getUserMedia(constraints)
   }
 
+  function getLocalScreenCaptureStream(): Promise<MediaStream> {
+    const constraints: any /* DisplayMediaStreamConstraints */ = {
+      video: {
+        frameRate: 24,
+        //width: {
+        //min: 480,
+        //ideal: 720,
+        //max: 1280,
+        //},
+        //aspectRatio: 1.33,
+      },
+      audio: true,
+    }
+    return navigator.mediaDevices.getDisplayMedia(constraints)
+  }
+
   function callMediaConstraints(mediaType: CallMediaType, facingMode: VideoCamera): MediaStreamConstraints {
     switch (mediaType) {
       case CallMediaType.Audio:
@@ -735,10 +791,26 @@ const processCommand = (function () {
   function enableMedia(s: MediaStream, media: CallMediaType, enable: boolean) {
     const tracks = media == CallMediaType.Video ? s.getVideoTracks() : s.getAudioTracks()
     for (const t of tracks) t.enabled = enable
+    if (media == CallMediaType.Video && activeCall) {
+      activeCall.cameraEnabled = enable
+    }
   }
+
+  toggleScreenShare = async function () {
+    const call = activeCall
+    if (!call) return
+    call.screenShareEnabled = !call.screenShareEnabled
+    await replaceMedia(call, call.localCamera)
+  }
+
   return processCommand
 })()
 
+function toggleRemoteVideoFitFill() {
+  const remote = document.getElementById("remote-video-stream")!
+  remote.style.objectFit = remote.style.objectFit != "contain" ? "contain" : "cover"
+}
+
 function toggleMedia(s: MediaStream, media: CallMediaType): boolean {
   let res = false
   const tracks = media == CallMediaType.Video ? s.getVideoTracks() : s.getAudioTracks()
@@ -746,6 +818,9 @@ function toggleMedia(s: MediaStream, media: CallMediaType): boolean {
     t.enabled = !t.enabled
     res = t.enabled
   }
+  if (media == CallMediaType.Video && activeCall) {
+    activeCall.cameraEnabled = res
+  }
   return res
 }
 
diff --git a/packages/simplex-chat-webrtc/src/desktop/call.html b/packages/simplex-chat-webrtc/src/desktop/call.html
index 5e945ffe64..dd1193babf 100644
--- a/packages/simplex-chat-webrtc/src/desktop/call.html
+++ b/packages/simplex-chat-webrtc/src/desktop/call.html
@@ -12,6 +12,7 @@
       autoplay
       playsinline
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      onclick="javascript:toggleRemoteVideoFitFill()"
     ></video>
     <video
       id="local-video-stream"
@@ -29,6 +30,9 @@
       <img src="/desktop/images/ic_phone_in_talk.svg" />
     </div>
     <p id="manage-call">
+      <button id="toggle-screen" style="display: none" onclick="javascript:toggleScreenManually()">
+        <img src="/desktop/images/ic_screen_share.svg" />
+      </button>
       <button id="toggle-audio" style="display: none" onclick="javascript:toggleAudioManually()">
         <img src="/desktop/images/ic_mic.svg" />
       </button>
@@ -39,7 +43,7 @@
         <img src="/desktop/images/ic_volume_up.svg" />
       </button>
       <button id="toggle-video" style="display: none" onclick="javascript:toggleVideoManually()">
-        <img src="/desktop/images/ic_videocam_filled.svg" />
+        <img src="/desktop/images/ic_videocam_off.svg" />
       </button>
     </p>
   </body>
diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg
new file mode 100644
index 0000000000..979af2b073
--- /dev/null
+++ b/packages/simplex-chat-webrtc/src/desktop/images/ic_screen_share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path fill="white" d="M335.5-388H393v-89q0-23.875 16.35-40.438Q425.7-534 450.175-534H530v68l97-96.5-97-97v68h-80.077q-47.756 0-81.09 33.396Q335.5-524.708 335.5-477v89ZM74-126q-12.25 0-20.625-8.425Q45-142.851 45-154.925 45-167 53.375-175.25T74-183.5h812.5q11.675 0 20.088 8.463Q915-166.574 915-154.825q0 12.325-8.412 20.575Q898.175-126 886.5-126H74Zm68.5-117q-22.969 0-40.234-17.266Q85-277.531 85-300.5V-777q0-22.969 17.266-40.234Q119.531-834.5 142.5-834.5h675q22.969 0 40.234 17.266Q875-799.969 875-777v476.5q0 22.969-17.266 40.234Q840.469-243 817.5-243h-675Zm0-57.5h675V-777h-675v476.5Zm0 0V-777v476.5Z"/></svg>
\ No newline at end of file
diff --git a/packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg b/packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg
new file mode 100644
index 0000000000..92e1ff338c
--- /dev/null
+++ b/packages/simplex-chat-webrtc/src/desktop/images/ic_stop_screen_share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44"><path fill="white" d="m549-484.5-107-107h88v-68l97 97-78 78ZM799.5-233 741-291.5h70.5V-771h-550L204-828.5h607.5q22.969 0 40.234 17.266Q869-793.969 869-771v479.53q0 26.088-20.25 43.779Q828.5-230 799.5-233Zm36 200.5L737-131H45v-57.5h635L634.5-234h-485q-22.969 0-40.234-17.266Q92-268.531 92-291.5v-481.25q0-2.75.5-3.75l-56-55L78-873 877-74l-41.5 41.5ZM393-475.5v88h-57.5V-477q0-10 2.25-22.5t7.25-23.534L149.5-719v427.5H577l-184-184ZM502-532Zm-138 26.5Z"/></svg>
\ No newline at end of file
diff --git a/packages/simplex-chat-webrtc/src/desktop/ui.ts b/packages/simplex-chat-webrtc/src/desktop/ui.ts
index f72adffd9f..4f336a17b1 100644
--- a/packages/simplex-chat-webrtc/src/desktop/ui.ts
+++ b/packages/simplex-chat-webrtc/src/desktop/ui.ts
@@ -1,5 +1,6 @@
 // Override defaults to enable worker on Chrome and Safari
 useWorker = typeof window.Worker !== "undefined"
+isDesktop = true
 
 // Create WebSocket connection.
 const socket = new WebSocket(`ws://${location.host}`)
@@ -49,12 +50,29 @@ function toggleSpeakerManually() {
 
 function toggleVideoManually() {
   if (activeCall?.localMedia) {
-    document.getElementById("toggle-video")!!.innerHTML = toggleMedia(activeCall.localStream, CallMediaType.Video)
+    let res: boolean
+    if (activeCall?.screenShareEnabled) {
+      activeCall.cameraEnabled = !activeCall.cameraEnabled
+      res = activeCall.cameraEnabled
+    } else {
+      res = toggleMedia(activeCall.localStream, CallMediaType.Video)
+    }
+    document.getElementById("toggle-video")!!.innerHTML = res
       ? '<img src="/desktop/images/ic_videocam_filled.svg" />'
       : '<img src="/desktop/images/ic_videocam_off.svg" />'
   }
 }
 
+async function toggleScreenManually() {
+  const was = activeCall?.screenShareEnabled
+  await toggleScreenShare()
+  if (was != activeCall?.screenShareEnabled) {
+    document.getElementById("toggle-screen")!!.innerHTML = activeCall?.screenShareEnabled
+      ? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
+      : '<img src="/desktop/images/ic_screen_share.svg" />'
+  }
+}
+
 function reactOnMessageFromServer(msg: WVApiMessage) {
   switch (msg.command?.type) {
     case "capabilities":
@@ -64,8 +82,9 @@ function reactOnMessageFromServer(msg: WVApiMessage) {
     case "start":
       document.getElementById("toggle-audio")!!.style.display = "inline-block"
       document.getElementById("toggle-speaker")!!.style.display = "inline-block"
-      if (msg.command.media == "video") {
+      if (msg.command.media == CallMediaType.Video) {
         document.getElementById("toggle-video")!!.style.display = "inline-block"
+        document.getElementById("toggle-screen")!!.style.display = "inline-block"
       }
       document.getElementById("info-block")!!.className = msg.command.media
       break