本页介绍了如何创建侧边栏和主界面页面以显示 网页版 Meet 插件。这样,您就可以管理其他参与者可以在 Google Meet 中进行协作的活动或任务。
Google Meet 插件 SDK 以 JavaScript 软件包的形式从 gstatic
(一个用于提供静态内容的网域)中提供。
如要使用 Meet 插件 SDK,请将以下脚本标记添加到您的应用中:
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
Meet 插件 SDK 功能可在 window.meet.addon
下使用。
如需查看参考文档,请参阅资源摘要。
表示插件加载已完成
在加载插件时,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/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="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>
创建主 Stage 页面
主界面用于显示所选插件的内容。创建侧边栏页面后,您可以使用客户端对象 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/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">
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>