Trang này mô tả cách tạo bảng điều khiển bên và các trang giai đoạn chính để hiển thị các Tiện ích bổ sung của Meet dành cho web. Điều này cho phép bạn quản lý các hoạt động hoặc việc cần làm mà những người tham gia khác có thể cộng tác trong Google Meet.
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 cho Meet, hãy thêm thẻ tập lệnh sau vào ứng dụng:
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
Chức năng SDK Tiện ích bổ sung của 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
Bảng điều khiển bên hiển thị các tiện ích bổ sung hiện đã cài đặt mà bạn có thể chọn và sử dụng. Để tạo bản sao bảng điều khiển bên, bạn có thể sử dụng đối tượng ứng dụng MeetSidePanelClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Dưới đây là đoạn mã cho thấy ví dụ về trang bảng điều khiển bên, bao gồm cả thao tác tải và huỷ tải giai đoạn chính:
<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>
Tạo trang giai đoạn chính
Giai đoạn chính là khu vực cho phép bạn hiển thị nội dung của tiện ích bổ sung đã chọn. Sau khi tạo trang bảng điều khiển bên, bạn có thể sử dụng đối tượng ứng dụng MeetMainStageClient để tạo thực thể cho giai đoạn chính:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Tiếp tục tạo trang giai đoạn chính để sử dụng Tiện ích bổ sung của Meet cho web. Đoạn mã dưới đây là ví dụ về một giai đoạn chính, bao gồm việc tải và huỷ tải trang của bảng điều khiển bên:
<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: "502196118369",
});
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>