electron#desktopCapturer TypeScript Examples

async getScreenCapturedResources(params: WindowInfo): Promise<ServiceResult> {

    const { devicePixelRatio, width, height, types } = params;

    return new Promise(resolve => {
      desktopCapturer.getSources({
        types: types,
        thumbnailSize: {
          width: width * devicePixelRatio,
          height: height * devicePixelRatio
        }
      }).then((sources) => {
        resolve({
          code: 200,
          result: sources
        });
      }).catch(err => {
        resolve({
          code: 500,
          result: err.toString
        });
      });
    });
  }

// eslint-disable-next-line class-methods-use-this
  getDesktopCapturerSources(): Promise<
    Map<string, DesktopCapturerSourceWithType>
  > {
    return new Promise<Map<string, DesktopCapturerSourceWithType>>(
      async (resolve, reject) => {
        const newSources = new Map<string, DesktopCapturerSourceWithType>();
        try {
          const capturerSources = await desktopCapturer.getSources({
            types: [
              DesktopCapturerSourceType.WINDOW,
              DesktopCapturerSourceType.SCREEN,
            ],
            thumbnailSize: { width: 500, height: 500 },
            fetchWindowIcons: true, // TODO: use window icons in app UI !
          });
          capturerSources.forEach((source) => {
            newSources.set(source.id, {
              type: getSourceTypeFromSourceID(source.id),
              source,
            });
          });
          resolve(newSources);
        } catch (e) {
          reject();
        }
      }
    );
  }

contextBridge.exposeInMainWorld('myAPI', {
    getWindowId: async (): Promise<string | null> => {
        const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] })
        let targetId: string | null = null
        for (let source of sources) {
            console.log(`WINDOW NAME: name ${source.name}, ${source.display_id}, ${source.id}`);
            if (source.name === "Entire Screen" || source.name === "CHIME_MANAGER") {
            // if (source.name === "CHIME_MANAGER") {
                    targetId = source.id
            }
        }
        return targetId
    },
    getEnvVars: (): { [key: string]: string|undefined } => {
        console.log(process.env)

        const {CODE, UUID, MEETING_NAME, ATTENDEE_ID, RESTAPI_ENDPOINT} = process.env
        return  {CODE, UUID, MEETING_NAME, ATTENDEE_ID, RESTAPI_ENDPOINT}

    },
    finalize: (): void => {
        ipcRenderer.invoke('finalize', 'ping')
    },
    onAmongusUpdateMessage: (listener: (message: string) => void) =>{
        ipcRenderer.on('amongus-gamestate-updated', (ev: IpcRendererEvent, message: string) => listener(message))
    },
    recorderDataAvailable1: (file:string, data:Uint8Array):void =>{
        ipcRenderer.invoke('recorder-data-available1', file, data)
    },
    recorderDataAvailable2: (file:string, data:Uint8Array):void =>{
        ipcRenderer.invoke('recorder-data-available2', file, data)
    },
    

});

export default function ScreenPicker(props: Props) {
  const { onClickCancelButton, onClickShareButton } = props;
  const [sources, setSources] = useState<DesktopCapturerSource[] | null>(null);
  const [shareType, setShareType] = useState(ShareType.Window);
  const [selectedSourceId, setSelectedSourceId] = useState<string | null>(null);

  useEffect(() => {
    desktopCapturer
      .getSources({
        types: ['screen', 'window'],
        thumbnailSize: { width: 600, height: 600 }
      })
      .then(async (desktopCapturerSources: DesktopCapturerSource[]) => {
        setSources(desktopCapturerSources);
        return null;
      })
      .catch(error => {
        // eslint-disable-next-line
        console.error(error);
      });
  }, []);

  const { screenSources, windowSources } = (
    sources || ([] as DesktopCapturerSource[])
  ).reduce(
    (
      result: {
        screenSources: DesktopCapturerSource[];
        windowSources: DesktopCapturerSource[];
      },
      source: DesktopCapturerSource
    ) => {
      if (source.name === document.title) {
        return result;
      }

      if (source.id.startsWith('screen')) {
        result.screenSources.push(source);
      } else {
        result.windowSources.push(source);
      }
      return result;
    },
    {
      screenSources: [] as DesktopCapturerSource[],
      windowSources: [] as DesktopCapturerSource[]
    }
  );

  const selectedSources =
    shareType === ShareType.Screen ? screenSources : windowSources;

  return (
    <div className={cx('screenPicker')}>
      <div className={cx('top')}>
        <h1 className={cx('header')}>
          <FormattedMessage id="ScreenPicker.title" />
        </h1>
        <div className={cx('tabs')}>
          <button
            type="button"
            className={cx('windowTab', {
              selected: shareType === ShareType.Window
            })}
            onClick={() => {
              setShareType(ShareType.Window);
            }}
          >
            <FormattedMessage id="ScreenPicker.applicationWindowTab" />
          </button>
          <button
            type="button"
            className={cx('screenTab', {
              selected: shareType === ShareType.Screen
            })}
            onClick={() => {
              setShareType(ShareType.Screen);
            }}
          >
            <FormattedMessage id="ScreenPicker.yourEntireScreenTab" />
          </button>
        </div>
      </div>
      <div
        className={cx('middle', {
          loading: !sources
        })}
      >
        {!sources && <LoadingSpinner />}
        {sources && selectedSources && !selectedSources.length && (
          <div className={cx('noScreen')}>
            <FormattedMessage id="ScreenPicker.noScreen" />
          </div>
        )}
        {sources &&
          selectedSources &&
          selectedSources.map(source => (
            <div
              key={source.id}
              className={cx('source', {
                selected: source.id === selectedSourceId
              })}
              onClick={() => {
                setSelectedSourceId(source.id);
              }}
              onKeyPress={() => {}}
              role="button"
              tabIndex={0}
            >
              <div className={cx('image')}>
                <img src={source.thumbnail.toDataURL()} alt={source.name} />
              </div>
              <div className={cx('caption')}>{source.name}</div>
            </div>
          ))}
      </div>
      <div className={cx('bottom')}>
        <div className={cx('buttons')}>
          <button
            type="button"
            className={cx('cancelButton')}
            onClick={() => {
              onClickCancelButton();
            }}
          >
            <FormattedMessage id="ScreenPicker.cancel" />
          </button>
          <button
            type="button"
            disabled={!selectedSourceId}
            className={cx('shareButton', {
              enabled: !!selectedSourceId
            })}
            onClick={() => {
              if (selectedSourceId) {
                onClickShareButton(selectedSourceId);
              }
            }}
          >
            <FormattedMessage id="ScreenPicker.share" />
          </button>
        </div>
      </div>
    </div>
  );
}