本页介绍如何创建 Meet 网络插件。
<ph type="x-smartling-placeholder">Google Meet 插件 SDK 是
gstatic
(提供静态内容的网域)中的 JavaScript 软件包。
如要使用 Meet 插件 SDK,请将以下脚本标记添加到您的应用中:
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
Meet 插件 SDK 功能可通过 window.meet.addon
使用。
如需查看参考文档,请参阅资源
摘要。
表示插件加载已完成
Meet 会显示“正在加载”屏幕, 正在加载。当 插件会话 已建立、 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>
创建主 Stage 页面
主 Stage 是主要聚焦区域,您可以在其中展示插件
如果需要更大的工作空间。协作后,主界面随即打开
。如需在主页面使用 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>