本頁說明如何建立側邊面板和主要階段頁面,用於顯示網頁版 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>
window.meet.addon
下方提供 Meet 外掛程式 SDK 功能。
如要查看參考說明文件,請參閱資源摘要。
表示外掛程式載入完成
在外掛程式載入期間,Meet 會顯示載入畫面。建立外掛程式工作階段後,Meet 會將此視為來自外掛程式的信號,且該外掛程式已載入完成,而且使用者可以與第三方內容互動。
建立側邊面板頁面
側邊面板會顯示目前已安裝的外掛程式,可供選取使用。如要將側邊面板執行個體化,您可以使用用戶端物件 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: "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 () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>