이 페이지에서는 측면 패널과 기본 단계 페이지를 만들어 웹용 Meet 부가기능을 표시하는 방법을 설명합니다. 이를 통해 다른 참여자가 Google Meet 내에서 공동작업할 수 있는 활동 또는 작업을 관리할 수 있습니다.
Google Meet 부가기능 SDK는 정적 콘텐츠를 제공하는 도메인인 gstatic
에서 JavaScript 번들로 제공됩니다.
Meet 부가기능 SDK를 사용하려면 앱에 다음 스크립트 태그를 추가하세요.
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
Meet 부가기능 SDK 기능은 window.meet.addon
에서 사용할 수 있습니다.
참조 문서를 보려면 리소스 요약을 확인하세요.
측면 패널 페이지 만들기
측면 패널에는 현재 설치되어 있고 사용자가 선택하고 사용할 수 있는 부가기능이 표시됩니다. 측면 패널을 인스턴스화하려면 클라이언트 객체 MeetSidePanelClient를 사용하면 됩니다.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
다음은 기본 스테이지 로드 및 로드 취소가 포함된 측면 패널 페이지의 예를 보여주는 코드 스니펫입니다.
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/latest/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Side Panel Add-on</h1>
<div>
<div>
<button id="set-collaboration-starting-state">
setCollaborationStartingState
</button>
</div>
<div>
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px"
value="https://your_side_panel_iframe.url" />
</div>
<div>
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px"
value="https://your_main_stage_iframe.url" />
</div>
<div>
<input type="text" id="additionalData" style="margin-left: 20px" value="additional data" />
</div>
</div>
</div>
<script>
let sidePanelClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
sidePanelClient = await session.createSidePanelClient();
console.log("Successfully constructed side panel client.");
document
.getElementById('set-collaboration-starting-state')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalDataInputElement =
document.getElementById('additionalData');
await sidePanelClient.setCollaborationStartingState({
sidePanelUrl: sidePanelIframeUrlInputElement.value,
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: additionalDataInputElement.value,
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
기본 스테이지 페이지 만들기
기본 스테이지는 선택한 부가기능의 콘텐츠를 표시할 수 있는 영역입니다. 측면 패널 페이지를 만든 후 클라이언트 객체 MeetMainStageClient를 사용하여 기본 단계를 인스턴스화할 수 있습니다.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
웹용 Meet 부가기능을 사용하기 위한 기본 단계 페이지 만들기를 진행합니다. 아래 코드 스니펫은 측면 패널 페이지 로드 및 로드 취소가 포함된 기본 단계의 예입니다.
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/latest/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; background: white;">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Main Stage Add-on</h1>
<div>
<div>
<button id="get-collaboration-starting-state">
getCollaborationStartingState
</button>
</div>
<div id="receivedCollaborationStartingState"
style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
</div>
</div>
<script>
let mainStageClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "502196118369",
});
console.log("Successfully constructed the add-on session.");
const mainStageClient = await session.createMainStageClient();
console.log("Successfully constructed main stage client.");
document
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>