electron#DesktopCapturerSource TypeScript Examples

The following examples show how to use electron#DesktopCapturerSource. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.spec.ts    From deskreen with GNU Affero General Public License v3.0 6 votes vote down vote up 
jest.mock('electron', () => {
  // eslint-disable-next-line global-require
  const testScreenSource1a = ({
    id: 'screen:adfe2',
    display_id: '82392',
  } as unknown) as DesktopCapturerSource;
  const testScreenSource2a = ({
    id: 'screen:adfe212',
    display_id: '123234',
  } as unknown) as DesktopCapturerSource;
  const testWindowSource1a = ({
    id: 'window:a42323',
    display_id: '82392',
  } as unknown) as DesktopCapturerSource;
  const testWindowSource2a = ({
    id: 'window:adfe83292',
    display_id: '123234',
  } as unknown) as DesktopCapturerSource;
  return {
    // __esModule: true,
    desktopCapturer: {
      getSources: () => {
        return new Promise((resolve) => {
          resolve([
            testScreenSource1a,
            testWindowSource1a,
            testScreenSource2a,
            testWindowSource2a,
          ]);
        });
      },
    },
  };
});
Example #2
Source File: index.ts    From deskreen with GNU Affero General Public License v3.0 6 votes vote down vote up 
getScreenSources(): DesktopCapturerSource[] {
    const screenSources: DesktopCapturerSource[] = [];
    [...this.sources.keys()].forEach((key) => {
      const source = this.sources.get(key);
      if (!source) return;
      if (source.type === DesktopCapturerSourceType.SCREEN) {
        screenSources.push(source.source);
      }
    });
    return screenSources;
  }
Example #3
Source File: index.ts    From deskreen with GNU Affero General Public License v3.0 6 votes vote down vote up 
getAppWindowSources(): DesktopCapturerSource[] {
    const appWindowSources: DesktopCapturerSource[] = [];
    [...this.sources.keys()].forEach((key) => {
      const source = this.sources.get(key);
      if (!source) return;
      if (source.type === DesktopCapturerSourceType.WINDOW) {
        appWindowSources.push(source.source);
      }
    });
    return appWindowSources;
  }
Example #4
Source File: index.spec.ts    From deskreen with GNU Affero General Public License v3.0 5 votes vote down vote up 
testScreenSource1 = {
  type: DesktopCapturerSourceType.SCREEN,
  source: ({
    id: 'screen:adfe2',
    display_id: '82392',
  } as unknown) as DesktopCapturerSource,
}
Example #5
Source File: index.spec.ts    From deskreen with GNU Affero General Public License v3.0 5 votes vote down vote up 
testScreenSource2 = {
  type: DesktopCapturerSourceType.SCREEN,
  source: ({
    id: 'screen:adfe212',
    display_id: '123234',
  } as unknown) as DesktopCapturerSource,
}
Example #6
Source File: index.spec.ts    From deskreen with GNU Affero General Public License v3.0 5 votes vote down vote up 
testWindowSource1 = {
  type: DesktopCapturerSourceType.WINDOW,
  source: ({
    id: 'window:a42323',
    display_id: '82392',
  } as unknown) as DesktopCapturerSource,
}
Example #7
Source File: index.spec.ts    From deskreen with GNU Affero General Public License v3.0 5 votes vote down vote up 
testWindowSource2 = {
  type: DesktopCapturerSourceType.WINDOW,
  source: ({
    id: 'window:adfe83292',
    display_id: '123234',
  } as unknown) as DesktopCapturerSource,
}
Example #8
Source File: ScreenPicker.tsx    From amazon-chime-sdk-classroom-demo with Apache License 2.0 4 votes vote down vote up 
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>
  );
}