本页介绍如何创建 Meet 网络插件。
Google Meet 插件 SDK 是
gstatic
(提供静态内容的网域)中的 JavaScript 软件包。
如要使用 Meet 插件 SDK,请将以下脚本标记添加到您的应用中:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/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.createSidePanelClient();
将 CLOUD_PROJECT_NUMBER 替换为您的 Google Cloud 项目。
以下代码段展示了如何启动 activity:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity">
startActivity
</button>
</div>
<div>
Activity 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>
Activity 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-activity')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startActivity({
// 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>
将 CLOUD_PROJECT_NUMBER 替换为您的 Google Cloud 项目。
创建主 Stage 页面
主 Stage 是主要聚焦区域,您可以在其中展示
(如果需要更大的工作区)。主要
界面会在 activity 启动后打开。访问 Meet 插件 SDK
功能,因此您可以使用客户端对象
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
将 CLOUD_PROJECT_NUMBER 替换为您的 Google Cloud 项目。
以下代码段展示了主舞台页面(上一个代码段中的 mainStagePage.html
)示例,其中包含一个响应按钮点击的 getActivityStartingState
调用:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity-starting-state">
Get Activity Starting State's Additional Property
</button>
</div>
<div id="receivedActivityStartingStateProperty"
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-activity-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getActivityStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedActivityStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
将 CLOUD_PROJECT_NUMBER 替换为您的 Google Cloud 项目。