本頁說明如何建立側邊面板和主要階段頁面 Meet 網頁版外掛程式。
Google Meet 外掛程式 SDK 是
gstatic
的 JavaScript 套件,這是提供靜態內容的網域。
如要使用 Meet 外掛程式 SDK,請在應用程式中新增下列指令碼標記:
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
window.meet.addon
下方提供 Meet 外掛程式 SDK 功能。
如要查看參考說明文件,請參閱資源
摘要。
表示外掛程式載入完成
Meet 顯示載入畫面時 正在載入外掛程式。當 外掛程式工作階段為 useded: Meet 會將此視為 載入完成,而使用者 都能與第三方內容互動
建立側邊面板頁面
側邊面板會顯示
能選取及使用
選取外掛程式後,iframe 會載入側邊
面板網址
您在附加元件資訊清單中指定的這應該是
應用程式的進入點如何存取 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.9.1/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.9.1/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>