diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 85339369f..347eff46d 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -26,10 +26,50 @@ declare global { } } + interface Window { + desktopCapturer?: { + getSources(options: GetSourcesOptions): Promise>; + }; + } + interface MediaDevices { // This is experimental and types don't know about it yet // https://github.com/microsoft/TypeScript/issues/33232 - getDisplayMedia(constraints: MediaStreamConstraints): Promise; + getDisplayMedia(constraints: MediaStreamConstraints | DesktopCapturerConstraints): Promise; + getUserMedia(constraints: MediaStreamConstraints | DesktopCapturerConstraints): Promise; + } + + export interface DesktopCapturerConstraints { + audio: boolean | { + mandatory: { + chromeMediaSource: string; + chromeMediaSourceId: string; + }; + }; + video: boolean | { + mandatory: { + chromeMediaSource: string; + chromeMediaSourceId: string; + }; + }; + } + + export interface DesktopCapturerSource { + id: string; + name: string; + thumbnail; + // This property is not camelcase and isn't used, therefore it is commented + //display_id: string; + appIcon; + } + + interface GetSourcesOptions { + types: Array; + thumbnailSize?: { + height: number; + width: number; + }; + fetchWindowIcons?: boolean; } interface HTMLAudioElement { diff --git a/src/webrtc/call.ts b/src/webrtc/call.ts index b7706b8ad..9fd567bc7 100644 --- a/src/webrtc/call.ts +++ b/src/webrtc/call.ts @@ -46,31 +46,6 @@ import { RoomMember } from '../models/room-member'; * }); */ - -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; -} - -interface ElectronGetSourcesOptions { - fetchWindowIcons?: boolean; - thumbnailSize?: { - height: number; - width: number; - }; - types: string[]; -} - -declare global { - interface Window { - desktopCapturer?: { - getSources(options: ElectronGetSourcesOptions): Promise>; - }; - } -} - - interface CallOpts { roomId?: string, client?: any, // Fix when client is TSified @@ -361,8 +336,8 @@ export class MatrixCall extends EventEmitter { remoteVideoElement: HTMLVideoElement, localVideoElement: HTMLVideoElement, selectDesktopCapturerSource: ( - sources: Array, - ) => Promise, + sources: Array, + ) => Promise, ) { logger.debug("placeScreenSharingCall"); this.checkForErrorListener(); @@ -373,7 +348,7 @@ export class MatrixCall extends EventEmitter { // We have access to the Electron desktop capturer logger.debug("Electron desktopCapturer is available..."); try { - const options: ElectronGetSourcesOptions = { + const getSourcesOptions: GetSourcesOptions = { thumbnailSize: { height: 176, width: 312, @@ -383,10 +358,9 @@ export class MatrixCall extends EventEmitter { "window", ], }; - - const sources = await window.desktopCapturer.getSources(options); + const sources = await window.desktopCapturer.getSources(getSourcesOptions); const selectedSource = await selectDesktopCapturerSource(sources); - this.screenSharingStream = await window.navigator.mediaDevices.getUserMedia({ + const getUserMediaOptions: MediaStreamConstraints | DesktopCapturerConstraints = { audio: false, video: { mandatory: { @@ -394,7 +368,9 @@ export class MatrixCall extends EventEmitter { chromeMediaSourceId: selectedSource.id, }, }, - }); + } + this.screenSharingStream = await window.navigator.mediaDevices.getUserMedia(getUserMediaOptions); + logger.debug("Got screen stream, requesting audio stream..."); const audioConstraints = getUserMediaVideoContraints(CallType.Voice); this.placeCallWithConstraints(audioConstraints);