Trang này mô tả cách tạo bảng điều khiển bên và các trang trình bày chính để hiển thị Tiện ích bổ sung của Meet cho web. Nhờ đó, bạn có thể 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 một 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 của bạn:
<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 Meet 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.
Cho biết đã tải xong tiện ích bổ sung
Meet hiển thị một màn hình tải trong khi tiện ích bổ sung đang tải. Khi phiên tiện ích bổ sung được thiết lập, Meet coi đây là một tín hiệu từ tiện ích bổ sung cho biết quá trình tải đã hoàn tất và người dùng có thể tương tác với nội dung của bên thứ ba.
Tạo trang bảng điều khiển bên
Bảng điều khiển bên sẽ hiện 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 thực thể cho 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ề một trang bảng điều khiển bên, bao gồm cả việ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 một 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 một trang màn hình chính để sử dụng Tiện ích bổ sung Meet dành cho web. Đoạn mã dưới đây là ví dụ về giai đoạn chính, bao gồm cả việc tải và huỷ tải trang 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: "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>