# This is a combination of 11 commits.

# This is the 1st commit message: Cursor and audio support # This is the commit message screego#2: Audio support # This is the commit message screego#3: Audio support # This is the commit message screego#4: Audio support # This is the commit message screego#5: Audio support # This is the commit message screego#6: Audio support # This is the commit message screego#7: Audio support # This is the commit message screego#8: Audio support # This is the commit message screego#9: Audio support # This is the commit message screego#10: Audio fixes # This is the commit message screego#11: Audio fixes
savely-krasovsky · Apr 9, 2021 · 2818650 · 2818650
1 parent 9735e1d
commit 2818650
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/screego b/screego
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/Room.tsx b/ui/src/Room.tsx
@@ -21,6 +21,8 @@ import {
 import CancelPresentationIcon from '@material-ui/icons/CancelPresentation';
 import PresentToAllIcon from '@material-ui/icons/PresentToAll';
 import FullScreenIcon from '@material-ui/icons/Fullscreen';
+import VolumeUpIcon from '@material-ui/icons/VolumeUp';
+import VolumeMuteIcon from '@material-ui/icons/VolumeMute';
 import PeopleIcon from '@material-ui/icons/People';
 import ShowMoreIcon from '@material-ui/icons/MoreVert';
 import {useHotkeys} from 'react-hotkeys-hook';
@@ -234,6 +236,22 @@ export const Room = ({
                             <PeopleIcon fontSize="large" />
                         </Badge>
                     </Tooltip>
+                    <Tooltip title="Sound" arrow>
+                        <IconButton
+                            onClick={() => {
+                                const video = videoElement as HTMLMediaElement;
+                                if (video) {
+                                    video.muted = !video.muted;
+                                }
+                            }}
+                            disabled={!selectedStream || (state.hostStream ? true : false)}>
+                            {videoElement?.muted ? (
+                                <VolumeMuteIcon fontSize="large" />
+                            ) : (
+                                <VolumeUpIcon fontSize="large" />
+                            )}
+                        </IconButton>
+                    </Tooltip>
                     <Tooltip title="Fullscreen" arrow>
                         <IconButton
                             onClick={() => videoElement?.requestFullscreen()}

diff --git a/ui/src/useRoom.ts b/ui/src/useRoom.ts
@@ -110,11 +110,11 @@ const clientSession = async ({
             done();
         }
     };
+    const stream = new MediaStream();
     peer.ontrack = (event) => {
-        const stream = new MediaStream();
         stream.addTrack(event.track);
-        onTrack(stream);
     };
+    onTrack(stream);
 
     return peer;
 };
@@ -298,7 +298,12 @@ export const useRoom = (): UseRoom => {
         }
         stream.current = await navigator.mediaDevices
             // @ts-ignore
-            .getDisplayMedia({video: true});
+            .getDisplayMedia({
+                video: {
+                    cursor: 'always',
+                },
+                audio: true,
+            });
         stream.current?.getVideoTracks()[0].addEventListener('ended', () => stopShare());
         setState((current) => (current ? {...current, hostStream: stream.current} : current));