Trong thời gian sử dụng sớm, SDK tiện ích bổ sung Google Meet được cung cấp dưới dạng gói JavaScript của gstatic, một miền phân phát nội dung tĩnh.
Để sử dụng SDK tiện ích bổ sung Meet, hãy thêm thẻ tập lệnh sau vào ứng dụng của bạn:
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
Chức năng của SDK Tiện ích bổ sung Meet hiện có trong window.meet.addon.
Để xem tài liệu tham khảo, hãy xem phần Tóm tắt về tài nguyên.
Tạo một trang bảng điều khiển bên
Mã mẫu sau đây là một trang ví dụ về bảng điều khiển bên minh hoạ cách sử dụng SDK tiện ích bổ sung cho Meet:
HTML
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.1.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 style="display: flex">
<div>
<button id="get-frame-type">getFrameType</button>
</div>
<div id="frameTypeResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="get-meeting-info">getMeetingInfo</button>
</div>
<div id="meetingInfoResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="notify-main-stage">notifyMainStage</button>
</div>
<div id="notificationResultContainer" style="padding: 0 20px; word-break: break-all;">
No notification received yet.
</div>
</div>
<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>
<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 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("get-frame-type")
.addEventListener("click", async () => {
document.getElementById('frameTypeResultContainer').textContent = 'Frame type: ' + window.meet.addon.getFrameType();
});
document
.getElementById('get-meeting-info')
.addEventListener('click', async () => {
document.getElementById('meetingInfoResultContainer').textContent = JSON.stringify(await sidePanelClient.getMeetingInfo());
});
document
.getElementById('notify-main-stage')
.addEventListener(
'click', async () => {
await sidePanelClient.notifyMainStage("Notification from side panel:" + new Date().toLocaleTimeString());
});
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
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await sidePanelClient.getCollaborationStartingState());
});
sidePanelClient.on('frameToFrameMessage', (arg) => {
document.getElementById('notificationResultContainer').textContent =
JSON.stringify(arg);
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Tạo trang ở giai đoạn chính
Mã mẫu sau đây là một trang ví dụ về giai đoạn chính minh hoạ cách sử dụng SDK tiện ích bổ sung Meet:
HTML
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.1.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>
<button id="load-side-panel">loadSidePanel</button>
</div>
<div>
<button id="unload-side-panel">unLoadSidePanel</button>
</div>
<div style="display: flex">
<div>
<button id="get-frame-type">getFrameType</button>
</div>
<div id="frameTypeResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="get-meeting-info">getMeetingInfo</button>
</div>
<div id="meetingInfoResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="notify-side-panel">notifySidePanel</button>
</div>
<div id="notificationResultContainer" style="padding-left: 20px">
No notification received yet.
</div>
</div>
<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>
<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("load-side-panel")
.addEventListener("click", async () => {
await mainStageClient.loadSidePanel();
});
document
.getElementById("unload-side-panel")
.addEventListener("click", async () => {
await mainStageClient.unloadSidePanel();
});
document
.getElementById("get-frame-type")
.addEventListener("click", async () => {
document.getElementById('frameTypeResultContainer').textContent = 'Frame type: ' + window.meet.addon.getFrameType();
});
document
.getElementById('get-meeting-info')
.addEventListener('click', async () => {
document.getElementById('meetingInfoResultContainer').textContent = JSON.stringify(await mainStageClient.getMeetingInfo());
});
document
.getElementById('notify-side-panel')
.addEventListener(
'click', async () => {
await mainStageClient.notifySidePanel("Notification from main stage:" + new Date().toLocaleTimeString());
});
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 mainStageClient.setCollaborationStartingState({
sidePanelUrl: sidePanelIframeUrlInputElement.value,
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: additionalDataInputElement.value,
});
});
document
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
mainStageClient.on('frameToFrameMessage', (arg) => {
document.getElementById('notificationResultContainer').textContent =
JSON.stringify(arg);
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>