Плагин для работы с трансляцией экрана

Обновлено 28 мая 2024

DesktopCapturerPlugin предоставляет возможность делиться экраном при запуске приложения на ElectronJS. Плагин включает в себя запросы прав доступа и вывод списка активных экранов.

Main-процесс

Пример подключения плагина в main-процессе:

import { createJazzSdkElectronMain } from '@salutejs/jazz-sdk-electron/main';
import { desktopCapturerPlugin } from '@salutejs/jazz-sdk-electron-plugins/main';

await createJazzSdkElectronMain({
  plugins: [desktopCapturerPlugin()],
});

Методы

• desktopCapturerPlugin

Preload-процесс

Пример подключения плагина в main-процессе:

import { createJazzSdkElectronPreload } from '@salutejs/jazz-sdk-electron/preload';
import { desktopCapturerPlugin } from '@salutejs/jazz-sdk-electron-plugins/preload';

createJazzSdkElectronPreload({
  plugins: [desktopCapturerPlugin()],
});

Методы

• desktopCapturerPlugin

Renderer-процесс

Пример подключения плагина в renderer-процессе:

import { createJazzWebSdk, JazzSdk } from '@salutejs/jazz-sdk-web';
import { desktopCapturerPlugin } from '@salutejs/jazz-sdk-electron-plugins/renderer';

const jazzSdk: JazzSdk = await createJazzWebSdk({
  plugins: [desktopCapturerPlugin()],
});

Псевдонимы типов

• JazzSdkAskForMediaAccessType
• JazzSdkDesktopCapturerEvent
• JazzSdkDesktopCapturerEventCancel
• JazzSdkDesktopCapturerEventSelectDesktopSource
• JazzSdkDesktopCapturerOptions
• JazzSdkDesktopCapturerService
• JazzSdkDesktopCapturerSource
• JazzSdkDesktopCapturerStatus
• JazzSdkDesktopPicker
• JazzSdkMediaAccessStatus
• JazzSdkMediaAccessType
• JazzSdkSystemSettingsKey

Методы

• desktopCapturerPlugin
• getDesktopCapturer

Описание работы

Работа плагина в браузере и в ElectronJS отличается.

В браузере

При создании медиапотока экрана устройства в API браузера предается запрос, с помощью которого открывается модальное окно в котором можно выбрать элементы для трансляции.

В ElectronJS

При создании медиапотока экрана устройства в desktopCapturerPlugin для получения списка экранов. После получения списка, пользователю предлагается выбрать вариант из списка или завершить процесс создания медиапотока.

Описание методов

Статус процесса

Статус сигнализирует о начале процесса получения медиапотока.

import { handleQuery } from '@salutejs/jazz-sdk-web';
import { getDesktopCapturer } from '@salutejs/jazz-sdk-electron-plugins/renderer';
...
const desktopCapturer = getDesktopCapturer(jazzSdk);
handleQuery(desktopCapturer.status, (state) => {
  // state имеет тип данных JazzSdkDesktopCapturerStatus
});

Статус доступа

Статус доступа информирует о наличии или отсутствии прав доступа на захват видео с экранов.

import { handleQuery } from '@salutejs/jazz-sdk-web';
import { getDesktopCapturer } from '@salutejs/jazz-sdk-electron-plugins/renderer';
...
const desktopCapturer = getDesktopCapturer(jazzSdk);
handleQuery(desktopCapturer.accessStatus, (state) => {
  // state имеет тип данных JazzSdkDesktopCapturerStatus
});

Получение списка экранов

Для получения списка экранов подпишитесь на обновление sources:

import { handleQuery } from '@salutejs/jazz-sdk-web';
import { getDesktopCapturer } from '@salutejs/jazz-sdk-electron-plugins/renderer';

...
const desktopCapturer = getDesktopCapturer(jazzSdk);
handleQuery(desktopCapturer.sources, (state) => {
  // state имеет тип данных JazzSdkDesktopCapturerSource[]
});

Для запуска процесса обновления списка экранов нужно запустить получение медиапотока display в SaluteJazz SDK для Web.

Первый пример:

localDevices
  .getDisplayInputStream()
  .then((stream) => {
    setDisplayStatus('success');
  })
  .catch((error) => {
    if (error instanceof ScreenShareUserCanceledError) {
      setDisplayStatus('idle');
      return;
    }
    setDisplayStatus('error');
  });

Второй пример:

room
  .muteDisplayVideoInput(false)
  .then((stream) => {
    setDisplayStatus('success');
  })
  .catch((error) => {
    if (error instanceof ScreenShareUserCanceledError) {
      setDisplayStatus('idle');
      return;
    }
    setDisplayStatus('error');
  });

После начала процесса получения медиапотока desktopCapturerPlugin перехватывает выполнение и обновляет статус (модуль JazzSdkDesktopCapturerStatus). Статус сигнализирует о начале процесса получения перехваченного медиапотока. После этого выполняется автоматическая проверка статуса доступа к медиа (модуль JazzSdkMediaAccessStatus). Список доступных для трансляции экранов обновится при наличии необходимых прав доступа.

Выбор экрана

Для выбора экрана используйте метод selectSource:

const desktopCapturer = getDesktopCapturer(jazzSdk);
desktopCapturer.selectSource(selectedSource);

Процесс получения медиапотока прекратится автоматически после выбора экрана.

Отмена выбора экрана

Для выбора экрана используйте метод cancel:

const desktopCapturer = getDesktopCapturer(jazzSdk);
desktopCapturer.cancel();

Процесс получения медиапотока прекратится автоматически после отмены выбора экрана.

Запрос прав доступа

Для выбора экрана используйте метод requestDesktopMediaAccess:

const desktopCapturer = getDesktopCapturer(jazzSdk);
desktopCapturer.requestDesktopMediaAccess('audio' | 'video' | 'displayScreen');

Открытие настроек в ОС

Для открытия настроек в ОС используйте метод openSystemSettings:

const desktopCapturer = getDesktopCapturer(jazzSdk);
desktopCapturer.openSystemSettings(
  'microphone-security' | 'camera-security' | 'screen-share-security',
);