Trang này mô tả cách tạo bảng điều khiển bên và các trang màn hình chính của một Tiện ích bổ sung dành cho web của Meet.
SDK Tiện ích bổ sung Google Meet được cung cấp dưới dạng
Gói JavaScript từ 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.7.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ài nguyên
tóm tắt.
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 đang tải tiện ích bổ sung. Khi phiên hoạt động của tiện ích bổ sung là đã được thành lập, Meet coi đây là một tín hiệu từ tiện ích bổ sung đã tải xong 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 hiển thị các tiện ích bổ sung đã cài đặt mà bạn
có thể chọn và sử dụng.
Sau khi bạn chọn tiện ích bổ sung, iframe sẽ tải phía bên
URL của bảng điều khiển mà bạn
được chỉ định trong tệp kê khai tiện ích bổ sung. Đây sẽ là
điểm truy cập của ứng dụng. Cách sử dụng chức năng SDK Tiện ích bổ sung của Meet
trong bảng điều khiển bên, bạn phải tạo sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Dưới đây là đoạn mã cho biết cách bắt đầu cộng tác:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.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-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>
Tạo một trang giai đoạn chính
Giai đoạn chính là khu vực tiêu điểm chính, nơi bạn có thể hiển thị tiện ích bổ sung
nếu cần không gian làm việc lớn hơn. Giai đoạn chính sẽ mở ra sau khi cộng tác
bắt đầu. Để sử dụng chức năng SDK Tiện ích bổ sung của Meet trong
bạn có thể sử dụng đối tượng ứng dụng
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Sau đây là một đoạn mã cho thấy ví dụ về
trang giai đoạn (mainStagePage.html trong đoạn mã trước) và bao gồm một lệnh gọi
vào getCollaborationStartingState để phản hồi lại một lượt nhấp vào nút:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.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-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>