화면 공유를 통해 사용자에게 부가기능 홍보

이 페이지에서는 다른 웹페이지에 소량의 코드를 배치하여 Google Meet으로 탭을 화면 공유하는 동안 사용자에게 부가기능을 홍보하는 방법을 설명합니다.

exposeToMeetWhenScreensharing() 메서드를 사용하면 탭이 화면 공유될 때 사이트에서 Meet으로 정보를 전송할 수 있습니다. 이 정보는 사용자가 부가기능을 설치한 경우 프레젠테이션 배너에서 '활동 시작'을 클릭할 때 Meet의 부가기능 환경에서 사용됩니다. 사용자가 탭을 화면 공유할 때 부가기능이 설치되어 있지 않으면 부가기능을 설치하라는 메시지가 표시됩니다.

AddonScreenshareInfo 객체에는 사용 사례에 따라 추가할 수 있는 5가지 속성이 포함되어 있습니다.

• 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에서 활동 부가기능 환경을 즉시 시작할지 여부입니다. mainStageUrl 속성이 사용되는 경우 true여야 합니다.

SDK 설치 및 가져오기

npm을 사용하거나 gstatic을 사용하여 SDK에 액세스할 수 있습니다.

npm install @googleworkspace/meet-addons

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

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

예: 활동을 시작하지 않고 측면 패널에 로드

다음 코드 샘플에서 사용자 화면은 활동을 시작하기 전에 리소스 권한을 조정해야 하는 부가기능과 페이지를 공유합니다. 이 요구사항으로 인해 모든 사용자를 위해 활동이 시작되지 않고 측면 패널에서 부가기능을 시작해야 합니다.

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

다음을 바꿉니다.

• CLOUD_PROJECT_NUMBER: 문자열입니다. Cloud 프로젝트의 프로젝트 번호입니다.
• 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에 프레젠테이션 배너가 표시됩니다. 배너의 버튼을 클릭하면 기본 스테이지에서 지정된 Cloud 프로젝트 번호의 부가기능이 열립니다. 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: 문자열입니다. Cloud 프로젝트의 프로젝트 번호입니다.
• SIDE_PANEL_URL: 문자열입니다. 측면 패널의 URL입니다.

Meet 통화 화면의 사용자가 페이지를 공유하면 Meet에 프레젠테이션 배너가 표시됩니다. 배너의 버튼을 클릭하면 측면 패널에 지정된 클라우드 프로젝트 번호의 부가기능이 열립니다. sidePanelUrl 속성이 로드되고 additionalData 속성은 부가기능의 활동 시작 상태를 설정하는 데 사용됩니다. 통화에 참여한 다른 사용자에게 부가기능을 설치하거나 실행하라는 메시지가 즉시 표시됩니다.

출처 일치

mainStageUrl 속성과 sidePanelUrl 속성에 제공된 출처는 제공된 Cloud 프로젝트 번호의 부가기능 매니페스트에 있는 출처와 비교됩니다. 모든 항목이 일치하면 사용자가 부가기능을 실행할 수 있습니다.

또한 화면 공유를 시작하는 사이트의 출처가 부가기능 매니페스트의 addOnOrigins 필드에 나열되어야 합니다.

자세한 내용은 부가기능 보안을 참고하세요.

관련 주제

• Meet 부가기능을 사용하여 공동작업하기
• 부가기능 보안