이 페이지에서는 페이지의 측면 패널 및 기본 스테이지 페이지를 만드는 방법을 설명합니다. Meet 웹 부가기능
<ph type="x-smartling-placeholder">Google Meet 부가기능 SDK는
정적 콘텐츠를 제공하는 도메인인 gstatic
의 JavaScript 번들
Meet 부가기능 SDK를 사용하려면 앱에 다음 스크립트 태그를 추가하세요.
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
Meet 부가기능 SDK 기능은 window.meet.addon
에서 사용할 수 있습니다.
참조 문서를 보려면 리소스
요약에 나와 있습니다.
부가기능 로드가 완료되었다고 표시
Meet에 로드 화면이 표시되는 동안 부가기능이 로드 중입니다. 이 부가기능 세션 개설됨 Meet은 이를 로드가 완료되었고 사용자가 제3자 콘텐츠와 상호작용할 수 있습니다.
측면 패널 페이지 만들기
측면 패널에는 사용자가 직접 설치한
선택 및 사용할 수 있습니다
부가기능을 선택하면 iframe이 측면에
패널 URL
지정될 수 있습니다 이 이름은
앱의 진입점이라고 할 수 있습니다. Meet 부가기능 SDK 기능에 액세스하려면 다음 안내를 따르세요.
측면 패널에서 sidePanelClient
를 인스턴스화해야 합니다.
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/0.7.0/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="start-collaboration">
startCollaboration
</button>
</div>
<div>
Collaboration Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Collaboration start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</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('start-collaboration')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startCollaboration({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
기본 스테이지 페이지 만들기
기본 단계는 부가기능을 표시할 수 있는 기본 포커스 영역입니다.
더 큰 작업 공간이 필요한 경우에
최적화할 수 있습니다 공동작업이 완료되면 기본 단계가 열립니다.
시작됩니다 Meet 부가기능 SDK 기능에 액세스하려면
클라이언트 객체를 사용하여
MeetMainStageClient
드림
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
이것은
단계 페이지 (이전 스니펫의 mainStagePage.html
)에 추가되어야 하며
버튼 클릭에 대한 응답으로 getCollaborationStartingState
에게 다음과 같이 전송합니다.
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/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">
Get Collaboration Starting State's Additional Property
</button>
</div>
<div id="receivedCollaborationStartingStateProperty"
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: "CLOUD_PROJECT_NUMBER",
});
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 () => {
const startingState =
await mainStageClient.getCollaborationStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedCollaborationStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>