Продвигайте надстройку среди пользователей посредством совместного использования экрана.

На этой странице описывается, как продвигать надстройку среди пользователей при совместном использовании вкладки с помощью Google Meet, размещая небольшой объем кода на другой веб-странице.

Метод exposeToMeetWhenScreensharing() позволяет сайту отправлять информацию в Meet, когда его вкладка открыта для общего доступа к экрану. Эта информация используется при работе надстройки с Meet, когда пользователь нажимает «Начать действие» на баннере презентации, если надстройка у него установлена. Если у пользователя не установлена ​​надстройка, когда он показывает экран вкладки, ему будет предложено установить надстройку.

Объект AddonScreenshareInfo содержит пять свойств, которые можно добавить в зависимости от варианта использования:

• additionalData : информация, которую надстройка может использовать для своей инициализации. Может быть установлен только в том случае, если свойство startActivityOnOpen имеет значение true и доступно с помощью ActivityStartingState . Дополнительные сведения см. в разделе Получение начального состояния действия .

• cloudProjectNumber : обязательный. Номер вашего проекта Google Cloud.

• mainStageUrl : URL-адрес, который открывается основной сцене после запуска надстройки, например https://www.example.com . URL-адрес должен принадлежать тому же источнику , что и URL-адреса, указанные в манифесте надстройки.

• sidePanelUrl : URL-адрес, который открывается боковой панели после запуска надстройки, например https://www.example.com . URL-адрес должен принадлежать тому же источнику , что и URL-адреса, указанные в манифесте надстройки.

• startActivityOnOpen : Обязательно. Следует ли запускать надстройку активности в Meet сразу, когда пользователь запускает надстройку из баннера презентации. Должно иметь значение true, если используется свойство mainStageUrl .

Примечание. Чтобы подсказка об установке на баннере презентации работала, надстройка должна быть опубликована. Дополнительную информацию см. в разделе Публикация дополнения Meet .

Установите и импортируйте SDK

Вы можете получить доступ к SDK с помощью npm или gstatic.

НПМ (рекомендуется)

Если в вашем проекте используется npm, вы можете следовать инструкциям для пакета npm Meet Add-ons SDK .

Сначала установите пакет npm:

npm install @googleworkspace/meet-addons

Затем пакет Meet Add-ons SDK можно получить, импортировав интерфейс MeetAddonScreenshareExport :

import {meet} from '@googleworkspace/meet-addons/meet.addons.screenshare';

Для пользователей TypeScript определения TypeScript поставляются вместе с модулем.

gstatic

SDK надстроек Google Meet доступен в виде пакета JavaScript из gstatic , домена, который предоставляет статический контент.

Чтобы использовать SDK дополнений Meet, добавьте в свое приложение следующий тег сценария:

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.js"></script>

SDK Meet Add-ons доступен через интерфейс MeetAddon по адресу window.meet.addon .

Примечание. Если вы используете TypeScript, вы также можете получить последние типы с https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.d.ts . Просто сохраните файл локально.

Пример: загрузка боковой панели без запуска действия.

В следующем примере кода пользовательский экран совместно использует страницу с надстройкой, которая должна настроить разрешения для ресурсов, прежде чем действие можно будет запустить. В связи с этим требованием надстройка должна запускаться в боковой панели, без запуска активности для всех.

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

Замените следующее:

• CLOUD_PROJECT_NUMBER : строка. Номер вашего облачного проекта.
• SIDE_PANEL_URL : строка. URL-адрес боковой панели.

Когда пользователь на экране вызова Meet делится страницей, он видит баннер презентации в Meet. Нажатие кнопки на баннере открывает дополнение для данного номера облачного проекта на боковой панели. Поскольку для свойства startActivityOnOpen установлено значение false, кнопка запуска действия отключена до тех пор, пока не будет установлено ActivityStartingState . Дополнительные сведения см. в разделе Использование начального состояния действия .

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

Образец дополнения «Анимация» на GitHub включает этот пример как часть полноценного дополнения. Когда отображается индексная страница веб-приложения, связанного с надстройкой, представляющему пользователю предлагается либо установить, либо настроить надстройку.

Пример: Загрузка в основной сцене

В следующем примере кода пользователю, который поделился веб-страницей в Meet, содержащей следующий код, предлагается запустить надстройку:

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    mainStageUrl: MAIN_STAGE_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

Замените следующее:

• CLOUD_PROJECT_NUMBER : строка. Номер вашего проекта Google Cloud.
• MAIN_STAGE_URL : строка. URL-адрес основной сцены.

Когда пользователь на экране вызова Meet делится страницей, он видит баннер презентации в Meet. При нажатии на кнопку на баннере на главной стадии открывается надстройка для данного номера облачного проекта. Свойство mainStageUrl загружается, а свойство additionalData используется для установки начального состояния активности надстройки. Другим участвующим в звонке пользователям сразу будет предложено установить или запустить надстройку.

Пример: Загрузка в боковую панель

В следующем примере кода пользовательский экран использует общую страницу с надстройкой, которая хочет запускаться на боковой панели, а не на основной сцене:

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    sidePanelUrl: SIDE_PANEL_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

Замените следующее:

• CLOUD_PROJECT_NUMBER : строка. Номер вашего облачного проекта.
• SIDE_PANEL_URL : строка. URL-адрес боковой панели.

Когда пользователь на экране вызова Meet делится страницей, он видит баннер презентации в Meet. Нажатие кнопки на баннере открывает дополнение для данного номера облачного проекта на боковой панели. sidePanelUrl загружается, а свойство additionalData используется для установки начального состояния активности надстройки. Другим участвующим в звонке пользователям сразу будет предложено установить или запустить надстройку.

Сопоставление происхождения

Источники, указанные в свойстве mainStageUrl и sidePanelUrl сравниваются с источниками в манифесте надстройки указанного номера облачного проекта. Если все совпадает, пользователю разрешено запустить надстройку.

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

Дополнительную информацию см. в разделе Дополнительная безопасность .

Примечание. В этой реализации используется CaptureHandle , который поддерживается только браузером Chrome версии 102 и более поздних версий.

Связанные темы

• Совместная работа с помощью дополнения Meet
• Дополнительная безопасность